* { box-sizing: border-box; }
.ui-icon-mic { --icon: url('/static/assets/icons/mic.svg'); }
.ui-icon-volume-2 { --icon: url('/static/assets/icons/volume-2.svg'); }
.ui-icon-clock { --icon: url('/static/assets/icons/clock.svg'); }
.ui-icon-pencil { --icon: url('/static/assets/icons/pencil.svg'); }

.figma-join-root { overscroll-behavior: none; }
.figma-join-body {
  --join-disabled-bg: #f0f0f0;
  --join-disabled-text: #767676;
  --join-dialog-bg: #ffffff;
  --join-dialog-edge: rgba(255, 255, 255, .08);
  --join-dialog-muted: #767676;
  --join-dialog-line: rgba(0, 0, 0, .08);
  --join-dialog-close-bg: rgba(0, 0, 0, .03);
  --join-dialog-close-icon: #595959;
  --join-dialog-ok-bg: rgba(0, 0, 0, .04);
  --join-dialog-ok-hover: rgba(0, 0, 0, .07);
  --join-dialog-ok-pressed: rgba(0, 0, 0, .11);
  --join-link-hover: #595959;
  margin: 0; background: var(--dm-ui-canvas); color: var(--dm-ui-text-primary); font-family: var(--dm-ui-font-family);
}
.figma-join { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100dvh; padding: 168px 24px 110px; text-align: center; }
.join-center { display: flex; flex-direction: column; align-items: center; gap: 60px; width: 100%; }
.join-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; height: 180px; }
.join-mascot { position: absolute; top: -155.4px; right: 0; left: 0; width: 198.3px; height: 198.3px; margin: 0 auto; }
.join-mascot img, .join-mascot video { position: absolute; inset: 0; width: 100%; height: 100%; }
.join-mascot-loop:not(.is-playing), .join-mascot-enter:not(.is-loaded), .join-inline-mascot:not(.is-loaded) { visibility: hidden; }
.join-story { margin: 0; font-size: var(--dm-ui-font-size-display); font-weight: var(--dm-ui-font-weight-semibold); line-height: 90px; letter-spacing: -.005em; }
@media (min-width: 701px) {
  .join-story { font-size: min(var(--dm-ui-font-size-display), calc((100vw - 48px) / 12)); }
}
.join-story-line { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.join-inline-mascot { width: 90px; height: 90px; }
.join-subtitle { margin: 0; color: var(--dm-ui-text-primary); font-size: var(--dm-ui-font-size-kicker); font-weight: var(--dm-ui-font-weight-semibold); line-height: 36px; letter-spacing: -.005em; }
.join-wordmark-frame { display: block; }
.join-wordmark { width: 437px; max-width: 72vw; height: auto; margin: 5px 0; }
.join-primary { display: flex; justify-content: center; align-items: center; width: 260px; min-height: 58px; margin: 0; border: 0; border-radius: var(--dm-ui-radius-pill); background: var(--dm-ui-action-primary-bg); color: var(--dm-ui-action-primary-text); font: inherit; font-size: var(--dm-ui-font-size-action); font-weight: var(--dm-ui-font-weight-semibold); letter-spacing: 0; cursor: pointer; }
.join-primary, .join-privacy-open, .join-dialog-ok { transition: opacity .15s, transform .15s, color .15s, background-color .15s; }
.join-dialog-ok:hover { background: var(--join-dialog-ok-hover); }
.join-dialog-ok:active { background: var(--join-dialog-ok-pressed); }
.join-primary:not(:disabled, .is-disabled):active { transform: scale(.97); }
@media (hover: hover) and (min-width: 701px) {
  .join-primary:not(:disabled, .is-disabled):hover { opacity: .9; }
}
.join-primary:disabled, .join-primary.is-disabled { background: var(--join-disabled-bg); color: var(--join-disabled-text); cursor: default; }
.join-primary:focus-visible, .join-privacy-open:focus-visible, .join-dialog button:focus-visible { outline: 2px solid var(--dm-ui-focus); outline-offset: 2px; }
.join-consent { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 30px; }
.join-consent, .join-state-note { min-height: 75px; }
.join-check-row { display: flex; align-items: center; justify-content: center; color: var(--dm-ui-text-primary); font-size: 13px; font-weight: 500; line-height: 21px; }
.join-check-text { display: inline-flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.join-check-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.join-check-icon { flex: none; margin-right: 6px; fill: none; stroke: var(--dm-ui-text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join-check-input:checked + .join-check-icon circle { fill: var(--dm-ui-text-primary); stroke: var(--dm-ui-text-primary); }
.join-check-input:checked + .join-check-icon path { stroke: var(--dm-ui-canvas); }
.join-check-input:focus-visible + .join-check-icon { border-radius: 50%; outline: 2px solid var(--dm-ui-focus); outline-offset: 1px; }
.join-privacy-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.join-privacy-open:hover { color: var(--join-link-hover); }
.join-privacy-open:active { color: var(--dm-ui-text-muted); }
.join-state-note { margin: 30px 0 0; color: var(--dm-ui-text-secondary); font-size: var(--dm-ui-font-size-body); line-height: 1.68; letter-spacing: -.005em; }
.join-bottom { position: absolute; right: 24px; bottom: 28px; left: 24px; display: flex; flex-direction: column; align-items: center; }
.join-bottom small { color: var(--dm-ui-text-muted); font-size: var(--dm-ui-font-size-caption); }
.join-mobile-break { display: none; }

.join-dialog { display: flex; flex-direction: column; width: min(460px, calc(100vw - 40px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--join-dialog-edge); border-radius: 40px; background: var(--join-dialog-bg); color: var(--dm-ui-text-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); font-family: var(--dm-ui-font-family); }
.join-dialog:not([open]) { display: none; }
.join-dialog:focus { outline: none; }
.join-dialog::backdrop { background: var(--dm-ui-canvas); }
.join-dialog-head { display: flex; flex: none; justify-content: space-between; align-items: center; padding: 24px 24px 16px 30px; }
.join-dialog-head h2 { margin: 0; font-size: 18px; font-weight: var(--dm-ui-font-weight-semibold); }
.join-dialog-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--join-dialog-close-bg); color: var(--join-dialog-close-icon); cursor: pointer; }
.join-dialog-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.join-dialog-intro { flex: none; margin: 0; padding: 0 30px 20px; color: var(--join-dialog-muted); font-size: 14px; font-weight: 500; line-height: 1.6; }
.join-dialog-items { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; margin: 0 24px 24px; padding: 24px 20px 24px 12px; border: 1px solid var(--join-dialog-line); border-radius: 24px; }
.join-dialog-items dt { display: flex; gap: 8px; color: var(--join-dialog-muted); font-size: 13px; font-weight: 500; line-height: 22px; }
.join-dialog-items dt::before { content: "•"; width: 12px; text-align: center; }
.join-dialog-items dd { margin: 3px 0 0 20px; font-size: 13px; line-height: 22px; }
.join-dialog-actions { flex: none; padding: 0 24px 24px; }
.join-dialog-ok { width: 100%; min-height: 58px; border: 0; border-radius: var(--dm-ui-radius-pill); background: var(--join-dialog-ok-bg); color: var(--dm-ui-text-primary); font: inherit; font-size: 16px; font-weight: var(--dm-ui-font-weight-semibold); letter-spacing: 0; cursor: pointer; }
.join-dialog-alert { width: min(360px, calc(100vw - 40px)); }
.join-dialog-alert::backdrop { background: transparent; }
.join-dialog-alert .join-dialog-head h2 { letter-spacing: -.3px; }
.join-dialog-alert .join-dialog-intro { font-size: 15px; }

.figma-auth { position: relative; display: grid; place-items: center; min-height: 100dvh; padding: 32px 24px; background: var(--dm-ui-canvas); color: var(--dm-ui-text-primary); }
.figma-auth-close { display: none; position: absolute; top: 52px; left: 24px; color: inherit; font-size: 30px; line-height: 1; text-decoration: none; }
.figma-auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; transform: translateY(-8%); }
.figma-auth-brand > img:first-child { width: 160px; height: 134px; object-fit: contain; }
.figma-auth-title { margin: 20px 0 0; font-size: 28px; line-height: 1.25; }
.figma-auth-brand p { margin: 24px 0 12px; color: var(--dm-ui-text-secondary); font-size: var(--dm-ui-font-size-kicker); font-weight: var(--dm-ui-font-weight-semibold); line-height: 1.5; letter-spacing: -.04em; }
.figma-auth-brand > img:last-child { display: block; width: min(280px, 72vw); height: auto; }
.figma-auth-action { position: absolute; bottom: max(46px, calc(env(safe-area-inset-bottom) + 24px)); width: min(360px, calc(100% - 48px)); }
.figma-kakao { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 54px; border: 0; border-radius: 100px; background: var(--dm-ui-kakao); color: var(--dm-ui-kakao-text); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.figma-kakao:hover { background: #f4d900; }
.kakao-symbol { position: relative; width: 20px; height: 18px; border-radius: 50%; background: var(--dm-ui-kakao-text); }
.kakao-symbol::after { content: ''; position: absolute; bottom: -2px; left: 2px; width: 7px; height: 7px; background: var(--dm-ui-kakao-text); transform: rotate(-30deg); }
.figma-auth .login-error { margin-bottom: 12px; }
.figma-chat-head, .figma-mobile-menu, .figma-chat-intro { display: none; }
.attachment-picker { position: relative; flex: none; }
.attachment-picker .attach-button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.attachment-picker-menu { position: absolute; z-index: 20; bottom: calc(100% + 20px); left: 0; display: flex; flex-direction: column; width: 220px; padding: 12px 8px; border: 1px solid var(--dm-ui-border); border-radius: 22px; background: var(--dm-ui-surface); box-shadow: 0 12px 34px #0002; }
.attachment-picker-menu[hidden] { display: none; }
.attachment-picker-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--dm-ui-text-primary); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.attachment-picker-menu button:hover, .attachment-picker-menu button:focus-visible { background: var(--dm-ui-surface-soft); }
.picker-icon { display: block; width: 20px; height: 20px; flex: none; background: center / 20px 20px no-repeat; }
/* 플러스 메뉴 아이콘 — Figma 1029:39528 (Mono/Media/Image Stack_line · Board_line) */
.picker-photo { background-image: url('assets/figma/composer/pick-photo.svg'); }
.picker-file { background-image: url('assets/figma/composer/pick-file.svg'); }
:root[data-dm-theme="dark"] .picker-photo { background-image: url('assets/figma/composer/pick-photo-dark.svg'); }
:root[data-dm-theme="dark"] .picker-file { background-image: url('assets/figma/composer/pick-file-dark.svg'); }
.composer-files .attach-chip { position: relative; min-width: 0; max-width: min(190px, 100%); min-height: 56px; padding: 6px 25px 6px 8px; border: 0; border-radius: 12px; background: var(--dm-ui-surface-soft); }
.composer-files .attach-detail { display: flex; flex-direction: column; min-width: 0; }
.composer-files .attach-name { display: block; max-width: 125px; font-size: 12px; font-weight: 500; }
.composer-files .attach-meta { display: block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.composer-files .attach-file-icon { position: relative; width: 26px; height: 32px; flex: none; border: 1px solid #ddd; border-radius: 3px; background: #fff; }
.composer-files .attach-file-icon::after { content: attr(data-extension); position: absolute; bottom: 4px; left: 2px; max-width: 23px; overflow: hidden; padding: 1px; background: #e6a4a4; color: #8d4242; font-size: 7px; line-height: 1; }
.composer-files .attach-remove { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; background: #a5a5a5; color: #fff; font-size: 14px; }
.composer-files .attach-chip.is-photo { width: 56px; height: 56px; min-height: 0; padding: 0; overflow: hidden; }
.composer-files .attach-chip.is-photo .attach-open, .composer-files .attach-chip.is-photo .attach-thumb { display: block; width: 100%; height: 100%; }
.composer-files .attach-chip.is-photo .attach-thumb { object-fit: cover; border-radius: 12px; }
.composer-files .attach-chip.is-photo .attach-detail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.composer-files .attach-chip.is-photo.is-uploading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px; border: 2px solid #fff9; border-top-color: #fff; border-radius: 50%; animation: attachment-spin .8s linear infinite; }
.composer-files .attach-chip.is-photo.is-uploading .attach-thumb { filter: brightness(.65); }
.composer-files .attach-chip.is-photo.is-failed::after { content: '!'; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #fff; color: var(--dm-ui-danger); font-size: 13px; font-weight: 700; }
.composer-files .attach-chip.is-photo.is-failed .attach-thumb { filter: brightness(.65); }
@keyframes attachment-spin { to { transform: rotate(360deg); } }

.figma-voice-state { display: none; }
.figma-voice-button { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: #f3f3f3; color: #333; cursor: pointer; }
body.figma-chat-page .composer.is-listening .attachment-picker, body.figma-chat-page .composer.is-listening textarea, body.figma-chat-page .composer.is-listening .send-button { display: none; }
body.figma-chat-page .composer.is-listening .figma-voice-state { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 10px; padding-left: 12px; color: #888; font-size: 13px; }
.figma-voice-wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.figma-voice-wave i { width: 2px; height: 10px; border-radius: 3px; background: currentColor; animation: figma-wave 900ms ease-in-out infinite alternate; }
.figma-voice-wave i:nth-child(3n) { height: 24px; animation-delay: 180ms; }
.figma-voice-wave i:nth-child(4n) { height: 16px; animation-delay: 360ms; }
@keyframes figma-wave { to { transform: scaleY(.35); } }
body.figma-chat-page .composer.is-listening .figma-voice-button { display: grid; background: #333; color: #f2f2f2; }
body.figma-chat-page .composer.is-listening .figma-voice-button span { display: none; }
body.figma-chat-page .composer.is-listening .figma-voice-button::after { content: ''; width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
body.figma-chat-page .composer:has(textarea:placeholder-shown) .send-button { display: none; }
body.figma-chat-page .composer:not(:has(textarea:placeholder-shown)):not(.is-listening) .figma-voice-button { display: none; }
body.figma-chat-page .composer:has(.composer-files:not(:empty)) .send-button { display: grid; }
body.figma-chat-page .composer:has(.composer-files:not(:empty)) .figma-voice-button { display: none; }
/* TASK-257 (파생): 서버가 받아쓰는 동안과 답변 듣기 버튼. 시안이 없어 입력창 마이크와 같은 원형 버튼을 작게 둔다. */
body.figma-chat-page .composer.is-transcribing .figma-voice-wave { opacity: .35; animation-play-state: paused; }
body.figma-chat-page .composer.is-transcribing .figma-voice-wave i { animation-play-state: paused; }
body.figma-chat-page .composer.is-transcribing .figma-voice-button { cursor: progress; opacity: .6; }
/* 마이크 준비 중 로딩 — 마이크 아이콘 자리(20px, 같은 색 #595959 / 다크 #A6A6A6)에서 돌다가 녹음이 시작되면 사라진다 */
.figma-voice-spinner { display: none; width: 20px; height: 20px; overflow: visible; animation: figma-voice-spin 1.2s linear infinite; }   /* 회전: 1.2초에 한 바퀴 */
.figma-voice-spinner circle { fill: none; stroke: #595959; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 200; animation: figma-voice-dash 1.8s infinite; }   /* 한 주기 1.8초 */
@keyframes figma-voice-spin { to { transform: rotate(360deg); } }
@keyframes figma-voice-dash {
  0% { stroke-dasharray: 1 200; stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.7, 0, .25, 1.35); }    /* 늘어남(살짝 튕김) */
  50% { stroke-dasharray: 71 200; stroke-dashoffset: -28; animation-timing-function: cubic-bezier(.85, 0, .15, 1); }   /* 꼬리가 쫓아가며 줄어듦 */
  100% { stroke-dasharray: 71 200; stroke-dashoffset: -99; }
}
body.figma-chat-page .composer .figma-voice-button.is-preparing { background-image: none !important; cursor: progress; }
body.figma-chat-page .composer .figma-voice-button.is-preparing .ui-icon { display: none; }
body.figma-chat-page .composer .figma-voice-button.is-preparing .figma-voice-spinner { display: block; }
:root[data-dm-theme="dark"] .figma-voice-spinner circle { stroke: #a6a6a6; }
.speak-button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dm-ui-text-muted, #949494); cursor: pointer; }
.artifact-card { padding: 10px; border-radius: 18px; }
.artifact-card .file-chip { min-height: 54px; padding: 4px 5px 10px; color: var(--dm-ui-text-primary); }
.artifact-card .file-badge { width: 34px; height: 38px; border-radius: 7px; }
.artifact-card .artifact-preview { max-height: 210px; margin: 2px 4px 10px; padding: 14px; border: 1px solid var(--dm-ui-border); border-radius: 12px; }
.figma-artifact-actions { display: flex; gap: 8px; padding: 0 4px 2px; }
.figma-artifact-actions > a, .figma-artifact-actions > button { display: grid; place-items: center; flex: 1; min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--dm-ui-radius-pill); background: var(--dm-ui-surface-soft); color: var(--dm-ui-text-primary); text-decoration: none; font: inherit; font-size: 12px; cursor: pointer; }
.figma-artifact-actions > a:hover, .figma-artifact-actions > button:hover { background: var(--dm-ui-border); }
.speak-button .ui-icon { width: 16px; height: 16px; }
.speak-button:hover, .speak-button.is-speaking { background: var(--dm-ui-surface-soft, #f3f3f3); color: var(--dm-ui-text-primary, #191919); }
.speak-button.is-loading { cursor: progress; }
.figma-chat-identity.is-thinking strong, .figma-desktop-chat-status.is-thinking strong, .figma-desktop-chat-status.is-thinking small {
  background: linear-gradient(100deg, var(--dm-ui-text-secondary) 30%, var(--dm-ui-text-primary) 50%, var(--dm-ui-text-secondary) 70%);
  background-size: 220% 100%; background-clip: text; color: transparent;
  animation: dm-thinking-text 2s linear infinite;
}
.turn-notice { align-items: center; gap: 8px; color: var(--dm-ui-text-secondary); font-size: 12px; }
.turn-notice .link-button { font-size: inherit; }
@keyframes dm-thinking-text { from { background-position: 100% 50%; } to { background-position: -100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .figma-chat-identity.is-thinking strong, .figma-desktop-chat-status.is-thinking strong, .figma-desktop-chat-status.is-thinking small {
    animation: none; background: none; color: var(--dm-ui-text-primary);
  }
}
.speak-button.is-loading .ui-icon { animation: speak-wait 1s ease-in-out infinite alternate; }
@keyframes speak-wait { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .speak-button.is-loading .ui-icon { animation: none; opacity: .5; } }

@media (max-width: 700px) {
  .figma-auth-close { display: block; }
  .figma-join { justify-content: flex-start; padding: 60px 20px max(17px, env(safe-area-inset-bottom)); }
  .join-center { flex: 1 0 auto; justify-content: center; gap: 40px; padding-top: clamp(60px, calc(100dvh - 738px), 114px); }
  .join-hero { height: 150px; }
  .join-mascot { top: -98.9px; width: 157px; height: 157px; }
  .join-story { line-height: 50px; }
  .join-inline-mascot { width: 50px; height: 50px; }
  .join-wordmark { width: 252px; margin: 7px 0 0; }
  .join-subtitle { line-height: 20px; }
  .join-primary { width: auto; min-width: 145px; padding: 0 30px; }
  .join-consent, .join-state-note { min-height: 0; margin-top: 40px; }
  .join-bottom { position: static; margin-top: 43px; }
  .join-mobile-break { display: initial; }
  .join-dialog { width: min(353px, calc(100vw - 40px)); max-height: min(540px, calc(100dvh - 32px)); border-radius: 32px; }
  body.figma-chat-page, body.figma-menu-page { background: var(--dm-ui-canvas); }
  body.figma-chat-page .shell, body.figma-menu-page .shell { padding-bottom: 0; background: var(--dm-ui-canvas); }
  body.figma-chat-page .mobile-nav, body.figma-menu-page .mobile-nav { display: none; }
  body.figma-chat-page .danmuji-shell .main, body.figma-menu-page .danmuji-shell .main { background: var(--dm-ui-canvas); }
  body.figma-chat-page .danmuji-shell .main-head { height: 64px; padding: 0 20px; border: 0; }
  body.figma-chat-page .main-head > .mobile-brand, body.figma-chat-page .main-head > .head-actions { display: none; }
  .figma-chat-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; height: 100%; }
  .figma-chat-head button { display: grid; place-items: center; border: 0; background: none; color: var(--dm-ui-text-primary); cursor: pointer; }
  .figma-chat-leading { display: flex; align-items: center; justify-self: start; gap: 9px; }
  .figma-chat-head .figma-close { width: 36px; height: 36px; border: 1px solid var(--dm-ui-border); border-radius: 50%; font-size: 25px; font-weight: 300; line-height: 1; }
  .figma-menu-back .ui-icon { width: 24px; height: 24px; transform: rotate(180deg); }
  .figma-chat-identity { display: flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; border: 1px solid #e9e9e9; border-radius: 99px; color: var(--dm-ui-text-primary); font-size: 13px; }
  .figma-chat-identity img { width: 29px; height: 27px; object-fit: contain; }
  .figma-chat-actions { display: flex; align-items: center; justify-self: end; gap: 12px; }
  .figma-chat-actions button { width: 27px; height: 34px; }
  .figma-chat-head .figma-hamburger { display: flex; flex-direction: column; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--dm-ui-border); border-radius: 50%; gap: 4px; }
  .figma-hamburger span { width: 19px; height: 1.5px; border-radius: 2px; background: var(--dm-ui-text-primary); }
  body.figma-chat-page .danmuji-shell .main-content { max-width: none; padding: 0 16px; }
  body.figma-chat-page .chat-layout { height: calc(100dvh - 64px); min-height: 0; }
  body.figma-chat-page .chat-toolbar { display: none; }
  body.figma-chat-page .chat-box { min-height: 0; }
  body.figma-chat-page .messages { min-height: 0; max-height: none; padding: 24px 0 18px; gap: 9px; }
  body.figma-chat-page .messages.is-empty { display: block; }
  body.figma-chat-page .chat-welcome { max-width: none; margin: 0; text-align: left; }
  .figma-chat-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
  .figma-chat-intro > .bubble { max-width: 290px; padding: 12px 14px; border-radius: 17px; background: var(--dm-ui-surface-soft); color: var(--dm-ui-text-primary); font-size: 14px; line-height: 1.55; }
  .figma-chat-intro > .bubble:first-child { max-width: max-content; }
  .figma-desktop-welcome { display: none; }
  .figma-suggestions { display: flex; flex-direction: column; gap: 8px; width: min(100%, 340px); margin-top: 8px; padding: 16px 12px; border-radius: 18px; background: var(--dm-ui-surface-soft); }
  .figma-suggestions strong { margin-bottom: 2px; color: var(--dm-ui-text-primary); font-size: 14px; }
  .figma-suggestions button { padding: 10px 12px; border: 1px solid #eaeaea; border-radius: 10px; background: var(--dm-ui-canvas); color: #363636; text-align: left; font-size: 12px; line-height: 1.35; }
  body.figma-chat-page .message > .mascot { display: none; }
  body.figma-chat-page .message { max-width: 85%; }
  body.figma-chat-page .bubble { border-radius: 16px; font-size: 14px; }
  body.figma-chat-page .bubble.assistant { background: var(--dm-ui-surface-soft); color: var(--dm-ui-text-primary); }
  body.figma-chat-page .bubble.user { background: var(--dm-ui-kakao); color: var(--dm-ui-text-primary); }
  body.figma-chat-page .composer { align-items: center; gap: 4px; min-height: 54px; padding: 5px 6px; border: 1px solid #e8e8e8; border-radius: 28px; box-shadow: none; }
  body.figma-chat-page .composer:has(.composer-files:not(:empty)) { padding-top: 12px; }
  body.figma-chat-page .composer-files { gap: 6px; padding: 0 8px 0 10px; }
  body.figma-chat-page .composer:focus-within { border-color: #bdbdbd; box-shadow: none; }
  body.figma-chat-page .attach-button { width: 40px; height: 40px; color: var(--dm-ui-text-primary); }
  body.figma-chat-page .composer textarea { min-height: 40px; max-height: 112px; padding: 11px 0 6px; resize: none; color: var(--dm-ui-text-primary); font-size: 14px; }
  body.figma-chat-page .composer textarea::placeholder { color: #999; }
  body.figma-chat-page .send-button { width: 40px; height: 40px; border-radius: 50%; background: var(--dm-ui-text-primary); }
  body.figma-chat-page .composer-note { display: none; }
  body.figma-chat-page .chat-approvals:empty { display: none; }

  body.figma-menu-page .danmuji-shell .main-head { display: none; }
  body.figma-menu-page .danmuji-shell .main-content { padding: 0; }
  .figma-desktop-profile { display: none; }
  .figma-mobile-menu { display: block; min-height: 100dvh; padding: 20px 24px 36px; background: var(--dm-ui-canvas); color: var(--dm-ui-text-primary); }
  .figma-menu-back { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--dm-ui-text-primary); }
  .figma-menu-hero { display: flex; flex-direction: column; align-items: center; margin: 84px 0 34px; }
  .figma-menu-hero img { width: 78px; height: 84px; object-fit: contain; }
  .figma-menu-hero h2 { margin: 16px 0 4px; font-size: 24px; font-weight: 700; }
  .figma-menu-hero p { margin: 0; color: #a1a1a1; font-size: 13px; }
  .figma-menu-actions { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 340px; margin: 0 auto 40px; text-align: center; }
  .figma-menu-actions button { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; color: #333; font-size: 13px; cursor: pointer; }
  .figma-menu-actions button > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--dm-ui-surface-soft); }
  .figma-menu-library { margin: 0 0 18px; }
  .figma-menu-library > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 17px; border: 0; background: none; color: inherit; text-align: left; font-size: 17px; font-weight: 700; }
  .figma-menu-library > button span { font-size: 24px; font-weight: 400; }
  .figma-menu-cards { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; }
  .figma-menu-cards::-webkit-scrollbar { display: none; }
  .figma-menu-cards > button { display: flex; flex: 0 0 120px; flex-direction: column; justify-content: space-between; width: 120px; height: 114px; padding: 11px; border: 1px solid #e9e9e9; border-radius: 12px; background: var(--dm-ui-canvas); color: inherit; text-align: left; }
  .figma-menu-cards .figma-file-icon { color: #e85050; font-size: 20px; font-weight: 800; }
  .figma-menu-cards strong { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; font-size: 12px; line-height: 1.25; }
  .figma-menu-links { border-top: 1px solid #eee; }
  .figma-menu-links button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 61px; padding: 0; border: 0; border-bottom: 1px solid #eee; background: none; color: var(--dm-ui-text-primary); text-align: left; font-size: 17px; font-weight: 700; cursor: pointer; }
  .figma-menu-links span { color: var(--dm-ui-text-primary); font-size: 24px; font-weight: 400; }
}

@media (max-width: 360px) {
  .join-story { font-size: 26px; }
  .join-inline-mascot { width: 36px; height: 36px; }
  .join-mascot { top: -54.94px; width: 113.04px; height: 113.04px; }
}

/* /join is a separate document; the app's sign-in uses the selected appearance. */
@media (prefers-color-scheme: dark) {
  .figma-join-body {
    --dm-ui-canvas: var(--dm-ui-dark-canvas);
    --dm-ui-text-primary: var(--dm-ui-dark-text-primary);
    --dm-ui-text-secondary: var(--dm-ui-dark-text-secondary);
    --dm-ui-text-muted: var(--dm-ui-dark-text-muted);
    --dm-ui-action-primary-bg: var(--dm-ui-dark-text-primary);
    --dm-ui-action-primary-text: var(--dm-ui-dark-action-text);
    --dm-ui-focus: var(--dm-ui-dark-text-primary);
    --join-disabled-bg: #373737;
    --join-disabled-text: #a6a6a6;
    --join-dialog-bg: #2e2e2e;
    --join-dialog-muted: #a6a6a6;
    --join-dialog-line: rgba(255, 255, 255, .12);
    --join-dialog-close-bg: rgba(255, 255, 255, .06);
    --join-dialog-close-icon: #c9c9c9;
    --join-dialog-ok-bg: rgba(255, 255, 255, .08);
    --join-dialog-ok-hover: rgba(255, 255, 255, .12);
    --join-dialog-ok-pressed: rgba(255, 255, 255, .17);
    --join-link-hover: #c9c9c9;
  }
  .figma-join-body, .figma-join { background: var(--dm-ui-canvas); color: var(--dm-ui-text-primary); }
  .join-wordmark { filter: invert(1); }
}
:root[data-dm-theme="dark"] .figma-auth-brand > img:last-child { filter: invert(1); }
:root[data-dm-theme="dark"] body.figma-chat-page {
  --dm-ui-canvas: var(--dm-ui-chat-dark-canvas);
  --dm-ui-surface: var(--dm-ui-chat-dark-surface);
  --dm-ui-surface-soft: var(--dm-ui-chat-dark-surface);
  --dm-ui-border: #333333;
  --dm-ui-text-primary: var(--dm-ui-chat-dark-ink);
}
:root[data-dm-theme="dark"] body.figma-chat-page .danmuji-shell .rail { background: var(--dm-ui-menu-rail-bg); }
:root[data-dm-theme="dark"] body.figma-chat-page .bubble.user { background: var(--dm-ui-kakao); color: var(--dm-ui-kakao-text); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-chip { color: var(--dm-ui-chat-dark-ink); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-meta { color: #bdbdbd; }
:root[data-dm-theme="dark"] body.figma-chat-page .figma-voice-button { background: #303030; color: var(--dm-ui-chat-dark-ink); }
:root[data-dm-theme="dark"] .speak-button { color: #9e9e9e; }
:root[data-dm-theme="dark"] .speak-button:hover, :root[data-dm-theme="dark"] .speak-button.is-speaking { background: #303030; color: var(--dm-ui-chat-dark-ink); }

@media (max-width: 700px) {
  :root[data-dm-theme="dark"] .figma-auth { --dm-ui-text-secondary: var(--dm-ui-dark-text-secondary-mobile); }
}

@media (max-width: 700px) {
  :root[data-dm-theme="dark"] { --dm-ui-text-secondary: var(--dm-ui-dark-text-secondary-mobile); }
  :root[data-dm-theme="dark"] body.figma-chat-page, :root[data-dm-theme="dark"] body.figma-menu-page, :root[data-dm-theme="dark"] body.figma-chat-page .shell, :root[data-dm-theme="dark"] body.figma-menu-page .shell, :root[data-dm-theme="dark"] body.figma-chat-page .danmuji-shell .main, :root[data-dm-theme="dark"] body.figma-menu-page .danmuji-shell .main, :root[data-dm-theme="dark"] .figma-mobile-menu { background: var(--dm-ui-chat-dark-canvas); color: var(--dm-ui-chat-dark-ink); }
  :root[data-dm-theme="dark"] .figma-menu-hero p { color: #aaa; }
  :root[data-dm-theme="dark"] body.figma-chat-page .danmuji-shell .main-head { background: var(--dm-ui-chat-dark-canvas); }
  :root[data-dm-theme="dark"] .figma-chat-head button, :root[data-dm-theme="dark"] .figma-chat-identity, :root[data-dm-theme="dark"] .figma-menu-back, :root[data-dm-theme="dark"] .figma-menu-links button { color: var(--dm-ui-chat-dark-ink); }
  :root[data-dm-theme="dark"] .figma-chat-identity, :root[data-dm-theme="dark"] body.figma-chat-page .composer { border-color: #333; }
  :root[data-dm-theme="dark"] .figma-hamburger span { background: var(--dm-ui-chat-dark-ink); }
  :root[data-dm-theme="dark"] .figma-chat-intro > .bubble, :root[data-dm-theme="dark"] .figma-suggestions, :root[data-dm-theme="dark"] body.figma-chat-page .bubble.assistant { background: var(--dm-ui-chat-dark-surface); color: var(--dm-ui-chat-dark-ink); }
  :root[data-dm-theme="dark"] .figma-suggestions strong { color: var(--dm-ui-chat-dark-ink); }
  :root[data-dm-theme="dark"] .figma-suggestions button { border-color: #333; background: #181818; color: var(--dm-ui-chat-dark-ink); }
  :root[data-dm-theme="dark"] body.figma-chat-page .composer { background: #1c1c1c; }
  :root[data-dm-theme="dark"] body.figma-chat-page .composer textarea, :root[data-dm-theme="dark"] body.figma-chat-page .attach-button { color: var(--dm-ui-chat-dark-ink); }
  :root[data-dm-theme="dark"] body.figma-chat-page .send-button { background: #f2f2f2; color: #080808; }
  :root[data-dm-theme="dark"] body.figma-chat-page .attachment-picker-menu { border-color: #333; background: var(--dm-ui-chat-dark-surface); }
  :root[data-dm-theme="dark"] body.figma-chat-page .attachment-picker-menu button { color: var(--dm-ui-chat-dark-ink); }
  :root[data-dm-theme="dark"] body.figma-chat-page .attachment-picker-menu button:hover, :root[data-dm-theme="dark"] body.figma-chat-page .attachment-picker-menu button:focus-visible, :root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-chip { background: #303030; }
  :root[data-dm-theme="dark"] .figma-menu-links, :root[data-dm-theme="dark"] .figma-menu-links button { border-color: #303030; }
  :root[data-dm-theme="dark"] .figma-menu-cards > button { border-color: #303030; background: var(--dm-ui-chat-dark-card); }
  :root[data-dm-theme="dark"] .figma-menu-links span { color: var(--dm-ui-chat-dark-ink); }
}

@media (prefers-color-scheme: dark) and (max-width: 700px) {
  .figma-join-body { --dm-ui-text-secondary: var(--dm-ui-dark-text-secondary-mobile); }
}


@media (prefers-reduced-motion: reduce) { .figma-voice-wave i, .composer-files .attach-chip.is-photo.is-uploading::after { animation: none; } }

/* TASK-202: the current side menu and chat placement in the Figma guide. */
@media (min-width: 701px) {
  body.figma-chat-page .composer { align-items: center; gap: 6px; width: min(100%, 700px); min-height: 58px; margin-inline: auto; padding: 8px 10px; border-radius: 32px; }
  body.figma-chat-page .composer textarea { min-width: 0; height: 40px; min-height: 40px; max-height: 182px; padding: 9px 0; resize: none; font-size: 14px; line-height: 22px; }
  body.figma-chat-page .composer-note { display: none; }
  .main-chat .main-head > .head-title, .main-chat .main-head > .head-actions { display: none; }
  .danmuji-shell .main-chat { padding-bottom: 0; }
  .danmuji-shell .main-chat .chat-layout { height: calc(100dvh - 96px); min-height: 0; padding-bottom: 40px; }
  .danmuji-shell .main-chat .messages { min-height: 0; max-height: none; }
}

@media (max-width: 700px) {
  .figma-desktop-chat-head { display: none; }
  .danmuji-shell.shell { padding-bottom: 0; }
  .mobile-nav { display: none; }
  .danmuji-shell .main-head .head-title { display: block; }
  body.figma-chat-page .danmuji-shell .main-head .head-title { display: none; }
  .danmuji-shell .main-head .head-title p, .danmuji-shell .main-head .mobile-brand { display: none; }
  body.figma-chat-page .danmuji-shell .main, body.figma-menu-page .danmuji-shell .main { padding-bottom: 0; }
  body.figma-chat-page .chat-layout { padding-bottom: 0; }
  body.figma-chat-page .messages { min-height: 0; }

  body.figma-menu-page .danmuji-shell .main { padding-inline: 0; }
  .figma-mobile-menu { min-height: 100dvh; padding: 0 0 max(24px, env(safe-area-inset-bottom)); }
  .figma-menu-top { display: flex; flex-direction: column; width: 100%; height: min(61dvh, 517px); min-height: 390px; padding: 58px 20px 24px; border-radius: 0 0 54px 54px; background: var(--dm-ui-menu-hero-bg); color: var(--dm-ui-menu-hero-ink); }
  .figma-menu-back { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--dm-ui-menu-action-bg); color: var(--dm-ui-menu-hero-ink); }
  .figma-menu-hero { flex: 1; justify-content: center; margin: 0; }
  .figma-menu-hero img { width: 86px; height: 84px; }
  .figma-menu-hero h2 { margin: 8px 0 2px; font-size: 23px; }
  .figma-menu-hero p { color: #575124; font-size: 13px; }
  .figma-menu-actions { width: 100%; max-width: none; margin: 0 0 22px; }
  .figma-menu-actions button { gap: 7px; color: var(--dm-ui-menu-hero-ink); font-weight: 600; }
  .figma-menu-actions button > span { width: 48px; height: 48px; background: var(--dm-ui-menu-action-bg); color: var(--dm-ui-menu-hero-ink); }
  .figma-menu-actions .ui-icon { width: 20px; height: 20px; }
  .figma-menu-usage { width: 100%; min-height: 69px; padding: 13px 16px; border: 0; border-radius: 17px; background: var(--dm-ui-menu-usage-bg); color: var(--dm-ui-menu-hero-ink); text-align: left; cursor: pointer; }
  .figma-menu-usage-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
  .figma-menu-usage-heading strong { white-space: nowrap; font-size: 12px; }
  .figma-menu-usage-track { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 5px; background: var(--dm-ui-menu-usage-track); }
  .figma-menu-usage-track span { display: block; height: 100%; border-radius: inherit; background: var(--dm-ui-menu-hero-ink); }
  .figma-menu-links { margin: 12px 20px 0; border-top: 0; }
  .figma-menu-links button { min-height: 56px; border-color: #efefef; font-size: 16px; }
  .figma-menu-links button:last-child { border-bottom: 0; }
}

@media (max-width: 700px) {
  :root[data-dm-theme="dark"] .figma-menu-top, :root[data-dm-theme="dark"] .figma-menu-back, :root[data-dm-theme="dark"] .figma-menu-actions button, :root[data-dm-theme="dark"] .figma-menu-actions button > span { color: var(--dm-ui-menu-hero-ink); }
  :root[data-dm-theme="dark"] .figma-menu-back, :root[data-dm-theme="dark"] .figma-menu-actions button > span { background: var(--dm-ui-menu-action-bg); }
  :root[data-dm-theme="dark"] .figma-menu-hero p { color: #575124; }
}

/* ── 채팅 입력창 — Figma Input 컴포넌트 (Pehs4AKNIBNvWOHquSDzyB 175:40245) ─────────────────
   한 줄: [+ 38][글 16/24][마이크·보내기 50×38]. 두 줄 이상(.is-multiline)·첨부가 있으면 글이 위, 버튼이 아래.
   음성 입력(.is-listening): 「듣고 있어요」 위, 이퀄라이저와 멈춤 버튼 아래. 아이콘은 Figma 컴포넌트 export. */
body.figma-chat-page .composer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-areas: "plus text action";
  /* 한 줄도 바닥 기준(줄 높이 42 = 58 - 위아래 8): 높이가 바뀌는 동안 버튼이 가운데로 튀지 않는다 */
  grid-template-rows: 42px;
  align-content: end;
  align-items: center;
  gap: 12px 6px;
  box-sizing: border-box;
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-radius: 32px;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  --composer-line: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px var(--composer-line), 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05);
}
body.figma-chat-page .composer:focus-within { box-shadow: inset 0 0 0 1px var(--composer-line), 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); }
body.figma-chat-page .composer .attachment-picker { grid-area: plus; }
body.figma-chat-page .composer .attach-button { width: 38px; height: 38px; border-radius: 50%; background: url('assets/figma/composer/plus.svg') center / 20px no-repeat; }
body.figma-chat-page .composer .attach-button .ui-icon,
body.figma-chat-page .composer .figma-voice-button .ui-icon,
body.figma-chat-page .composer .send-button .ui-icon { display: none; }
body.figma-chat-page .composer textarea {
  grid-area: text;
  box-sizing: border-box;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  max-height: 128px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dm-ui-text-primary);
  font: 400 16px / 24px var(--dm-ui-font-family);
  resize: none;
}
body.figma-chat-page .composer textarea::placeholder { color: rgba(25, 25, 25, .4); }
body.figma-chat-page .composer .figma-voice-button,
body.figma-chat-page .composer .send-button { grid-area: action; width: 50px; height: 38px; margin-left: 2px; padding: 0; border: 0; border-radius: 100px; }
body.figma-chat-page .composer .figma-voice-button { background: rgba(0, 0, 0, .04) url('assets/figma/composer/mic.svg') center / 20px no-repeat; }
body.figma-chat-page .composer .send-button { background: #191919 url('assets/figma/composer/arrow-up.svg') center / 22px no-repeat; }

/* 두 줄 이상 · 첨부가 있을 때 (Typing2Lines · TypingMaxLines · Media · File) */
body.figma-chat-page .composer.is-multiline {
  grid-template-areas: "text text text" "plus . action";
  grid-template-rows: auto;
  align-content: end;
  align-items: end;
  padding: 12px 10px 10px;
}
body.figma-chat-page .composer:has(.composer-files:not(:empty)) {
  grid-template-areas: "files files files" "text text text" "plus . action";
  grid-template-rows: auto;
  align-content: end;
  align-items: end;
  padding: 16px 10px 10px;
}
/* 높이가 바뀌는 동안(app.js resizeInput): 버튼은 바닥에 붙고 글이 위로 펼쳐진다 */
/* 줄 배치가 바뀌는 순간(한 줄 ↔ 글 위·버튼 아래)엔 글이 상자보다 먼저 자리를 잡으니, 상자가 커지는 동안 글을 서서히 보인다 */
body.figma-chat-page .composer.is-relayout textarea { animation: composer-text-in .16s ease-out both; }
@keyframes composer-text-in { from { opacity: 0; } }
body.figma-chat-page .composer.is-multiline textarea,
body.figma-chat-page .composer:has(.composer-files:not(:empty)) textarea { padding: 0 12px; }

/* 첨부 칩 — Figma file(209:55434) · img(209:55422) */
body.figma-chat-page .composer-files { grid-area: files; display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
body.figma-chat-page .composer-files::-webkit-scrollbar { display: none; }
body.figma-chat-page .composer-files:empty { display: none; }
body.figma-chat-page .composer-files .attach-chip { position: relative; display: flex; flex: none; align-items: center; gap: 4px; box-sizing: border-box; width: 177px; max-width: none; height: 60px; min-height: 0; padding: 0 25px 0 6px; border: 0; border-radius: 16px; background: rgba(0, 0, 0, .04); }
body.figma-chat-page .composer-files .attach-open { display: flex; align-items: center; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
body.figma-chat-page .composer-files .attach-file-icon { width: 32px; height: 32px; flex: none; border: 0; border-radius: 0; background: url('assets/figma/composer/file-pdf.svg') center / 32px no-repeat; }
body.figma-chat-page .composer-files .attach-file-icon::after { content: none; }
body.figma-chat-page .composer-files .attach-chip.is-uploading .attach-file-icon { background-image: url('assets/figma/composer/file-load.svg'); animation: attachment-spin .8s linear infinite; }
body.figma-chat-page .composer-files .attach-detail { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.figma-chat-page .composer-files .attach-name { display: block; max-width: 107px; overflow: hidden; color: var(--dm-ui-text-primary); font-size: 14px; font-weight: 500; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
body.figma-chat-page .composer-files .attach-meta { display: block; max-width: 107px; overflow: hidden; color: #767676; font-size: 12px; font-weight: 400; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
body.figma-chat-page .composer-files .attach-remove { position: absolute; top: 1px; right: 1px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: url('assets/figma/composer/chip-close.svg') center / 24px no-repeat; color: transparent; font-size: 0; }
body.figma-chat-page .composer-files .attach-chip.is-photo { width: 60px; height: 60px; padding: 0; overflow: hidden; border-radius: 16px; }
body.figma-chat-page .composer-files .attach-chip.is-photo .attach-thumb { border-radius: 16px; }
body.figma-chat-page .composer-files .attach-chip.is-photo .attach-remove { z-index: 2; background-image: url('assets/figma/composer/photo-close.svg'); }
body.figma-chat-page .composer-files .attach-chip.is-photo.is-uploading .attach-thumb,
body.figma-chat-page .composer-files .attach-chip.is-photo.is-failed .attach-thumb { filter: none; }
body.figma-chat-page .composer-files .attach-chip.is-photo.is-uploading::before,
body.figma-chat-page .composer-files .attach-chip.is-photo.is-failed::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 16px; background: rgba(0, 0, 0, .3); }
body.figma-chat-page .composer-files .attach-chip.is-photo.is-uploading::after { top: 16px; left: 14px; z-index: 1; width: 32px; height: 32px; margin: 0; border: 0; border-radius: 0; background: url('assets/figma/composer/photo-load.svg') center / 32px no-repeat; }
body.figma-chat-page .composer-files .attach-chip.is-photo.is-failed::after { content: ''; top: 16px; left: 14px; z-index: 1; width: 32px; height: 32px; margin: 0; border-radius: 0; background: url('assets/figma/composer/photo-error.svg') center / 32px no-repeat; }

/* 음성 입력 (Audio Input 175:40662) */
body.figma-chat-page .composer .figma-voice-cancel { display: none; }
body.figma-chat-page .composer.is-listening { grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: "label label label" "cancel wave action"; gap: 8px 6px; padding: 12px 10px 10px; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
body.figma-chat-page .composer.is-listening:not(.is-transcribing) .figma-voice-cancel { grid-area: cancel; display: block; width: 50px; height: 38px; padding: 0; border: 0; border-radius: 100px; background: rgba(0, 0, 0, .04) url('assets/figma/composer/close.svg') center / 20px no-repeat; cursor: pointer; }
body.figma-chat-page .composer.is-transcribing { grid-template-areas: "label label label" "wave wave action"; }
body.figma-chat-page .composer.is-listening .figma-voice-button { margin-left: 0; }
body.figma-chat-page .composer.is-listening .figma-voice-state { display: contents; }
body.figma-chat-page .composer.is-listening .figma-voice-state > span:first-child { grid-area: label; color: rgba(25, 25, 25, .4); font-size: 16px; line-height: 24px; text-align: center; }
/* 이퀄라이저 (Figma 556:98116): 막대 2.2 · 간격 3 · 높이 2~24(Figma 3~20 에서 조정) 은 app.js startWave 가 소리 크기로 정한다. 양 끝 10% 흐림 */
body.figma-chat-page .composer.is-listening .figma-voice-wave { grid-area: wave; position: relative; display: block; min-width: 0; height: 24px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
body.figma-chat-page .composer.is-listening .figma-voice-track { position: absolute; inset: 0; will-change: transform; }
body.figma-chat-page .composer.is-listening .figma-voice-wave i { position: absolute; display: block; width: 2.2px; height: 2px; border-radius: 999px; background: #191919; animation: none; }
body.figma-chat-page .composer.is-listening .figma-voice-button { display: grid; place-items: center; background: #191919; }
body.figma-chat-page .composer.is-listening .figma-voice-button::after { width: 14px; height: 14px; border-radius: 3.5px; background: #fff; }

/* 다크 — Figma Dark mode=True 짝 */
:root[data-dm-theme="dark"] body.figma-chat-page .composer { --composer-line: rgba(46, 46, 46, .3); border: 0; background-color: rgba(32, 32, 32, .7); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer textarea { color: #f2f2f2; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer textarea::placeholder,
:root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening .figma-voice-state > span:first-child { color: rgba(242, 242, 242, .4); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer .attach-button { background-image: url('assets/figma/composer/plus-dark.svg'); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer .figma-voice-button { background: rgba(255, 255, 255, .08) url('assets/figma/composer/mic-dark.svg') center / 20px no-repeat; color: inherit; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer .send-button { background: #f2f2f2 url('assets/figma/composer/arrow-up-dark.svg') center / 22px no-repeat; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening .figma-voice-button { background: #f2f2f2; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening:not(.is-transcribing) .figma-voice-cancel { background: rgba(255, 255, 255, .08) url('assets/figma/composer/close-dark.svg') center / 20px no-repeat; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening .figma-voice-button::after { background: #282828; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening .figma-voice-wave i { background: #f2f2f2; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-chip { background: rgba(255, 255, 255, .08); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-chip.is-photo { background: none; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-name { color: #f2f2f2; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-meta { color: #a6a6a6; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-file-icon { background-image: url('assets/figma/composer/file-pdf-dark.svg'); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-chip.is-uploading .attach-file-icon { background-image: url('assets/figma/composer/file-load-dark.svg'); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-remove { background-image: url('assets/figma/composer/chip-close-dark.svg'); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer-files .attach-chip.is-photo .attach-remove { background-image: url('assets/figma/composer/photo-close-dark.svg'); }

/* 모바일 입력바 — Figma 556:95096 「입력창」: 화면 맨 아래에 떠서 대화가 그 뒤로 흐른다.
   위 10 · 좌우 16 · 아래 12 + 안전영역(홈 인디케이터). 배경은 투명 → #fafafa(입력바 82%), 안전영역은 #fafafa.
   --safe-area-bottom 은 미리보기에서 안전영역을 흉내 낼 때만 쓴다(없으면 기기 값 env). */
@media (max-width: 700px) {
  body.figma-chat-page .chat-box { position: relative; }
  body.figma-chat-page .composer-bar {
    --bar-safe: var(--safe-area-bottom, env(safe-area-inset-bottom, 0px));
    position: absolute;
    z-index: 2;
    right: -16px;
    bottom: 0;
    left: -16px;
    padding: 10px 16px calc(12px + var(--bar-safe));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fafafa calc((100% - var(--bar-safe)) * .82), #fafafa 100%);
    pointer-events: none;
  }
  body.figma-chat-page .composer-bar > * { pointer-events: auto; }
  body.figma-chat-page .chat-box:has(.chat-approvals:empty) .messages { padding-bottom: calc(var(--composer-bar-height, 80px) + 8px); }
  body.figma-chat-page .chat-approvals:not(:empty) { padding-bottom: calc(var(--composer-bar-height, 80px) + 8px); }
  :root[data-dm-theme="dark"] body.figma-chat-page .composer-bar { background: linear-gradient(to bottom, rgba(8, 8, 8, 0) 0, #080808 calc((100% - var(--bar-safe)) * .82), #080808 100%); }
}

/* 채팅 상단바 — Figma 채팅GNB (399:152874, 다크 399:155648) · GNB Btn (399:159903)
   버튼 44 유리 원형(아이콘 24, Figma export), 가운데 상태 알약 118×56 은 버튼보다 7px 아래(중심 y39).
   배경은 흰색이 아래로 사라지는 96px 그라데이션 — 위 18% 는 불투명, 그 아래는 부드러운 곡선(smoothstep)으로 사라져 끊긴 선이 보이지 않게(Figma 80px 직선 마스크에서 조정).
   다크 버튼 테두리: Figma 코드 값은 흰색 80% 지만 렌더에는 거의 보이지 않아 알약과 같은 6% 로 맞춘다. */
@media (max-width: 700px) {
  body.figma-chat-page .danmuji-shell .main-head { position: relative; z-index: 3; height: 64px; padding: 0 16px; background: transparent; overflow: visible; }
  body.figma-chat-page .danmuji-shell .main-head::before { content: ''; position: absolute; inset: 0 0 auto; z-index: -1; height: 96px; background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 18%, rgba(255, 255, 255, 0.972) 26.2%, rgba(255, 255, 255, 0.896) 34.4%, rgba(255, 255, 255, 0.784) 42.6%, rgba(255, 255, 255, 0.648) 50.8%, rgba(255, 255, 255, 0.500) 59.0%, rgba(255, 255, 255, 0.352) 67.2%, rgba(255, 255, 255, 0.216) 75.4%, rgba(255, 255, 255, 0.104) 83.6%, rgba(255, 255, 255, 0.028) 91.8%, rgba(255, 255, 255, 0.000) 100.0%); pointer-events: none; }
  body.figma-chat-page .figma-chat-head { align-items: start; height: 64px; }
  body.figma-chat-page .figma-chat-leading,
  body.figma-chat-page .figma-chat-actions { gap: 8px; margin-top: 10px; }
  body.figma-chat-page .figma-chat-head .figma-close,
  body.figma-chat-page .figma-chat-head .figma-back,
  body.figma-chat-page .figma-chat-head .figma-chat-actions button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7) center / 24px no-repeat;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05);
    color: transparent;
    font-size: 0;
  }
  body.figma-chat-page .figma-chat-head button > * { display: none; }
  /* Figma 채팅GNB 는 닫기 · 메뉴 둘뿐 — 뒤로 · 전화는 이 바에서 숨긴다(마크업과 동작은 그대로) */
  body.figma-chat-page .figma-chat-head .figma-back,
  body.figma-chat-page .figma-chat-head .figma-chat-actions [data-page="calls"] { display: none; }
  body.figma-chat-page .figma-chat-head .figma-chat-leading .figma-close { background-image: url('assets/figma/gnb/close.svg'); }
  body.figma-chat-page .figma-chat-head .figma-chat-leading .figma-back { background-image: url('assets/figma/gnb/back.svg'); }
  body.figma-chat-page .figma-chat-head .figma-chat-actions [data-page="calls"] { background-image: url('assets/figma/gnb/phone.svg'); }
  body.figma-chat-page .figma-chat-head .figma-chat-actions .figma-hamburger { background-image: url('assets/figma/gnb/menu.svg'); }
  body.figma-chat-page .figma-chat-identity {
    box-sizing: border-box;
    width: 118px;
    height: 56px;
    margin-top: 11px;
    padding: 0 0 0 13px;
    gap: 6px;
    justify-content: flex-start;
    border: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(4.915px);
    backdrop-filter: blur(4.915px);
    box-shadow: 0 1.966px 7.863px rgba(0, 0, 0, .1);
    color: #767676;
    font: 500 14px / 24px var(--dm-ui-font-family);
  }
  body.figma-chat-page .figma-chat-identity strong { font-weight: 500; white-space: nowrap; }
  body.figma-chat-page .figma-chat-identity img { width: 38px; height: 38px; }
  body.figma-chat-page .figma-chat-identity:not(.is-thinking) img { content: url('assets/figma/mascot/rest-200.webp'); }

  :root[data-dm-theme="dark"] body.figma-chat-page .danmuji-shell .main-head { background: transparent; }
  :root[data-dm-theme="dark"] body.figma-chat-page .danmuji-shell .main-head::before { background: linear-gradient(to bottom, rgba(8, 8, 8, 1) 0, rgba(8, 8, 8, 1) 18%, rgba(8, 8, 8, 0.972) 26.2%, rgba(8, 8, 8, 0.896) 34.4%, rgba(8, 8, 8, 0.784) 42.6%, rgba(8, 8, 8, 0.648) 50.8%, rgba(8, 8, 8, 0.500) 59.0%, rgba(8, 8, 8, 0.352) 67.2%, rgba(8, 8, 8, 0.216) 75.4%, rgba(8, 8, 8, 0.104) 83.6%, rgba(8, 8, 8, 0.028) 91.8%, rgba(8, 8, 8, 0.000) 100.0%); }
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-head .figma-close,
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-head .figma-back,
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-head .figma-chat-actions button { background-color: rgba(32, 32, 32, .7); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); }
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-head .figma-chat-leading .figma-close { background-image: url('assets/figma/gnb/close-dark.svg'); }
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-head .figma-chat-leading .figma-back { background-image: url('assets/figma/gnb/back-dark.svg'); }
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-head .figma-chat-actions [data-page="calls"] { background-image: url('assets/figma/gnb/phone-dark.svg'); }
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-head .figma-chat-actions .figma-hamburger { background-image: url('assets/figma/gnb/menu-dark.svg'); }
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-identity { border: 0; background: rgba(32, 32, 32, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1.966px 7.863px rgba(0, 0, 0, .1); color: #a6a6a6; }
  :root[data-dm-theme="dark"] body.figma-chat-page .figma-chat-identity:not(.is-thinking) img { content: url('assets/figma/mascot/rest-200.webp'); }
}

/* ── PC 사이드바 — Figma lnb 접힘 399:145648 / 펼침 558:61973 ── */
@media (min-width: 701px) {
  .danmuji-shell.shell { --lnb-width: 50px; grid-template-columns: var(--lnb-width) minmax(0, 1fr); max-width: none; transition: grid-template-columns .28s cubic-bezier(.2, .8, .2, 1); }
  body.figma-lnb-open .danmuji-shell.shell { --lnb-width: 290px; }
  .danmuji-shell .rail.figma-lnb { display: flex; flex-direction: column; justify-content: space-between; gap: 0; width: var(--lnb-width); min-width: 0; height: 100vh; height: 100dvh; padding: 0 0 24px; overflow: hidden; border: 0; background: transparent; box-shadow: inset -1px 0 0 #f0f0f0; transition: width .28s cubic-bezier(.2, .8, .2, 1), background-color .28s; }
  body.figma-lnb-open .danmuji-shell .rail.figma-lnb { padding-right: 1px; background: #fff; }
  .figma-lnb button { border: 0; background: none; color: #191919; cursor: pointer; }
  .figma-lnb-menu { display: flex; flex-direction: column; gap: 8px; }
  .figma-lnb-logo { position: relative; height: 57px; }
  .figma-lnb-brand { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; width: 100px; height: 25px; padding: 0; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
  .figma-lnb-brand img { display: block; width: 80px; height: 14.511px; }
  .figma-lnb-toggle { position: absolute; top: 12.5px; left: 9px; width: 32px; height: 32px; padding: 0; border-radius: 8px; background: url('assets/figma/lnb/toggle-folded.svg') center / 20px 20px no-repeat !important; }
  body.figma-lnb-open .figma-lnb-brand { opacity: 1; visibility: visible; }
  body.figma-lnb-open .figma-lnb-toggle { top: 12.5px; left: 247px; width: 32px; height: 32px; border-radius: 8px; background: url('assets/figma/lnb/toggle-expanded.svg') center / 20px 20px no-repeat !important; }
  .figma-lnb-list { display: flex; flex-direction: column; }
  .figma-lnb-list button, .figma-lnb-profile { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 0 0 15px; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1.54; text-align: left; }
  body.figma-lnb-open .figma-lnb-list button { padding-left: 16px; }
  .figma-lnb-list i { flex: none; width: 20px; height: 20px; background: center / 20px 20px no-repeat; }
  .figma-lnb-tasks i { background-image: url('assets/figma/lnb/activity.svg'); }
  .figma-lnb-connections i { background-image: url('assets/figma/lnb/connections.svg'); }   /* 앱 및 서비스 연결 — Grid02 (Figma 1142:59652) */
  .figma-lnb-settings i { background-image: url('assets/figma/lnb/setting.svg'); }
  .figma-lnb-list span, .figma-lnb-profile span { opacity: 0; transition: opacity .2s; }
  body.figma-lnb-open .figma-lnb-list span, body.figma-lnb-open .figma-lnb-profile span { opacity: 1; }
  .figma-lnb-foot { display: flex; flex-direction: column; gap: 24px; }
  .figma-lnb-usage { display: none; }
  body.figma-lnb-open .figma-lnb-usage:not([hidden]) { display: flex; }
  .figma-lnb-usage { flex-direction: column; gap: 14px; width: 257px; margin: 0 16px; padding: 20px 20px 22px !important; border-radius: 24px; background: rgba(255, 255, 255, .5) !important; box-shadow: 0 0 2px rgba(0, 0, 0, .06); text-align: left; }
  .figma-lnb-usage-head { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 14px; line-height: 17px; white-space: nowrap; }
  .figma-lnb-usage-head > span { color: #000; opacity: .7; }
  .figma-lnb-usage-head strong { display: flex; align-items: center; gap: 4px; color: #191919; font-weight: 600; }
  .figma-lnb-usage-head i { width: 14px; height: 14px; background: url('assets/figma/icons/usage-arrow.svg') center / 14px 14px no-repeat; opacity: .5; }
  .figma-lnb-usage-track { position: relative; display: block; width: 100%; height: 6px; border-radius: 100px; background: rgba(0, 0, 0, .08); }
  .figma-lnb-usage-track span { position: absolute; inset: 0 auto 0 0; border-radius: 100px; background: #191919; }
  .figma-lnb-profile { height: 24px; padding-left: 13px; }
  body.figma-lnb-open .figma-lnb-profile { padding-left: 16px; }
  .figma-lnb-profile .figma-lnb-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
  /* 사진 없는 회원: 닉네임 첫 글자 원(TASK-419). 다른 사람 얼굴인 시안 사진을 대신 띄우지 않는다. */
  .figma-lnb-profile .figma-lnb-avatar.is-initial { display: grid; place-items: center; background: var(--dm-ui-menu-rail-usage-track); color: var(--dm-ui-menu-rail-ink); font-size: 11px; font-weight: 600; line-height: 1; opacity: 1; }

  /* 채팅 상단 — Figma GNB 399:145642: 흰색→투명 100px, 버튼 위 28 · 상태 알약 위 21, 가운데 전화·상태·예약 */
  .danmuji-shell .main.main-chat { position: relative; padding: 0; }
  .danmuji-shell .main-chat .main-head { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: block; max-width: none; height: 100px; margin: 0; padding: 0; border: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0.972) 20.8%, rgba(255, 255, 255, 0.896) 29.6%, rgba(255, 255, 255, 0.784) 38.4%, rgba(255, 255, 255, 0.648) 47.2%, rgba(255, 255, 255, 0.500) 56.0%, rgba(255, 255, 255, 0.352) 64.8%, rgba(255, 255, 255, 0.216) 73.6%, rgba(255, 255, 255, 0.104) 82.4%, rgba(255, 255, 255, 0.028) 91.2%, rgba(255, 255, 255, 0.000) 100.0%); pointer-events: none; }
  .danmuji-shell .main-chat .main-head > :not(.figma-desktop-chat-head) { display: none; }
  .figma-desktop-chat-head { position: absolute; top: 21px; left: 50%; display: flex; align-items: center; gap: 16px; transform: translateX(-50%); pointer-events: auto; }
  .figma-desktop-chat-head button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 32px; background: rgba(255, 255, 255, .7) center / 24px 24px no-repeat; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); cursor: pointer; }
  .figma-desktop-chat-head .figma-gnb-call { background-image: url('assets/figma/icons/phone.svg'); }
  .figma-desktop-chat-head .figma-gnb-reservation { background-image: url('assets/figma/icons/reservation.svg'); }
  .figma-desktop-chat-status { display: flex; align-items: center; gap: 6px; box-sizing: border-box; width: 120px; height: 58px; padding: 0 18px 0 14px; border: 1px solid rgba(0, 0, 0, .03); border-radius: 30px; background: rgba(255, 255, 255, .7) padding-box; backdrop-filter: blur(4.915px); -webkit-backdrop-filter: blur(4.915px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1.966px 7.863px -1px rgba(0, 0, 0, .1); color: #767676; font-size: 14px; font-weight: 500; line-height: 24px; white-space: nowrap; }
  .figma-desktop-chat-status img { flex: none; width: 38px; height: 38px; object-fit: contain; }
  .figma-desktop-chat-status:not(.is-thinking) img { content: url('assets/figma/mascot/rest-200.webp'); }
  .figma-desktop-chat-status strong { font-weight: 500; }

  /* 대화 칸·입력창 — 본문 가운데 700px, 입력창 아래 40px */
  .danmuji-shell .main-chat .main-content { height: 100dvh; padding: 0; }
  .danmuji-shell .main-chat .chat-layout { width: 700px; max-width: calc(100% - 32px); height: 100dvh; min-height: 0; margin: 0 auto; padding: 0 0 40px; }
  body.figma-chat-page .danmuji-shell .main-chat .chat-toolbar { display: none; }
  .danmuji-shell .main-chat .messages { min-height: 0; max-height: none; padding-top: 96px; padding-inline: 0; }   /* 상단 네비(아래 끝 79) 와 첫 피드 글자 사이 보이는 간격 약 28 — 120 에서 줄임 */
  .danmuji-shell .main-chat .composer-bar { width: 100%; }  /* 아래 「PC 입력바」 블록이 덮어쓴다 */
  body.figma-chat-page .danmuji-shell .main-chat .composer { width: 100%; margin: 0; }
}

@media (min-width: 701px) {
  :root[data-dm-theme="dark"] body.figma-lnb-open .danmuji-shell .rail.figma-lnb { background: #202020; }
  :root[data-dm-theme="dark"] .danmuji-shell .rail.figma-lnb { background: transparent; box-shadow: inset -1px 0 0 #1f1f1f; }
  :root[data-dm-theme="dark"] .figma-lnb button { color: #f2f2f2; }
  :root[data-dm-theme="dark"] .figma-lnb-brand img { content: url('assets/figma/lnb/danmuzi-dark.svg'); }
  :root[data-dm-theme="dark"] .figma-lnb-toggle { background: url('assets/figma/lnb/toggle-folded-dark.svg') center / 20px 20px no-repeat !important; }
  :root[data-dm-theme="dark"] body.figma-lnb-open .figma-lnb-toggle { background: url('assets/figma/lnb/toggle-expanded-dark.svg') center / 20px 20px no-repeat !important; }
  :root[data-dm-theme="dark"] .figma-lnb-tasks i { background-image: url('assets/figma/lnb/activity-dark.svg'); }
  :root[data-dm-theme="dark"] .figma-lnb-connections i { background-image: url('assets/figma/lnb/connections-dark.svg'); }
  :root[data-dm-theme="dark"] .figma-lnb-settings i { background-image: url('assets/figma/lnb/setting-dark.svg'); }
  :root[data-dm-theme="dark"] .figma-lnb-usage { background: rgba(255, 255, 255, .04) !important; }
  :root[data-dm-theme="dark"] .figma-lnb-usage-head > span { color: #fff; }
  :root[data-dm-theme="dark"] .figma-lnb-usage-head strong { color: #f2f2f2; }
  :root[data-dm-theme="dark"] .figma-lnb-usage-head i { background-image: url('assets/figma/icons/usage-arrow-dark.svg'); }
  :root[data-dm-theme="dark"] .figma-lnb-usage-track { background: rgba(255, 255, 255, .1); }
  :root[data-dm-theme="dark"] .figma-lnb-usage-track span { background: #f2f2f2; }
  :root[data-dm-theme="dark"] .danmuji-shell .main-chat .main-head { background: linear-gradient(to bottom, rgba(8, 8, 8, 1) 0, rgba(8, 8, 8, 1) 12%, rgba(8, 8, 8, 0.972) 20.8%, rgba(8, 8, 8, 0.896) 29.6%, rgba(8, 8, 8, 0.784) 38.4%, rgba(8, 8, 8, 0.648) 47.2%, rgba(8, 8, 8, 0.500) 56.0%, rgba(8, 8, 8, 0.352) 64.8%, rgba(8, 8, 8, 0.216) 73.6%, rgba(8, 8, 8, 0.104) 82.4%, rgba(8, 8, 8, 0.028) 91.2%, rgba(8, 8, 8, 0.000) 100.0%); }
  :root[data-dm-theme="dark"] .figma-desktop-chat-head button { background-color: rgba(32, 32, 32, .7); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); }
  :root[data-dm-theme="dark"] .figma-desktop-chat-head .figma-gnb-call { background-image: url('assets/figma/icons/phone-dark.svg'); }
  :root[data-dm-theme="dark"] .figma-desktop-chat-head .figma-gnb-reservation { background-image: url('assets/figma/icons/reservation-dark.svg'); }
  :root[data-dm-theme="dark"] .figma-desktop-chat-status { border-color: rgba(255, 255, 255, .06); background-color: rgba(32, 32, 32, .7); color: #a6a6a6; }
  :root[data-dm-theme="dark"] .figma-desktop-chat-status:not(.is-thinking) img { content: url('assets/figma/mascot/rest-200.webp'); }
}
@media (prefers-reduced-motion: reduce) { .danmuji-shell.shell, .danmuji-shell .rail.figma-lnb { transition: none; } }

/* ── 입력창 버튼 Hover/Pressed — Figma Button/Input 175:40032 ──
   Plus: 투명 → 4% 원 · Mic/Close: 4% 위에 4% 한 겹 더 · Send/Stop: #191919 → #424242 (다크 #f2f2f2 → #dfdfdf) */
body.figma-chat-page .composer .attach-button,
body.figma-chat-page .composer .figma-voice-button,
body.figma-chat-page .composer .figma-voice-cancel,
body.figma-chat-page .composer .send-button { transition: background-color .12s ease; }
@media (hover: hover) {
  body.figma-chat-page .composer .attach-button:hover { background-color: rgba(0, 0, 0, .04); }
  body.figma-chat-page .composer:not(.is-listening) .figma-voice-button:hover { background-image: url('assets/figma/composer/mic.svg'), linear-gradient(rgba(0, 0, 0, .04), rgba(0, 0, 0, .04)); background-size: 20px, auto; }
  body.figma-chat-page .composer.is-listening:not(.is-transcribing) .figma-voice-cancel:hover { background-image: url('assets/figma/composer/close.svg'), linear-gradient(rgba(0, 0, 0, .04), rgba(0, 0, 0, .04)); background-size: 20px, auto; }
  body.figma-chat-page .composer .send-button:hover, body.figma-chat-page .composer.is-listening .figma-voice-button:hover { background-color: #424242; }
  :root[data-dm-theme="dark"] body.figma-chat-page .composer .attach-button:hover { background-color: rgba(255, 255, 255, .08); }
  :root[data-dm-theme="dark"] body.figma-chat-page .composer:not(.is-listening) .figma-voice-button:hover { background-image: url('assets/figma/composer/mic-dark.svg'), linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)); }
  :root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening:not(.is-transcribing) .figma-voice-cancel:hover { background-image: url('assets/figma/composer/close-dark.svg'), linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)); }
  :root[data-dm-theme="dark"] body.figma-chat-page .composer .send-button:hover, :root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening .figma-voice-button:hover { background-color: #dfdfdf; }
}
body.figma-chat-page .composer .attach-button:active { background-color: rgba(0, 0, 0, .04); }
body.figma-chat-page .composer:not(.is-listening) .figma-voice-button:active { background-image: url('assets/figma/composer/mic.svg'), linear-gradient(rgba(0, 0, 0, .04), rgba(0, 0, 0, .04)); background-size: 20px, auto; }
body.figma-chat-page .composer.is-listening:not(.is-transcribing) .figma-voice-cancel:active { background-image: url('assets/figma/composer/close.svg'), linear-gradient(rgba(0, 0, 0, .04), rgba(0, 0, 0, .04)); background-size: 20px, auto; }
body.figma-chat-page .composer .send-button:active, body.figma-chat-page .composer.is-listening .figma-voice-button:active { background-color: #424242; }
:root[data-dm-theme="dark"] body.figma-chat-page .composer .attach-button:active { background-color: rgba(255, 255, 255, .08); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer:not(.is-listening) .figma-voice-button:active { background-image: url('assets/figma/composer/mic-dark.svg'), linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening:not(.is-transcribing) .figma-voice-cancel:active { background-image: url('assets/figma/composer/close-dark.svg'), linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)); }
:root[data-dm-theme="dark"] body.figma-chat-page .composer .send-button:active, :root[data-dm-theme="dark"] body.figma-chat-page .composer.is-listening .figma-voice-button:active { background-color: #dfdfdf; }

/* ── 채팅 말풍선·답변 마크다운·피드 — Figma Chat 556:99359 (규칙: project-docs design/tokens DP-002) ── */
body.figma-chat-page {
  --chat-me-max: 280px; --chat-ai-max: 330px; --chat-wide-max: 330px; --chat-widget-max: 330px; --chat-media-max: 330px; --chat-turn-gap: 16px;
  --chat-me-bg: #fff3c1; --chat-me-ink: #191919;
  --chat-ai-bg: #f7f7f7; --chat-ink: #191919; --chat-ink-2: #424242; --chat-muted: #767676; --chat-feed-ink: #2e2e2e;
  --chat-card-bg: #fff; --chat-card-line: #f5f5f5; --chat-th-line: #ccc; --chat-td-line: #ebebeb;
  --chat-quote-bar: rgba(0, 0, 0, .12); --chat-scroll: rgba(0, 0, 0, .14); --chat-code-bg: rgba(0, 0, 0, .04);
}
/* PC 너비 — 본문·입력창 700px. 내 말풍선·답변·표·코드·위젯·이미지 모두 최대 480 */
@media (min-width: 701px) { body.figma-chat-page { --chat-me-max: 480px; --chat-ai-max: 480px; --chat-wide-max: 480px; --chat-widget-max: 480px; --chat-media-max: 480px; --chat-turn-gap: 24px; } }
:root[data-dm-theme="dark"] body.figma-chat-page {
  --chat-ai-bg: #151515; --chat-ink: #f2f2f2; --chat-ink-2: #dfdfdf; --chat-muted: #a6a6a6; --chat-feed-ink: #eeeeee;
  --chat-card-bg: #080808; --chat-card-line: #1a1a1a; --chat-th-line: #5d5d5d;
  --chat-quote-bar: rgba(255, 255, 255, .16); --chat-scroll: rgba(255, 255, 255, .22); --chat-code-bg: rgba(255, 255, 255, .08);
}

/* 간격: 같은 사람 8px, 사람이 바뀌면 16px(PC 24px), 피드 위아래 16px */
body.figma-chat-page .messages { gap: 0; }
body.figma-chat-page .messages > * { margin: 0; }
body.figma-chat-page .messages > * + * { margin-top: var(--chat-turn-gap); }
body.figma-chat-page .messages > .user-message + .user-message,
body.figma-chat-page .messages > .assistant-message + .assistant-message { margin-top: 8px; }
body.figma-chat-page .messages > .chat-feed, body.figma-chat-page .messages > .chat-feed + * { margin-top: 16px; }
body.figma-chat-page .messages > .chat-feed:first-child { margin-top: 0; }
body.figma-chat-page .message { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; }
body.figma-chat-page .message.user-message { align-self: stretch; align-items: flex-end; }
body.figma-chat-page .message > .mascot { display: none; }
body.figma-chat-page .message-stack { gap: 8px; }
body.figma-chat-page .user-message .message-stack { align-items: flex-end; }

/* 내 글 말풍선 */
body.figma-chat-page .messages .bubble.user {
  box-sizing: border-box; min-width: 50px; max-width: var(--chat-me-max); margin: 0; padding: 12px 16px; border-radius: 24px;
  background: var(--chat-me-bg); color: var(--chat-me-ink); font-size: 16px; font-weight: 400; line-height: 1.54; white-space: pre-wrap; overflow-wrap: anywhere;
}
/* 내 파일 말풍선: 파일 하나에 하나 */
body.figma-chat-page .messages .bubble.file-bubble { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 16px 12px 12px; border-radius: 20px; text-decoration: none; white-space: normal; }
body.figma-chat-page .file-tile { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #fff center 2px / 36px 36px no-repeat; }
body.figma-chat-page .file-pdf { background-image: url('assets/figma/bubble/file-pdf.svg'); }
body.figma-chat-page .file-ppt { background-image: url('assets/figma/bubble/file-ppt.svg'); }
body.figma-chat-page .file-docs { background-image: url('assets/figma/bubble/file-docs.svg'); }
body.figma-chat-page .file-sheet { background-image: url('assets/figma/bubble/file-sheet.svg'); }
body.figma-chat-page .file-etc { background-image: url('assets/figma/bubble/file-etc.svg'); }
body.figma-chat-page .file-text { display: flex; flex-direction: column; width: 157px; font-size: 14px; }
body.figma-chat-page .file-text strong { overflow: hidden; color: #191919; font-weight: 600; line-height: 1.54; text-overflow: ellipsis; white-space: nowrap; }
body.figma-chat-page .file-text small { color: #000; font-size: 14px; line-height: 1.32; opacity: .5; }
/* 내 사진 묶음 — Figma 1008:37383, 반경은 말풍선 24px */
body.figma-chat-page .photo-bundle { display: grid; gap: 1px; overflow: hidden; border-radius: 24px; }
body.figma-chat-page .photo-tile { position: relative; display: block; min-width: 0; overflow: hidden; }
body.figma-chat-page .photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.figma-chat-page .photo-tile.is-failed img { filter: brightness(.65); }
body.figma-chat-page .photos-1 { grid-template-columns: 160px; grid-template-rows: 160px; }
body.figma-chat-page .photos-2 { gap: 2px; grid-template-columns: 129px 129px; grid-template-rows: 129px; }
body.figma-chat-page .photos-3, body.figma-chat-page .photos-4 { grid-template-columns: 130px 130px; grid-template-rows: 130px 130px; }
body.figma-chat-page .photos-3 .photo-tile:first-child { grid-column: 1 / span 2; }
body.figma-chat-page .photos-rows { display: flex; flex-direction: column; width: 260px; }
body.figma-chat-page .photo-row { display: flex; gap: 1px; height: 85px; }
body.figma-chat-page .photo-row-2 { height: 84px; }
body.figma-chat-page .photo-row .photo-tile { flex: 1 1 0; }

/* 단무지 답변 말풍선 */
body.figma-chat-page .messages .bubble.assistant, body.figma-chat-page .figma-chat-intro > .bubble {
  box-sizing: border-box; max-width: var(--chat-ai-max); margin: 0; padding: 12px 16px; border: 0; border-radius: 24px;
  background: var(--chat-ai-bg); color: var(--chat-ink); font-size: 16px; font-weight: 400; line-height: 1.6; white-space: normal; overflow-wrap: anywhere;
}
/* 표·코드 말풍선 */
body.figma-chat-page .messages .bubble.md-table-bubble, body.figma-chat-page .messages .bubble.md-code-bubble {
  width: min(100%, var(--chat-ai-max)); padding: 10px 16px; border: 4px solid var(--chat-card-line); background: var(--chat-card-bg); overflow: hidden;
}
/* PC: 표·코드는 답변과 같은 480 (--chat-wide-max 로 따로 둠: 나중에 넓힐 때 이 값만 바꾸면 된다). 넘치면 안에서 가로 스크롤.
   감싸는 칸들이 내용 너비로 줄어드는 구조라 최소값은 % 가 아니라 고정값으로 준다 */
@media (min-width: 701px) {
  body.figma-chat-page .messages .bubble.md-table-bubble, body.figma-chat-page .messages .bubble.md-code-bubble { width: max-content; min-width: var(--chat-ai-max); max-width: min(100%, var(--chat-wide-max)); }
}
body.figma-chat-page .md-image-bubble { width: min(100%, var(--chat-media-max)); }
body.figma-chat-page .md-image { display: block; width: 100%; aspect-ratio: 1; border-radius: 24px; object-fit: cover; }

/* 답변 마크다운 */
body.figma-chat-page .bubble.markdown > * { margin: 0; }
body.figma-chat-page .messages .bubble.markdown > * + * { margin-top: 12px; }
body.figma-chat-page .bubble.markdown strong { font-weight: 700; }
body.figma-chat-page .bubble.markdown del { text-decoration: line-through; }
body.figma-chat-page .bubble.markdown a { color: inherit; text-decoration: underline dotted; text-decoration-skip-ink: none; text-underline-position: from-font; }
body.figma-chat-page .bubble.markdown ul, body.figma-chat-page .bubble.markdown ol { display: flex; flex-direction: column; padding: 0; list-style: none; }
body.figma-chat-page .bubble.markdown ul { gap: 12px; }
body.figma-chat-page .bubble.markdown ol { gap: 8px; padding-left: 24px; list-style: decimal outside; }
body.figma-chat-page .bubble.markdown li { position: relative; margin: 0; }
body.figma-chat-page .bubble.markdown ul > li { padding-left: 14px; }
body.figma-chat-page .bubble.markdown ul > li::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 26px; background: url('assets/figma/markdown/dot.svg') no-repeat; }
body.figma-chat-page .bubble.markdown li > .md-li { display: block; }
/* 중첩: 상위 항목은 행간 1.54, 하위와 4px. 글머리 아래 번호는 10+24px, 번호 아래 글머리는 10px 들여 점 */
body.figma-chat-page .bubble.markdown li:has(> ul, > ol) > .md-li { line-height: 1.54; }
body.figma-chat-page .bubble.markdown li > ul, body.figma-chat-page .bubble.markdown li > ol { gap: 4px; margin: 4px 0 0; }
/* 글머리 아래 번호 항목은 Figma에서 27px 칸(점 자리)에 맞춰 한 줄이 27px */
body.figma-chat-page .bubble.markdown ul > li > ol > li { padding-block: .7px; }
body.figma-chat-page .bubble.markdown ul > li > ol { padding-left: 20px; }
body.figma-chat-page .bubble.markdown ol > li > ul > li { padding-left: 0; }
body.figma-chat-page .bubble.markdown ol > li > ul > li::before { left: -14px; }
/* 인용문 */
body.figma-chat-page .bubble.markdown blockquote { display: flex; gap: 12px; padding: 0; border: 0; color: inherit; line-height: 1.68; }
body.figma-chat-page .bubble.markdown blockquote::before { content: ''; flex: none; width: 3px; border-radius: 999px; background: var(--chat-quote-bar); }
/* 시안 없는 요소(파생): 제목은 글머리 상위 항목처럼 Bold 16px 행간 1.54, 가로선은 표 칸 선, 인라인 코드는 SF Mono 14px 연한 바탕 */
body.figma-chat-page .bubble.markdown :is(h1, h2, h3, h4) { color: inherit; font-size: 16px; font-weight: 700; line-height: 1.54; }
body.figma-chat-page .bubble.markdown hr { height: 1px; border: 0; background: var(--chat-td-line); }
body.figma-chat-page .bubble.markdown :not(pre) > code { padding: 1px 4px; border-radius: 4px; background: var(--chat-code-bg); font: 500 14px/1 'SF Mono', ui-monospace, Menlo, monospace; }
/* Pretendard에는 기울임 글꼴이 없고 앱 전체가 font-synthesis: none 이라, 기울임만 브라우저가 기울여 그리게 연다 */
body.figma-chat-page .bubble.markdown em { font-style: italic; font-synthesis: style; }
/* 표 */
body.figma-chat-page .bubble.markdown .md-table { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--chat-scroll) transparent; }
body.figma-chat-page .bubble.markdown table { width: max-content; border-collapse: collapse; font-size: 14px; line-height: 1.54; }
body.figma-chat-page .bubble.markdown th, body.figma-chat-page .bubble.markdown td { min-width: 54px; max-width: 270px; padding: 12px 30px 12px 0; border: 0; text-align: left; vertical-align: top; }
body.figma-chat-page .bubble.markdown th { border-bottom: 1px solid var(--chat-th-line); color: var(--chat-ink); font-weight: 700; }
body.figma-chat-page .bubble.markdown td { border-bottom: 1px solid var(--chat-td-line); color: var(--chat-ink-2); font-weight: 400; }
body.figma-chat-page .bubble.markdown tbody tr:last-child td { border-bottom: 0; }
/* PC: 표는 말풍선 너비를 꽉 채우고, 칸 글 최대 270 → 480. 짧은 내용은 한 줄로, 아주 긴 내용만 줄바꿈 */
@media (min-width: 701px) {
  body.figma-chat-page .bubble.markdown table { min-width: 100%; }
  body.figma-chat-page .bubble.markdown th, body.figma-chat-page .bubble.markdown td { max-width: 480px; }
}
/* 코드 블록 */
body.figma-chat-page .bubble.markdown pre { margin: 0; padding: 4px 0 16px; overflow-x: auto; border: 0; border-radius: 0; background: none; scrollbar-width: thin; scrollbar-color: var(--chat-scroll) transparent; }
body.figma-chat-page .bubble.markdown pre code { display: block; padding: 0; background: none; color: var(--chat-ink); font: 500 13px/1.33 'SF Mono', ui-monospace, Menlo, monospace; white-space: pre; }
body.figma-chat-page .bubble.markdown .md-code-line { display: block; }
body.figma-chat-page .bubble.markdown .md-code-line + .md-code-line { margin-top: 10px; }
body.figma-chat-page .bubble.markdown :is(.md-table, pre)::-webkit-scrollbar { height: 5px; }
body.figma-chat-page .bubble.markdown :is(.md-table, pre)::-webkit-scrollbar-thumb { border-radius: 100px; background: var(--chat-scroll); }
:root[data-dm-theme="dark"] body.figma-chat-page .bubble.markdown ul > li::before { background-image: url('assets/figma/markdown/dot-dark.svg'); }

/* 피드 — Figma Feed 399:158899 */
body.figma-chat-page .chat-feed { display: flex; flex-direction: column; align-items: center; align-self: stretch; padding: 8px 16px; color: var(--chat-muted); font-size: 12px; line-height: 1.54; text-align: center; }
body.figma-chat-page .chat-feed.feed-date { font-size: 13px; }
body.figma-chat-page .chat-feed .link-button { padding: 0; border: 0; background: none; color: #767676; font-size: 12px; line-height: 1.54; text-decoration: underline; cursor: pointer; }
body.figma-chat-page .chat-feed.history-fold { gap: 6px; }
body.figma-chat-page .chat-feed.history-fold > span { display: flex; align-items: center; gap: 16px; width: 100%; line-height: 1.52; white-space: nowrap; }
body.figma-chat-page .chat-feed.history-fold > span::before, body.figma-chat-page .chat-feed.history-fold > span::after { content: ''; flex: 1; height: 1px; background: url('assets/figma/bubble/feed-line.svg') left center / 2px 1px repeat-x; }
:root[data-dm-theme="dark"] body.figma-chat-page .chat-feed.history-fold > span::before, :root[data-dm-theme="dark"] body.figma-chat-page .chat-feed.history-fold > span::after { background-image: url('assets/figma/bubble/feed-line-dark.svg'); }
/* 글머리 상위 항목: Figma는 26px 칸(점 높이) 아래쪽에 글자를 놓는다 — 첫 줄 위 4px + 행간 22px 로 같은 자리 */
body.figma-chat-page .bubble.markdown ul > li:has(> ol, > ul) > .md-li { padding-top: 3px; padding-bottom: 1px; line-height: 22px; }
body.figma-chat-page .bubble.markdown ol > li:has(> ol, > ul) > .md-li { padding-block: .68px; }
/* 하위 목록을 가진 번호 목록은 묶음 사이 12px (Figma 불렛+넘버링), 단순 번호 목록만 8px */
body.figma-chat-page .bubble.markdown ol:has(> li > ul, > li > ol) { gap: 12px; }
/* 번호 목록: 항목 글이 굵게(**…**)로 시작하면 번호도 굵게 */
body.figma-chat-page .bubble.markdown ol > li.md-li-strong::marker { font-weight: 700; }

/* ── PC 입력바·대화 칸 — Figma PC_채팅 399:145235 (입력 영역 501:177003, 다크 501:178921) ──
   입력바는 본문 전체 너비에 걸쳐 위 투명 → 82% 지점 흰색(다크 #080808) 그라디언트, 아래 20px(높이 78, Figma 16 에서 조정). 입력창은 가운데 최대 700px.
   대화는 입력바 뒤까지 이어지고, 마지막 말풍선은 입력바 높이만큼 비켜 선다. 피드 앞뒤는 24px(PC). */
@media (min-width: 701px) {
  /* 스크롤은 본문 맨 오른쪽 끝에서 — 대화 칸을 본문 전체 너비로 넓히고, 말풍선 칸(가운데 700px)은 안쪽 여백으로 만든다 */
  .danmuji-shell .main-chat .main-content { width: 100%; max-width: none; margin: 0; }
  .danmuji-shell .main-chat .chat-layout { width: 100%; max-width: none; margin: 0; padding-bottom: 0; }
  .danmuji-shell .main-chat .messages, .danmuji-shell .main-chat .chat-approvals { padding-inline: max(16px, calc((100% - 700px) / 2)); }
  .danmuji-shell .main-chat .chat-box { position: static; }
  .danmuji-shell .main-chat .composer-bar {
    position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; width: auto;
    padding: 0 16px 20px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 82%); pointer-events: none;
  }
  .danmuji-shell .main-chat .composer-bar > * { pointer-events: auto; }
  body.figma-chat-page .danmuji-shell .main-chat .composer { width: 100%; max-width: 700px; }
  /* 마지막 답변과 입력창 사이 24 (말하는 사람이 바뀔 때 간격과 같게, 8 에서 넓힘) */
  .danmuji-shell .main-chat .chat-box:has(.chat-approvals:empty) .messages { padding-bottom: calc(var(--composer-bar-height, 78px) + 24px); }
  .danmuji-shell .main-chat .chat-approvals:not(:empty) { padding-bottom: calc(var(--composer-bar-height, 78px) + 24px); }
  body.figma-chat-page .messages > .chat-feed, body.figma-chat-page .messages > .chat-feed + * { margin-top: 24px; }
  body.figma-chat-page .messages > .chat-feed:first-child { margin-top: 0; }
  :root[data-dm-theme="dark"] .danmuji-shell .main-chat .composer-bar { background: linear-gradient(to bottom, rgba(8, 8, 8, 0) 0, #080808 82%); }
}

/* 모바일 상단바는 대화 위에 떠 있어야 그라디언트(흰색 → 투명 80px) 뒤로 말풍선이 지나간다 — Figma 채팅GNB 399:152874.
   대화는 화면 맨 위부터 시작하고, 첫 말풍선은 상단바 그라디언트 끝(80px) 아래에서 시작한다. */
@media (max-width: 700px) {
  body.figma-chat-page .danmuji-shell .main.main-chat { position: relative; }
  body.figma-chat-page .danmuji-shell .main-chat .main-head { position: absolute; top: 0; right: 0; left: 0; }
  body.figma-chat-page .chat-layout { height: 100dvh; }
  body.figma-chat-page .messages { padding-top: 80px; }
}
/* 다크에서도 내 말풍선은 #FFF3C1 · #191919 (Figma 질문 말풍선 다크 379:23321) — 예전 카카오 노랑 규칙을 덮는다 */
:root[data-dm-theme="dark"] body.figma-chat-page .messages .bubble.user { background: var(--chat-me-bg); color: var(--chat-me-ink); }

/* PC 사이드바 메뉴 — Figma 558:60693(접힘) · 558:61979(펼침 목록). 채팅이 첫 메뉴이자 기본 화면.
   선택·hover 는 같은 모양: 접힘은 36×28 상자, 펼침은 좌우 8·위아래 1 안쪽 상자, 반경 8, 검정 4%(다크 흰색 8%). */
@media (min-width: 701px) {
  .figma-lnb-chat i { background-image: url('assets/figma/lnb/chat.svg'); }
  .figma-lnb-list button { position: relative; isolation: isolate; padding-left: 15px; }
  body.figma-lnb-open .figma-lnb-list button { padding-left: 18px; }
  .figma-lnb-list button::before { content: ''; position: absolute; z-index: -1; inset: 5px 7px; border-radius: 8px; background: transparent; transition: inset .28s cubic-bezier(.2, .8, .2, 1), background-color .15s; }
  body.figma-lnb-open .figma-lnb-list button::before { inset: 1px 8px; }
  /* 펼침 목록(558:61979): 줄마다 위아래 1px, 채팅 38 · 나머지 39 */
  body.figma-lnb-open .figma-lnb-list button:not(.figma-lnb-chat) { height: 39px; }
  .figma-lnb-list button.active::before { background: rgba(0, 0, 0, .04); }
  .figma-lnb-toggle { transition: background-color .15s; }
  @media (hover: hover) {
    .figma-lnb-list button:hover::before, .figma-lnb-toggle:hover, body.figma-lnb-open .figma-lnb-toggle:hover { background-color: rgba(0, 0, 0, .04) !important; }
  }
  .figma-lnb-list button:active::before { background: rgba(0, 0, 0, .04); }
  :root[data-dm-theme="dark"] .figma-lnb-chat i { background-image: url('assets/figma/lnb/chat-dark.svg'); }
  :root[data-dm-theme="dark"] .figma-lnb-list button.active::before, :root[data-dm-theme="dark"] .figma-lnb-list button:active::before { background: rgba(255, 255, 255, .08); }
  @media (hover: hover) {
    :root[data-dm-theme="dark"] .figma-lnb-list button:hover::before, :root[data-dm-theme="dark"] .figma-lnb-toggle:hover, :root[data-dm-theme="dark"] body.figma-lnb-open .figma-lnb-toggle:hover { background-color: rgba(255, 255, 255, .08) !important; }
  }
}

/* 스크롤 막대 — gray200a(검정 14% / 다크 흰색 22%). 대화 목록·표·코드 공통 */
body.figma-chat-page .messages { scrollbar-color: var(--chat-scroll) transparent; }

/* 사이드바 열고 닫기 — 폭(.28s)과 같은 곡선으로 안쪽 값도 같이 움직여서 첫 프레임에 툭 튀지 않게.
   접기 버튼은 옆으로 미끄러지고, 줄 높이·여백·카드는 순간 전환 대신 함께 변한다. */
@media (min-width: 701px) {
  .figma-lnb-toggle { transition: left .28s cubic-bezier(.2, .8, .2, 1), top .28s cubic-bezier(.2, .8, .2, 1), background-color .15s; }
  .figma-lnb-list button { transition: height .28s cubic-bezier(.2, .8, .2, 1), padding-left .28s cubic-bezier(.2, .8, .2, 1); }
  .figma-lnb-profile { transition: padding-left .28s cubic-bezier(.2, .8, .2, 1); }
  .danmuji-shell .figma-lnb-usage:not([hidden]) { display: flex; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
  body.figma-lnb-open .danmuji-shell .figma-lnb-usage:not([hidden]) { opacity: 1; visibility: visible; transition-delay: .06s; }
  @media (prefers-reduced-motion: reduce) { .figma-lnb-toggle, .figma-lnb-list button, .figma-lnb-profile, .danmuji-shell .figma-lnb-usage { transition: none !important; } }
}

/* ── 모바일 메뉴 — Figma 556:121644(라이트) · 556:115321(다크). 좌표는 Figma 판에서 상태바 53px 을 뺀 값 ── */
@media (max-width: 700px) {
  /* 메뉴가 열려 있는 동안 휴대폰 상단(상태바)도 노랗게: theme-color(#fcea4a)에 더해, 상단 색을 페이지 바탕에서 가져오는 Safari 26 등을 위해
     페이지 바탕 자체를 노랑으로 깔고(위로 당겨도 노랑), 메뉴 본문만 흰 바탕으로 덮는다. 아래로 튕겨 노랑이 보이지 않게 튕김은 끈다 */
  html:has(body.figma-menu-page), body.figma-menu-page { background: #fcea4a; overscroll-behavior-y: none; }
  body.figma-menu-page .shell, body.figma-menu-page .danmuji-shell .main { background: transparent; }
  .dm-menu { min-height: 100dvh; padding-bottom: var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)); background: #fff; color: #191919; }
  .dm-menu :where(button) { font-family: inherit; color: inherit; cursor: pointer; }
  .dm-menu-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; height: 464px; padding: 56px 24px 0; border-radius: 0 0 40px 40px; background: #fcea4a; color: #191919; }
  .dm-menu-back { position: absolute; top: 10px; left: 16px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 32px; background: rgba(255, 255, 255, .7) url('assets/figma/menu/back.svg') center / 24px 24px no-repeat; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); }
  .dm-menu-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
  /* 움직이는 쉬는 중 그림(mascot/rest-400)은 이미지 안 여백이 커서, 캐릭터가 Figma 크기(93×76 · 위 12)로 보이게 키우고 100 상자에 맞춘다 */
  .dm-menu-hero img { width: 113.4px; height: 113.4px; margin: -9.1px -6.7px -4.3px; object-fit: contain; }   /* 그림만 3 위로: 뒤로 버튼 아래 끝 ~ 캐릭터 위 끝 12(Figma 556:115225), 아래 글자 위치는 그대로 */
  .dm-menu-hero h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 32px; }
  .dm-menu-hero p { margin: -4px 0 0; font-size: 15px; line-height: 22px; opacity: .6; }
  .dm-menu-actions { display: flex; justify-content: center; gap: 30px; width: 100%; }
  .dm-menu-actions button { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 80px; padding: 0; border: 0; background: none; font-size: 13px; line-height: 1.68; }
  .dm-menu-action-icon { width: 50px; height: 50px; border-radius: 100px; background: rgba(255, 255, 255, .6) center / 24px 24px no-repeat; box-shadow: 0 0 2px rgba(0, 0, 0, .06); }
  .dm-menu-action-icon.is-call { background-image: url('assets/figma/icons/phone.svg'); }
  .dm-menu-action-icon.is-reservation { background-image: url('assets/figma/icons/reservation.svg'); }
  .dm-menu-usage { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: 6px; padding: 20px 20px 22px; border: 0; border-radius: 24px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 2px rgba(0, 0, 0, .06); text-align: left; }
  .dm-menu-usage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; white-space: nowrap; }
  .dm-menu-usage-head > span { color: #000; font-size: 14px; opacity: .7; }
  .dm-menu-usage-head strong { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }
  .dm-menu-usage-arrow { width: 14px; height: 14px; background: url('assets/figma/icons/usage-arrow.svg') center / 14px 14px no-repeat; opacity: .5; }
  .dm-menu-usage-track { position: relative; display: block; width: 100%; height: 6px; border-radius: 100px; background: rgba(0, 0, 0, .08); }
  .dm-menu-usage-track span { position: absolute; inset: 0 auto 0 0; border-radius: 100px; background: #191919; }
  .dm-menu-links { display: flex; flex-direction: column; margin-top: 20px; }
  .dm-menu-links button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6.5px 20px; border: 0; background: none; font-size: 18px; font-weight: 700; line-height: 1.54; text-align: left; }
  .dm-menu-links button::after { content: ''; flex: none; width: 20px; height: 20px; background: url('assets/figma/menu/arrow.svg') center / 20px 20px no-repeat; }
  .dm-menu-links button + button { margin-top: 24px; }
  .dm-menu-links button + button::before { content: ''; position: absolute; top: -12.5px; right: 16px; left: 16px; height: 1px; background: rgba(0, 0, 0, .04); }
  :root[data-dm-theme="dark"]:has(body.figma-menu-page), :root[data-dm-theme="dark"] body.figma-menu-page { background: #fcea4a; }
  :root[data-dm-theme="dark"] body.figma-menu-page .shell, :root[data-dm-theme="dark"] body.figma-menu-page .danmuji-shell .main { background: transparent; }
  :root[data-dm-theme="dark"] .dm-menu { background: #080808; }
  :root[data-dm-theme="dark"] .dm-menu-links { color: #f2f2f2; }
  :root[data-dm-theme="dark"] .dm-menu-links button::after { background-image: url('assets/figma/menu/arrow-dark.svg'); }
  :root[data-dm-theme="dark"] .dm-menu-links button + button::before { background: rgba(255, 255, 255, .08); }
  :root[data-dm-theme="dark"] .dm-menu-usage { background: rgba(255, 255, 255, .5); }
}

/* ── 전화·예약 바텀시트 — Figma 788:36444 · 788:36767 · 788:35730 · 788:36202. PC 는 같은 내용을 가운데 다이얼로그로 ── */
.dm-sheet-scrim { position: fixed; z-index: 60; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0); transition: background-color .25s; }
.dm-sheet-scrim.is-open { background: rgba(0, 0, 0, .5); }
.dm-sheet { display: flex; flex-direction: column; width: 100%; max-height: 100dvh; margin: 0 0 -1px; padding: 0 0 var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)); overflow: hidden auto; border-radius: 32px 32px 0 0; background: #fff; color: #191919; transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.dm-sheet-scrim.is-open .dm-sheet { transform: none; }
.dm-sheet :where(button, input, textarea, select) { font-family: inherit; }
.dm-sheet-handle { display: grid; place-items: center; flex: none; width: 100%; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.dm-sheet-handle span { width: 36px; height: 4px; border-radius: 2px; background: #949494; }
.dm-sheet-title { flex: none; height: 44px; margin: 0; font-size: 16px; font-weight: 600; line-height: 44px; text-align: center; }
.dm-sheet-head { flex: none; }
.dm-sheet-close { display: none; }
.dm-sheet-form { display: flex; flex-direction: column; gap: 24px; padding: 18px 16px 0; }
.dm-sheet-field { display: flex; flex-direction: column; gap: 12px; }
.dm-sheet-label { padding: 0 4px; color: #595959; font-size: 15px; line-height: 23px; }
.dm-sheet-input, .dm-sheet-textarea { box-sizing: border-box; width: 100%; border: 1px solid rgba(0, 0, 0, .08); background: #fff; color: #191919; font-size: 15px; line-height: 1.5; outline: 0; }
.dm-sheet-input { height: 50px; padding: 0 20px; border-radius: 100px; font-weight: 600; }
.dm-sheet-input.is-phone { border-radius: 24px; }
.dm-sheet-textarea { display: block; height: 208px; padding: 16px 20px; border-radius: 20px; resize: none; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .12) transparent; }
/* 여러 줄 입력칸: 테두리·반경은 바깥 상자가, 글과 스크롤은 안쪽 textarea 가 맡는다 — 스크롤 막대가 위아래 16 · 오른쪽 8 안쪽에만 생겨 둥근 모서리 밖으로 빠지지 않는다 */
.dm-sheet-textbox { box-sizing: border-box; display: block; height: 208px; padding: 16px 8px 16px 20px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); border-radius: 20px; background: #fff; cursor: text; }   /* 반경 20 — 통화 시트 시안 1063:40852 */
.dm-sheet-textbox .dm-sheet-textarea { height: 100%; padding: 0 12px 0 0; border: 0; border-radius: 0; background: transparent; }
.dm-sheet-textarea::-webkit-scrollbar { width: 4px; }
.dm-sheet-textarea::-webkit-scrollbar-thumb { border-radius: 20px; background: rgba(0, 0, 0, .12); }
.dm-sheet-input::placeholder, .dm-sheet-textarea::placeholder { color: #949494; opacity: 1; }
.dm-sheet-options { display: flex; flex-direction: column; gap: 8px; }
.dm-sheet-option-wrap { position: relative; }
.dm-sheet-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 4px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .dm-sheet-option:hover { background: rgba(0, 0, 0, .04); } }
.dm-sheet-option:active, .dm-sheet-option[aria-expanded="true"] { background: rgba(0, 0, 0, .04); }
.dm-sheet-option .dm-sheet-label { padding: 0; }
.dm-sheet-option strong { font-size: 16px; font-weight: 500; line-height: 1.5; }
.dm-sheet-actions { flex: none; margin-top: 16px; padding: 16px; }
.dm-sheet-submit { width: 100%; height: 52px; padding: 0 20px; border: 0; border-radius: 100px; background: #191919; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.3px; cursor: pointer; transition: background-color .15s; }
.dm-sheet-submit:disabled { background: rgba(0, 0, 0, .2); cursor: default; }
:root[data-dm-theme="dark"] .dm-sheet { background: #202020; color: #f2f2f2; }
:root[data-dm-theme="dark"] .dm-sheet-handle span { background: #828282; }
:root[data-dm-theme="dark"] .dm-sheet-label { color: #c9c9c9; }
:root[data-dm-theme="dark"] .dm-sheet-input, :root[data-dm-theme="dark"] .dm-sheet-textarea { border-color: rgba(255, 255, 255, .12); background: #2e2e2e; color: #f2f2f2; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
:root[data-dm-theme="dark"] .dm-sheet-textbox { border-color: rgba(255, 255, 255, .12); background: #2e2e2e; }
:root[data-dm-theme="dark"] .dm-sheet-textbox .dm-sheet-textarea { border: 0; background: transparent; }
:root[data-dm-theme="dark"] .dm-sheet-textarea::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
:root[data-dm-theme="dark"] .dm-sheet-input::placeholder, :root[data-dm-theme="dark"] .dm-sheet-textarea::placeholder { color: #828282; }
:root[data-dm-theme="dark"] .dm-sheet-submit { background: #f2f2f2; color: #282828; }   /* 글자 WHITE003S 다크 #282828 (Figma 1063:41470) */
:root[data-dm-theme="dark"] .dm-sheet-submit:disabled { background: rgba(255, 255, 255, .35); color: #282828; }
@media (min-width: 701px) {
  .dm-sheet-scrim { align-items: center; }
  .dm-sheet { width: 420px; max-height: calc(100dvh - 48px); margin: 0; padding-bottom: 0; border-radius: 32px; opacity: 0; transform: translateY(16px) scale(.98); transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
  .dm-sheet-scrim.is-open .dm-sheet { opacity: 1; transform: none; }
  .dm-sheet-handle { display: none; }
  /* PC 다이얼로그 — Figma 324:102473(List dialog) 스타일: 반경 40 · 그림자 0 20 60 20%, 머리는 왼쪽 제목 SemiBold 18 + 32 원형 닫기, 좌우 24, 버튼 높이 58 */
  .dm-sheet { width: 461px; border-radius: 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
  .dm-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 24px 16px 30px; }
  .dm-sheet-title { height: auto; font-size: 18px; line-height: 32px; text-align: left; }
  .dm-sheet-close { display: block; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 80px; background: rgba(0, 0, 0, .03) url('assets/figma/dialog/close.svg') center / 18px 18px no-repeat; cursor: pointer; transition: background-color .15s; }
  .dm-sheet-close:hover { background-color: rgba(0, 0, 0, .06); }
  .dm-sheet-close:active { background-color: rgba(0, 0, 0, .08); }
  .dm-sheet-form { padding: 8px 24px 0; }
  .dm-sheet-actions { margin-top: 8px; padding: 24px; }
  .dm-sheet-submit { height: 58px; }
  :root[data-dm-theme="dark"] .dm-sheet { border: 1px solid rgba(255, 255, 255, .08); }
  :root[data-dm-theme="dark"] .dm-sheet-close { background-color: rgba(255, 255, 255, .06); background-image: url('assets/figma/dialog/close-dark.svg'); }
}
@media (prefers-reduced-motion: reduce) { .dm-sheet, .dm-sheet-scrim { transition: none; } }

/* 반복 주기·시간대 선택 카드 — 시트 요소를 그대로: 반경 24 카드 + GNB 버튼 계열 그림자, 선택·hover 회색 4%(다크 흰색 8%),
   글자 15 Regular / 선택 SemiBold, 체크는 Figma Mono/Badge/Check01_solid, 확인은 시트 등록 버튼과 같은 검은 알약 */
.dm-picker { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; padding: 8px; border-radius: 24px; background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .08); opacity: 0; transform: translateY(6px) scale(.97); transform-origin: bottom right; transition: opacity .16s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.dm-picker.is-open { opacity: 1; transform: none; }
.dm-picker.is-repeat { width: 200px; }
.dm-picker-option { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px; border: 0; border-radius: 16px; background: none; color: #191919; font-size: 15px; line-height: 1.5; text-align: left; cursor: pointer; transition: background-color .15s; }
.dm-picker-option[aria-selected="true"] { font-weight: 600; }
.dm-picker-option[aria-selected="true"]::after { content: ''; width: 24px; height: 24px; background: url('assets/figma/icons/check.svg') center / 24px 24px no-repeat; }
@media (hover: hover) { .dm-picker-option:hover { background: rgba(0, 0, 0, .04); } }
.dm-picker-option:active, .dm-picker-option:focus-visible { background: rgba(0, 0, 0, .04); outline: 0; }
.dm-picker.is-time { width: 248px; }
.dm-wheel { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 200px; }
.dm-wheel-band { position: absolute; top: 80px; right: 0; left: 0; height: 40px; border-radius: 100px; background: rgba(0, 0, 0, .04); pointer-events: none; }
.dm-wheel-col { position: relative; height: 200px; padding: 80px 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; outline: 0; -webkit-mask-image: linear-gradient(transparent, #000 34%, #000 66%, transparent); mask-image: linear-gradient(transparent, #000 34%, #000 66%, transparent); }
.dm-wheel-col::-webkit-scrollbar { display: none; }
.dm-wheel-item { display: grid; place-items: center; height: 40px; color: #949494; font-size: 17px; line-height: 1.5; scroll-snap-align: center; cursor: pointer; transition: color .12s; }
.dm-wheel-item.is-selected { color: #191919; font-weight: 600; }
.dm-wheel-col:focus-visible .dm-wheel-item.is-selected { text-decoration: underline; text-underline-offset: 4px; }
.dm-picker-done { height: 44px; margin-top: 8px; border: 0; border-radius: 100px; background: #191919; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.3px; cursor: pointer; }
:root[data-dm-theme="dark"] .dm-sheet-option:active, :root[data-dm-theme="dark"] .dm-sheet-option[aria-expanded="true"], :root[data-dm-theme="dark"] .dm-picker-option:active, :root[data-dm-theme="dark"] .dm-picker-option:focus-visible, :root[data-dm-theme="dark"] .dm-wheel-band { background: rgba(255, 255, 255, .08); }
@media (hover: hover) { :root[data-dm-theme="dark"] .dm-sheet-option:hover, :root[data-dm-theme="dark"] .dm-picker-option:hover { background: rgba(255, 255, 255, .08); } }
:root[data-dm-theme="dark"] .dm-picker { background: #2e2e2e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .4); }
:root[data-dm-theme="dark"] .dm-picker-option, :root[data-dm-theme="dark"] .dm-wheel-item.is-selected { color: #f2f2f2; }
:root[data-dm-theme="dark"] .dm-wheel-item { color: #828282; }
:root[data-dm-theme="dark"] .dm-picker-option[aria-selected="true"]::after { background-image: url('assets/figma/icons/check-dark.svg'); }
:root[data-dm-theme="dark"] .dm-picker-done { background: #f2f2f2; color: #080808; }
@media (prefers-reduced-motion: reduce) { .dm-picker { transition: none; } }

/* ── 로그인 — Figma 496:90398(라이트) · 496:93229(다크). 좌표는 Figma 판에서 상태바 53px 을 뺀 값 ──
   마스코트 140 상자(그림 131.8×110.1) · 문구 15 SemiBold · 워드마크 237×43 · 카카오 버튼(아이콘은 Figma ios_symbol_kakao) */
.figma-auth { display: block; padding: 0; }
.figma-auth-brand { position: absolute; top: max(96px, calc((100dvh - 799px) / 2 + 183px)); right: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 20px; transform: none; }
.figma-auth-brand > img:first-child { box-sizing: content-box; width: 131.765px; height: 110.147px; margin: 0; padding: 14.93px 4.12px; object-fit: cover; }
.figma-auth-brand p { margin: 8px 0 6px; color: #191919; font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -.075px; }
.figma-auth-title { margin: 8px 0 0; }
.figma-auth-brand > img.figma-auth-wordmark { display: block; width: 237.069px; height: 43px; }
.figma-auth-action { right: 0; bottom: 0; left: 0; width: auto; max-width: 440px; margin: 0 auto; padding: 24px 20px calc(24px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))); }
.figma-kakao { gap: 8px; min-height: 0; height: auto; padding: 20px; border-radius: 100px; background: #fee500; color: #191919; font-size: 16px; font-weight: 600; line-height: 18px; letter-spacing: -.3px; }
.figma-kakao:hover { background: #fee500; }
@media (hover: hover) { .figma-kakao:hover { background: linear-gradient(rgba(0, 0, 0, .04), rgba(0, 0, 0, .04)), #fee500; } }
.figma-kakao:active { background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)), #fee500; }
.kakao-symbol { flex: none; width: 18px; height: 18px; border-radius: 0; background: url('assets/figma/icons/kakao.svg') center / 18px 18px no-repeat; }
.kakao-symbol::after { content: none; }
.figma-auth-close { top: 10px; left: 16px; width: 44px; height: 44px; border-radius: 32px; background: rgba(255, 255, 255, .7) url('assets/figma/gnb/close.svg') center / 24px 24px no-repeat; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); font-size: 0; }
:root[data-dm-theme="dark"] .figma-auth { background: #080808; }
:root[data-dm-theme="dark"] .figma-auth-brand p { color: #f2f2f2; }
:root[data-dm-theme="dark"] .figma-auth-brand > img.figma-auth-wordmark { content: url('assets/figma/login/wordmark-dark.svg'); filter: none; }
:root[data-dm-theme="dark"] .figma-auth-close { background: rgba(32, 32, 32, .7) url('assets/figma/gnb/close-dark.svg') center / 24px 24px no-repeat; box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); }

.figma-auth-foot { display: none; }
/* PC 로그인 — Figma 496:90364(라이트) · 496:90381(다크), 1440×1024 판 기준(화면 높이가 다르면 가운데 기준으로 같이 움직임).
   마스코트 170 상자(그림 160×133.75, 위 18.13 · 좌우 5) 위 220 · 4 · 문구 20 SemiBold 행간 1.58(36 칸) · 워드마크 437.2×79.3(90 칸)
   · 60 · 카카오 버튼 너비 320(여백 20) · 맨 아래 80 칸 가운데 「© danmuzi. All rights reserved」 13 #949494. 다크 바탕 #202020 */
@media (min-width: 701px) {
  .figma-auth { min-height: max(100dvh, 640px); background: #fff; }
  .figma-auth-brand { top: max(40px, calc((100dvh - 1024px) / 2 + 220px)); padding: 0; }
  .figma-auth-brand > img.figma-auth-mascot { box-sizing: content-box; width: 160px; height: 133.75px; padding: 18.13px 5px 18.12px; object-fit: cover; }
  .figma-auth-brand p { display: flex; align-items: center; justify-content: center; height: 36px; margin: 4px 0 0; font-size: 20px; line-height: 1.58; letter-spacing: -.1px; }
  .figma-auth-brand > img.figma-auth-wordmark { width: 437.198px; height: 79.3px; margin: 5.35px 0; }
  .figma-auth-action { top: calc(max(40px, calc((100dvh - 1024px) / 2 + 220px)) + 360px); bottom: auto; width: 320px; max-width: none; padding: 0; }
  .figma-auth-foot { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; height: 80px; margin: 0; color: #949494; font-size: 13px; line-height: normal; }
  :root[data-dm-theme="dark"] .figma-auth { background: #202020; }
  :root[data-dm-theme="dark"] .figma-auth-foot { color: #828282; }
}

/* ── 위젯 (DP-003) — Figma 556:99359 「위젯」 (모음 558:33984, 텍스트·버튼 801:42631) ──
   서버는 데이터만 보내고 app.js widgetCard 가 블록을 조합해 그린다. 규칙은 project-docs 디자인 토큰 문서 「위젯」.
   카드: 흰 바탕 + 4px gray050s 테두리, 반경 24, 안쪽 16, 너비 = 답변 말풍선 최대 폭. 머리(아이콘 24 + 6 + 제목 16 SemiBold) 아래 14,
   몸통 블록 사이 10, 버튼 줄은 위 블록과 12. 목록처럼 줄 자체에 위아래 여백이 있는 블록은 머리 바로 아래에서 -8 당겨 붙인다(Figma 6 + 줄 여백). */
.dm-widget { --w-ink: #191919; --w-ink-2: #424242; --w-ink-3: #595959; --w-muted: #767676; --w-hint: #949494; --w-accent: #0a73dc; --w-line: rgba(0, 0, 0, .04); --w-fill: rgba(0, 0, 0, .04); --w-solid: #f5f5f5; --w-strong: #2e2e2e; --w-on-strong: #fff; --w-off: #b2b2b2; --w-thumb-line: rgba(0, 0, 0, .06); --w-bar: rgba(0, 0, 0, .12); --w-dot: #b2b2b2;
  box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; width: var(--chat-widget-max, 330px); max-width: 100%; margin: 0; padding: 16px; border: 4px solid var(--w-solid); border-radius: 24px; background: #fff; color: var(--w-ink); overflow: hidden; }
.dm-widget * { box-sizing: border-box; }
.dm-widget :where(p, strong, b, small, em) { margin: 0; }
.dm-widget-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dm-widget-head strong { overflow: hidden; font-size: 16px; font-weight: 600; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
.dm-widget-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-wb-divider { flex: none; width: 100%; height: 16px; margin: 0; border: 0; background: linear-gradient(var(--w-line), var(--w-line)) center / 100% 1px no-repeat; }
.dm-widget-head + .dm-widget-body > :is(.dm-wb-list.is-place, .dm-wb-list.is-media, .dm-wb-mail):first-child { margin-top: -8px; }
.dm-widget-body > .dm-wb-buttons:not(:first-child) { margin-top: 2px; }

/* 아이콘 — 위젯 이름 하나당 하나(assets/figma/widget/icon/<이름>.svg). Figma 에 아직 임시(회색) 아이콘인 것도 이름별로 갈라 둠 */
.dm-widget-icon { flex: none; width: 24px; height: 24px; background: url('assets/figma/widget/icon/default.svg') center / 24px 24px no-repeat; }
.dm-widget-icon.is-weather { background-image: url('assets/figma/widget/icon/weather.svg'); }
.dm-widget-icon.is-place { background-image: url('assets/figma/widget/icon/place.svg'); }
.dm-widget-icon.is-shopping { background-image: url('assets/figma/widget/icon/shopping.svg'); }
.dm-widget-icon.is-news { background-image: url('assets/figma/widget/icon/news.svg'); }
.dm-widget-icon.is-link { background-image: url('assets/figma/widget/icon/link.svg'); }
.dm-widget-icon.is-mail { background-image: url('assets/figma/widget/icon/mail.svg'); }
.dm-widget-icon.is-schedule { background-image: url('assets/figma/widget/icon/schedule.svg'); }
.dm-widget-icon.is-briefing { background-image: url('assets/figma/widget/icon/briefing.svg'); }
.dm-widget-icon.is-login { background-image: url('assets/figma/widget/icon/login.svg'); }
.dm-widget-icon.is-verify { background-image: url('assets/figma/widget/icon/verify.svg'); }
.dm-widget-icon.is-payment { background-image: url('assets/figma/widget/icon/payment.svg'); } /* 결제 Mono/Badge/Invitation_solid 1078:56898 */
.dm-widget-icon.is-document { width: 22px; height: 22px; background: url('assets/figma/widget/icon/document.svg') center / 22px 22px no-repeat; }
.dm-widget-icon.is-call-request { width: 22px; height: 22px; background: url('assets/figma/widget/icon/call-request.svg') center / 22px 22px no-repeat; }
/* 전화 거는 중 — Phone Ring_solid GREEN500S #00CD3C(라이트·다크 같음), 22px (Figma 1078:58168) */
.dm-widget-icon.is-calling { width: 22px; height: 22px; background: url('assets/figma/widget/icon/calling.svg') center / 22px 22px no-repeat; }
/* 통화 종료 — Phone End_solid #767676 / 다크 #A6A6A6, 24px (Figma 1078:57423) */
.dm-widget-icon.is-call-ended { background-image: url('assets/figma/widget/icon/call-ended.svg'); }
.dm-widget.is-call_ended .dm-wb-status { gap: 6px; }
.dm-widget-icon.is-call-result { background-image: url('assets/figma/widget/icon/call-result.svg'); }
.dm-widget-icon.is-missed-call { background-image: url('assets/figma/widget/icon/missed-call.svg'); }

/* 날씨 */
.dm-wb-weather { display: flex; flex-direction: column; gap: 4px; }
.dm-wb-weather-place { display: flex; align-items: center; gap: 4px; font-size: 16px; line-height: 27px; }
.dm-wb-weather-place b { font-weight: 600; white-space: nowrap; }
.dm-wb-weather-place span { width: 12px; font-weight: 200; text-align: center; }
.dm-wb-weather-now { display: flex; align-items: center; gap: 12px; padding: 8px 0 4px; }
.dm-weather-icon { flex: none; width: 28px; height: 28px; background: url('assets/figma/widget/weather/sunny.svg') center / contain no-repeat; }
.dm-weather-icon.is-lg { width: 42px; height: 42px; margin-right: -2px; }
.dm-weather-icon.is-cloudy { background-image: url('assets/figma/widget/weather/cloudy.svg'); }
.dm-weather-icon.is-fog { background-image: url('assets/figma/widget/weather/fog.svg'); }
.dm-wb-temp { display: flex; align-items: flex-start; gap: 2px; margin-left: -10px; padding-left: 10px; font-size: 36px; font-weight: 600; line-height: 26px; }
.dm-wb-temp i { width: 7.5px; height: 7.5px; margin-top: -1px; background: url('assets/figma/widget/weather/degree.svg') center / contain no-repeat; }
.dm-wb-sky { font-size: 16px; font-weight: 500; line-height: 27px; white-space: nowrap; }
.dm-wb-weather-sub { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14px; line-height: 24px; }
.dm-wb-weather-sub span { display: flex; gap: 6px; white-space: nowrap; }
.dm-wb-weather-sub b { font-weight: 500; }
.dm-wb-times { display: flex; flex-direction: column; gap: 10px; }
.dm-wb-times > div { display: flex; align-items: center; justify-content: space-between; min-height: 28px; font-size: 16px; line-height: 27px; }
.dm-wb-times b { display: flex; align-items: center; gap: 4px; font-weight: 500; }

/* 목록 줄 — 장소(place)·뉴스·링크(media)·상품(product) */
.dm-wb-list { display: flex; flex-direction: column; gap: 8px; }
.dm-wb-item { display: flex; flex-direction: column; }
.dm-wb-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-radius: 16px; color: inherit; text-decoration: none; }
.dm-wb-row-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.dm-wb-row-text strong { overflow: hidden; font-size: 15px; font-weight: 500; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
.dm-wb-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 18px; }
.dm-wb-meta em { flex: none; color: var(--w-accent); font-style: normal; font-weight: 500; }
.dm-wb-meta span { overflow: hidden; flex: none; max-width: 100%; color: var(--w-muted); text-overflow: ellipsis; white-space: nowrap; }
.dm-wb-meta span:last-child { flex: 1; }
.dm-wb-dot { flex: none; width: 2px; height: 2px; border-radius: 50%; background: var(--w-dot); }
.dm-wb-thumb { flex: none; width: 46px; height: 46px; border: 1px solid var(--w-thumb-line); border-radius: 10px; background: #fff; object-fit: cover; }
.dm-wb-chips { display: flex; gap: 6px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.dm-wb-chips::-webkit-scrollbar { display: none; }
.dm-wb-list.is-media .dm-wb-row { padding: 10px 0; }
.dm-wb-list.is-media .dm-wb-thumb { width: 70px; }
.dm-wb-list.is-product { gap: 10px; }
.dm-wb-list.is-product .dm-wb-row { padding: 0; }
.dm-wb-list.is-product .dm-wb-thumb { order: -1; width: 80px; height: 80px; border-radius: 16px; }
.dm-wb-list.is-product .dm-wb-row-text small { overflow: hidden; color: var(--w-muted); font-size: 12px; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
.dm-wb-list.is-product .dm-wb-row-text strong { font-weight: 400; }
.dm-wb-price { font-size: 16px; font-weight: 700; line-height: normal; }

/* 메일 */
.dm-wb-mail { display: flex; flex-direction: column; }
.dm-wb-mail-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; color: inherit; text-decoration: none; }
/* 목록 줄 hover·pressed — 쇼핑(product)·뉴스·링크(media)·메일 줄만. 줄 내용은 그대로 두고 좌우 8px 밖까지 반경 12 상자를 깐다.
   hover gray050a rgba(0,0,0,.04) / 다크 rgba(255,255,255,.08)(사이드바·입력창과 같은 값), pressed 한 단계 진하게 .08 / .12 */
:is(.dm-wb-list:is(.is-media, .is-product) a.dm-wb-row, a.dm-wb-mail-row) { position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent; }
:is(.dm-wb-list:is(.is-media, .is-product) a.dm-wb-row, a.dm-wb-mail-row)::before { content: ''; position: absolute; z-index: -1; inset: 0 -8px; border-radius: 12px; background: transparent; transition: background-color .15s; }
.dm-wb-list.is-product a.dm-wb-row::before { inset: -6px -8px; }
@media (hover: hover) { :is(.dm-wb-list:is(.is-media, .is-product) a.dm-wb-row, a.dm-wb-mail-row):hover::before { background: rgba(0, 0, 0, .04); } }
:is(.dm-wb-list:is(.is-media, .is-product) a.dm-wb-row, a.dm-wb-mail-row):active::before { background: rgba(0, 0, 0, .08); }
:is(.dm-wb-list:is(.is-media, .is-product) a.dm-wb-row, a.dm-wb-mail-row):focus-visible { outline: none; }
:is(.dm-wb-list:is(.is-media, .is-product) a.dm-wb-row, a.dm-wb-mail-row):focus-visible::before { box-shadow: 0 0 0 2px var(--w-strong); }
@media (hover: hover) { :root[data-dm-theme="dark"] :is(.dm-wb-list:is(.is-media, .is-product) a.dm-wb-row, a.dm-wb-mail-row):hover::before { background: rgba(255, 255, 255, .08); } }
:root[data-dm-theme="dark"] :is(.dm-wb-list:is(.is-media, .is-product) a.dm-wb-row, a.dm-wb-mail-row):active::before { background: rgba(255, 255, 255, .12); }
.dm-wb-mail-head { display: flex; align-items: flex-start; gap: 4px; }
.dm-wb-mail-head strong { flex: 1; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.dm-wb-mail-head time { flex: none; color: var(--w-muted); font-size: 12px; line-height: 14px; }
.dm-wb-mail-subject { overflow: hidden; font-size: 15px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.dm-wb-mail-preview { overflow: hidden; margin-top: 2px !important; color: var(--w-muted); font-size: 13px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }

/* 일정 */
.dm-wb-schedule { display: flex; flex-direction: column; gap: 14px; }
/* 일정 위젯만 Figma 에서 안쪽 폭이 296(좌우 13) — 브리핑 안 일정은 290 그대로 */
.dm-widget.is-schedule { padding-inline: 13px; }
.dm-wb-day { display: flex; flex-direction: column; gap: 8px; }
.dm-wb-day-head { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.dm-wb-day-head strong { font-size: 16px; font-weight: 600; line-height: normal; }
.dm-wb-calendar { flex: none; width: 20px; height: 20px; background: url('assets/figma/widget/calendar.svg') center / 20px 20px no-repeat; }
.dm-wb-events { display: flex; flex-direction: column; }
.dm-wb-event { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.dm-wb-bar { flex: none; align-self: stretch; width: 3px; border-radius: 999px; background: var(--w-bar); }
.dm-wb-event .dm-wb-bar { align-self: center; height: 42px; }
.dm-wb-event-time { display: flex; flex: none; flex-direction: column; justify-content: flex-start; gap: 4px; width: 46px; min-height: 40px; position: relative; top: 1px; font-size: 13px; line-height: 18px; } /* 종일도 위에서부터: 제목 줄과 같은 높이 (Figma 558:34588) */
.dm-wb-event-time b { font-weight: 600; }
.dm-wb-event-time span { color: var(--w-muted); }
.dm-wb-event-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; margin-left: -6px; }
.dm-wb-event-text strong { overflow: hidden; font-size: 15px; font-weight: 500; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.dm-wb-event-text span { overflow: hidden; color: var(--w-muted); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }

/* 문서 */
.dm-wb-file { display: flex; flex-direction: column; gap: 10px; }
.dm-wb-file-row { display: flex; align-items: center; gap: 10px; padding: 0 2px; color: inherit; text-decoration: none; }
/* 파일 종류 아이콘: 채팅 파일 말풍선의 .file-tile(pdf·ppt·docs·sheet·etc)을 그대로 쓰고, 위젯 안에서는 타일만 GRAY000S (Figma 558:34768) */
body .dm-wb-file-row .file-tile { background-color: #f7f7f7; }
:root[data-dm-theme="dark"] body .dm-wb-file-row .file-tile { background-color: #151515; }
.dm-wb-file-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dm-wb-file-text strong { overflow: hidden; font-size: 15px; font-weight: 500; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; }
.dm-wb-file-text > span { display: flex; align-items: center; gap: 6px; color: var(--w-ink-3); font-size: 13px; line-height: 21px; }
.dm-wb-preview { overflow: hidden; height: 161px; border-radius: 16px; background: #191919; }
.dm-wb-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 안내(아이콘 위 · 문단) · 대화록 */
.dm-wb-notice { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 2px; }
.dm-wb-notice p { font-size: 15px; font-weight: 500; line-height: 1.6; }
.dm-widget.is-summary .dm-wb-notice p { word-break: keep-all; overflow-wrap: break-word; }
.dm-wb-notice p b, .dm-wb-notice.is-strong p { font-weight: 700; }
.dm-widget.is-call_result { padding-bottom: 10px; }
/* 정리 목록 — Figma 1111:55631: 3px 막대 + 10, 위아래 10(안쪽 2), 줄 사이 12. 항목명 46px 칸 13 SemiBold #595959 · 4 · 내용 13 #767676 오른쪽 정렬, 행간 18 */
.dm-wb-details { display: flex; gap: 10px; padding: 10px 0; }
.dm-wb-details dl { display: grid; flex: 1; grid-template-columns: 46px minmax(0, 1fr); gap: 12px 4px; min-width: 0; margin: 0; padding: 2px 0; font-size: 13px; line-height: 18px; }
.dm-wb-details dt { color: var(--w-ink-3); font-weight: 600; white-space: nowrap; }
.dm-wb-details dd { margin: 0; color: var(--w-muted); text-align: right; word-break: keep-all; overflow-wrap: break-word; }
.dm-wb-details dd b { color: var(--w-ink-3); font-weight: 600; }
/* 정리 목록으로 끝나는 카드는 통화 결과처럼 아래 여백 10 */
.dm-widget:has(> .dm-widget-body > .dm-wb-details:last-child) { padding-bottom: 10px; }
.dm-wb-transcript { display: flex; gap: 10px; padding: 10px 0; }
.dm-wb-transcript > div { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 2px 0; min-width: 0; }
.dm-wb-transcript p { display: flex; gap: 4px; font-size: 13px; line-height: 18px; }
.dm-wb-transcript p b { flex: none; width: 46px; color: var(--w-ink-3); font-weight: 600; }
.dm-wb-transcript p span { color: var(--w-muted); }

/* 상태 한 줄(부재중 통화) — 카드가 한 줄일 땐 위아래 10 */
.dm-widget.is-compact { padding: 10px 16px; }
.dm-wb-status { display: flex; align-items: center; gap: 8px; min-height: 40px; } /* 버튼 없는 상태 줄(통화 종료)도 부재중 카드와 같은 높이 68 */
.dm-wb-status strong { font-size: 16px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.dm-wb-status > span:not(.dm-widget-icon) { flex: 1; margin-left: -2px; overflow: hidden; color: var(--w-muted); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.dm-wb-status .dm-widget-btn { width: 80px; padding: 13.5px 0; font-size: 13px; line-height: 13px; }

/* 버튼 — 칩(목록 아래 · 4% 채움), 보조(gray050s), 주(gray800s), 제출(입력 위젯, 꺼짐 gray400s) */
.dm-widget-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 999px; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .15s, opacity .15s; }
.dm-widget-btn.is-chip { gap: 6px; padding: 9px 15px; background: var(--w-fill); color: var(--w-ink-2); font-size: 14px; line-height: 18px; white-space: nowrap; }
.dm-wb-buttons { display: flex; gap: 6px; } /* 버튼 두 개 이상 나란히: 사이 6px (Figma 558:34787) */
.dm-wb-buttons .dm-widget-btn { flex: 1; padding: 13px 20px; font-size: 14px; line-height: 14px; }
.dm-widget-btn.is-secondary { background: var(--w-solid); color: var(--w-ink-2); }
.dm-wb-buttons.is-more .dm-widget-btn.is-secondary { color: var(--w-ink); }
.dm-widget-btn.is-primary, .dm-widget-btn.is-submit { background: var(--w-strong); color: var(--w-on-strong); }
.dm-widget-btn.is-submit { width: 100%; height: 44px; padding: 0 20px; font-size: 14px; line-height: 14px; }
.dm-widget-btn.is-submit:disabled { background: var(--w-off); cursor: default; }
@media (hover: hover) { .dm-widget-btn.is-chip:hover { background: rgba(0, 0, 0, .08); } .dm-widget-btn.is-secondary:hover { background: #ebebeb; } .dm-widget-btn:is(.is-primary, .is-submit:not(:disabled)):hover { background: #424242; } }
.dm-widget-btn.is-chip:active { background: rgba(0, 0, 0, .08); }
.dm-widget-btn.is-secondary:active { background: #ebebeb; }
.dm-widget-btn:is(.is-primary, .is-submit:not(:disabled)):active { background: #424242; }
.dm-wb-text { font-size: 16px; line-height: 1.6; white-space: pre-wrap; }
/* 설명 글(승인 카드 등): 15 행간 1.6 #595959, 제목(굵은 notice) 바로 아래 4 */
.dm-wb-text.is-muted { color: var(--w-ink-3); font-size: 15px; }
.dm-wb-text.is-muted b { color: var(--w-ink); font-weight: 600; }
.dm-wb-notice.is-strong + .dm-wb-text.is-muted { margin-top: -6px; }
.dm-widget.is-approval .dm-wb-notice p { word-break: keep-all; overflow-wrap: break-word; }

/* 브리핑 (Figma 558:33006): 머리 「브리핑」 하나 + 위젯 몸통들을 구분선으로 잇는다. 테두리는 gray050a, 일정 날짜 아이콘 24 · 날짜와 목록 사이 10 */
.dm-widget.is-briefing { border-color: var(--w-fill); }
.dm-widget.is-briefing .dm-wb-day { gap: 10px; }
.dm-widget.is-briefing .dm-wb-calendar { width: 24px; height: 24px; background-size: 24px 24px; }

/* 입력 위젯(텍스트·버튼) — Figma 801:42631. 테두리 gray050a, 머리 아래 16, 묶음(입력칸들·도움말·링크·버튼) 사이 20, 입력칸끼리 8 */
.dm-widget.is-form { gap: 16px; border-color: var(--w-fill); }
.dm-widget.is-form > .dm-widget-body { gap: 20px; }
.dm-widget.is-form > .dm-widget-body > .dm-wb-field + .dm-wb-field { margin-top: -12px; }
.dm-widget.is-form > .dm-widget-body > .dm-wb-buttons:not(:first-child) { margin-top: 0; }
.dm-widget.is-form .dm-wb-buttons .dm-widget-btn { height: 44px; padding: 0 20px; }
.dm-wb-field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0 12px; border-radius: 14px; background: var(--w-solid); cursor: text; }
.dm-wb-field input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--w-ink); font: inherit; font-size: 15px; line-height: normal; }
.dm-wb-field input::placeholder { color: var(--w-hint); font-size: 14px; opacity: 1; }
.dm-wb-field-label { display: none; color: var(--w-hint); font-size: 10px; line-height: normal; }
.dm-wb-field:not(.is-code):has(input:not(:placeholder-shown)) .dm-wb-field-label { display: block; }
.dm-wb-field.is-code .dm-wb-field-label { display: none; }
.dm-wb-field.is-code input { font-size: 14px; }
.dm-wb-field:has(.dm-wb-eye, .dm-wb-timer) { padding-right: 40px; }
.dm-wb-eye { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; padding: 0; border: 0; background: url('assets/figma/widget/form/eye.svg') center / 16px 16px no-repeat; transform: translateY(-50%); cursor: pointer; }
/* 눈 아이콘 GRAY500S #949494 / 다크 #828282 (InputField 751:38500·751:38577): 비어 있거나 보이는 중이면 눈, 채워서 가린 상태면 눈 꺼짐 */
.dm-wb-field:has(input[type="password"]:not(:placeholder-shown)) .dm-wb-eye { background-image: url('assets/figma/widget/form/eye-off.svg'); }
.dm-wb-timer { position: absolute; top: 50%; right: 12px; color: var(--w-accent); font-size: 14px; line-height: normal; transform: translateY(-50%); }
.dm-wb-helper { color: var(--w-hint); font-size: 14px; line-height: 17px; }
/* 가운데 작은 안내(동의 문구 등) — 바로 아래 버튼과 8px */
.dm-wb-helper.is-center { font-size: 12px; line-height: 16px; text-align: center; }
.dm-widget.is-form > .dm-widget-body > .dm-wb-helper.is-center + .is-submit { margin-top: -12px; }
/* 보안 번호 칸: 입력칸과 같은 #F5F5F5·반경 14, 높이 50, 칸 사이 6(버튼 나란히 규칙과 같음). 채운 칸은 8px 점, 지금 칸은 1px 테두리 */
.dm-wb-pin { position: relative; display: flex; gap: 6px; }
.dm-wb-pin input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; opacity: 0; font-size: 16px; cursor: text; }
.dm-wb-pin-cell { position: relative; flex: 1; height: 50px; border: 1px solid transparent; border-radius: 14px; background: var(--w-solid); transition: border-color .15s; }
.dm-wb-pin-cell.is-filled::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--w-ink); transform: translate(-50%, -50%); }
.dm-wb-pin:focus-within .dm-wb-pin-cell.is-current { border-color: var(--w-strong); }
/* 금액: 14px 줄(이름 #767676 · 금액 #191919 오른쪽) 사이 6, 합계 위 구분선 + 12, 합계 15 SemiBold · 20 Bold */
.dm-wb-amounts { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; font-size: 14px; line-height: 21px; }
.dm-wb-amounts > div { display: flex; justify-content: space-between; gap: 12px; }
.dm-wb-amounts span { color: var(--w-muted); }
.dm-wb-amounts b { color: var(--w-ink); font-weight: 400; text-align: right; white-space: nowrap; }
.dm-wb-amounts .is-total { align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--w-line); }
.dm-wb-amounts .is-total span { color: var(--w-ink); font-size: 15px; font-weight: 600; }
.dm-wb-amounts .is-total b { font-size: 20px; font-weight: 700; line-height: 28px; }
.dm-wb-links { display: flex; align-items: center; justify-content: center; gap: 16px; }
.dm-wb-links :is(a, button) { padding: 0; border: 0; background: none; color: var(--w-strong); font: inherit; font-size: 14px; line-height: 17px; text-decoration: none; cursor: pointer; }
.dm-wb-links i { width: 1px; height: 10px; background: #ccc; }
.dm-wb-choices { display: flex; flex-direction: column; gap: 16px; }
.dm-wb-choices-head { display: flex; flex-direction: column; gap: 8px; }
.dm-wb-choices-head strong { font-size: 16px; font-weight: 600; line-height: normal; }
.dm-wb-choices-head p { color: var(--w-muted); font-size: 14px; line-height: 22px; }
.dm-wb-options { display: flex; flex-direction: column; gap: 6px; }
.dm-wb-option { display: flex; align-items: center; gap: 8px; width: 100%; height: 46px; padding: 0 12px; overflow: hidden; border: 1px solid transparent; border-radius: 14px; background: var(--w-solid); color: var(--w-ink); font: inherit; font-size: 15px; line-height: normal; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: opacity .15s, border-color .15s; }
.dm-wb-choices.has-choice .dm-wb-option:not([aria-selected="true"]) { opacity: .7; }
.dm-wb-option > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dm-wb-option[aria-selected="true"] { border-color: var(--w-strong); }
.dm-wb-option[aria-selected="true"]::after { content: ''; flex: none; width: 16px; height: 16px; margin-left: auto; background: url('assets/figma/widget/form/check.svg') center / 16px 16px no-repeat; }

/* 말풍선과 위젯 사이: 같은 화자 8 */
.messages .message .dm-widget + *, .messages .message * + .dm-widget { margin-top: 8px; }

/* 다크 — 토큰 다크 값(일부는 Figma 다크 시안이 없어 토큰 이름에서 가져옴) */
:root[data-dm-theme="dark"] .dm-widget { --w-ink: #f2f2f2; --w-ink-2: #dfdfdf; --w-ink-3: #c9c9c9; --w-muted: #a6a6a6; --w-hint: #828282; --w-accent: #49a8f8; --w-line: rgba(255, 255, 255, .08); --w-fill: rgba(255, 255, 255, .08); --w-solid: #1a1a1a; --w-strong: #eeeeee; --w-on-strong: #282828; --w-off: #7c7c7c; --w-thumb-line: rgba(255, 255, 255, .1); --w-bar: rgba(255, 255, 255, .16); --w-dot: #5d5d5d; background: #080808; }
:root[data-dm-theme="dark"] .dm-wb-temp i { background-image: url('assets/figma/widget/weather/degree-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-weather { background-image: url('assets/figma/widget/icon/weather-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-place, :root[data-dm-theme="dark"] .dm-widget-icon.is-default { background-image: url('assets/figma/widget/icon/place-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-shopping { background-image: url('assets/figma/widget/icon/shopping-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-news { background-image: url('assets/figma/widget/icon/news-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-link { background-image: url('assets/figma/widget/icon/link-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-mail { background-image: url('assets/figma/widget/icon/mail-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-schedule { background-image: url('assets/figma/widget/icon/schedule-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-briefing { background-image: url('assets/figma/widget/icon/briefing-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-login { background-image: url('assets/figma/widget/icon/login-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-verify { background-image: url('assets/figma/widget/icon/verify-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-payment { background-image: url('assets/figma/widget/icon/payment-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-call-request { background-image: url('assets/figma/widget/icon/call-request-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-call-ended { background-image: url('assets/figma/widget/icon/call-ended-dark.svg'); }
:root[data-dm-theme="dark"] .dm-widget-icon.is-call-result { background-image: url('assets/figma/widget/icon/call-result-dark.svg'); }
:root[data-dm-theme="dark"] .dm-wb-eye { background-image: url('assets/figma/widget/form/eye-dark.svg'); }
:root[data-dm-theme="dark"] .dm-wb-field:has(input[type="password"]:not(:placeholder-shown)) .dm-wb-eye { background-image: url('assets/figma/widget/form/eye-off-dark.svg'); }
:root[data-dm-theme="dark"] .dm-wb-option[aria-selected="true"]::after { background-image: url('assets/figma/widget/form/check-dark.svg'); }
:root[data-dm-theme="dark"] .dm-wb-links i { background: #5d5d5d; }
:root[data-dm-theme="dark"] .dm-wb-thumb { background: #080808; }
@media (hover: hover) { :root[data-dm-theme="dark"] .dm-widget-btn.is-secondary:hover { background: #242424; } :root[data-dm-theme="dark"] .dm-widget-btn:is(.is-primary, .is-submit:not(:disabled)):hover { background: #dfdfdf; } }

/* ── 답변 쓰는 중 「…」 말풍선과 메시지 오고 가는 움직임 (DP-003) ─────────────────────────────
   「…」: 답변 말풍선과 같은 상자(여백 12 16 · 행간 25.6 → 높이 49.6, 반경 24, #F7F7F7 / 다크 #151515).
   점 7px · 사이 5px, 쉬는 색 #CCCCCC / 다크 #5D5D5D. 한 점씩 0.15초 차이로 2px 떠오르며 #767676 / 다크 #A6A6A6 로 진해지고, 1.1초마다 되풀이(디자이너 참고 영상) */
body.figma-chat-page .messages .bubble.assistant.dm-typing-bubble { display: flex; align-items: center; gap: 5px; height: 49.6px; padding: 0 16px; }
.dm-typing-bubble i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #ccc; animation: dm-typing-dot 1.1s ease-in-out infinite; }
.dm-typing-bubble i:nth-child(2) { animation-delay: .15s; }
.dm-typing-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes dm-typing-dot {
  0%, 45%, 100% { transform: translateY(0); background: var(--dm-typing-rest, #ccc); }
  20% { transform: translateY(-2px); background: var(--dm-typing-on, #767676); }
}
:root[data-dm-theme="dark"] .dm-typing-bubble i { --dm-typing-rest: #5d5d5d; --dm-typing-on: #a6a6a6; background: #5d5d5d; }

/* 오고 가는 메시지 — iMessage·카카오톡처럼 가볍게: 내 말풍선은 입력창 쪽(오른쪽 아래)에서, 답변과 「…」은 왼쪽 아래에서 살짝 커지며 올라온다.
   살짝 넘쳤다 자리 잡는 곡선(.34,1.36,.64,1)이라 쫀득하게 느껴지되, 넘침은 2~3% 안쪽 */
body.figma-chat-page .messages > .user-message.is-arriving { transform-origin: 100% 100%; animation: dm-arrive-sent .34s cubic-bezier(.34, 1.36, .64, 1) both; }
body.figma-chat-page .messages > .assistant-message.is-arriving { transform-origin: 0 100%; animation: dm-arrive-reply .3s cubic-bezier(.34, 1.3, .64, 1) both; }
body.figma-chat-page .messages > .dm-typing.is-arriving { transform-origin: 0 100%; animation: dm-arrive-typing .28s cubic-bezier(.34, 1.5, .64, 1) .2s both; }   /* 내 말풍선이 자리 잡은 뒤 나타남 */
@keyframes dm-arrive-sent { from { opacity: 0; transform: translateY(14px) scale(.92); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes dm-arrive-reply { from { opacity: 0; transform: translateY(8px) scale(.96); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes dm-arrive-typing { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.figma-chat-page .messages > .is-arriving { animation: none !important; }
  .dm-typing-bubble i { animation-duration: 2.2s; }
}

/* ── 맨 아래로 버튼 — Figma 501:177003. 위 GNB 버튼과 같은 44 유리 원형(흰 70% · 흐림 5 · 1px 흰 테두리 · 그림자), 입력창 위 16px 가운데.
   아이콘 Mono/System Icon/Arrow Down_line #2E2E2E / 다크 #F2F2F2. 위로 160px 넘게 올라가 있을 때만 살짝 떠오르며 나타난다 ── */
body.figma-chat-page .composer-bar { --scroll-down-gap: 6px; }   /* 모바일: 입력바 위 여백 10 → 입력창 위 16 */
@media (min-width: 701px) { .danmuji-shell .main-chat .composer-bar { --scroll-down-gap: 16px; } }   /* PC: 입력바 위 여백 0 → 입력창 위 16 */
.dm-scroll-down { position: absolute; z-index: 1; bottom: calc(100% + var(--scroll-down-gap, 16px)); left: 50%; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 32px; background: rgba(255, 255, 255, .7) url('assets/figma/composer/scroll-down.svg') center / 24px 24px no-repeat; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 15px rgba(0, 0, 0, .08); cursor: pointer; opacity: 0; pointer-events: none !important; transform: translate(-50%, 8px) scale(.9); transition: opacity .2s, transform .25s cubic-bezier(.34, 1.4, .64, 1); }
.dm-scroll-down.is-shown { opacity: 1; pointer-events: auto !important; transform: translate(-50%, 0); }
@media (hover: hover) { .dm-scroll-down:hover { background-color: rgba(245, 245, 245, .85); } }
.dm-scroll-down:active { transform: translate(-50%, 0) scale(.94); }
:root[data-dm-theme="dark"] .dm-scroll-down { background-color: rgba(32, 32, 32, .7); background-image: url('assets/figma/composer/scroll-down-dark.svg'); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 15px rgba(0, 0, 0, .08); }
@media (prefers-reduced-motion: reduce) { .dm-scroll-down { transition: opacity .2s; } }

/* ── 활동 (DP-003) — Figma 1089:54487 · 1089:53186 · 1035:37178 · 933:40991 / 비었을 때 1111:55854 · 888:29748 · 888:29979 · 888:29916 ──
   모바일: 위 64(뒤로 44 유리 버튼 + 가운데 제목 17), 탭 줄 56(회색 4% 알약 안 흰 칩), 목록 위 10.
   항목: 여백 14 16, 제목 16 SemiBold · ··· 24, 아래 5 에 메타 14 #595959(2px 점·간격 6), 승인 버튼은 14 아래 높이 40 알약 둘(사이 8). 항목 사이 13px 칸 가운데 1px 선(좌우 16 안쪽) */
body.figma-activity-page .danmuji-shell .main-head, body.figma-activity-page .mobile-nav { display: none; }
body.figma-activity-page .danmuji-shell .main-content { padding: 0; }
body.figma-activity-page, body.figma-activity-page .shell, body.figma-activity-page .danmuji-shell .main { background: #fff; }
.dm-activity { --act-ink: #191919; --act-sub: #595959; --act-muted: #767676; --act-line: rgba(0, 0, 0, .04); --act-fill: rgba(0, 0, 0, .04); --act-chip: #fff; --act-alert: #ff472b; --act-strong: #2e2e2e; --act-on-strong: #fff;
  min-height: 100dvh; padding-bottom: calc(16px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))); background: #fff; color: var(--act-ink); }
.dm-activity :where(button) { font-family: inherit; cursor: pointer; }
.dm-act-top { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 16px; background: #fff; }
.dm-act-top h1 { margin: 0; font-size: 17px; font-weight: 600; line-height: normal; }
.dm-act-back { position: absolute; top: 10px; left: 16px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 32px; background: rgba(255, 255, 255, .7) url('assets/figma/activity/back.svg') center / 24px 24px no-repeat; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); }
.dm-act-tabbar { position: sticky; z-index: 3; top: 64px; padding: 6px 16px; background: #fff; }
.dm-act-tabs { position: relative; display: flex; padding: 4px; border-radius: 100px; background: var(--act-fill); }
/* 고른 칩 = 미끄러지는 흰 알약 하나(칸 수·순서는 --tab-count · --tab-index). 살짝 넘쳤다 자리 잡는 0.26초 */
.dm-act-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--tab-count, 4)); border-radius: 100px; background: var(--act-chip); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); transform: translateX(calc(100% * var(--tab-index, 0))); transition: transform .26s cubic-bezier(.34, 1.2, .64, 1); }
@media (prefers-reduced-motion: reduce) { .dm-act-pill { transition: none; } }
.dm-act-tabs button { position: relative; flex: 1 0 0; min-width: 0; height: 36px; padding: 0 17px; border: 0; border-radius: 100px; background: none; color: var(--act-sub); font-size: 14px; font-weight: 600; line-height: normal; white-space: nowrap; transition: color .2s; }
.dm-act-tabs button[aria-selected="true"] { color: var(--act-ink); }
@media (hover: hover) { .dm-act-tabs button[aria-selected="false"]:hover { color: var(--act-ink); } }
.dm-act-list { margin: 0; padding: 10px 0 0; list-style: none; }
.dm-act-item { position: relative; display: flex; flex-direction: column; padding: 14px 16px; }
.dm-act-item + .dm-act-item { margin-top: 13px; }
.dm-act-item + .dm-act-item::before { content: ''; position: absolute; top: -7px; right: 16px; left: 16px; height: 1px; background: var(--act-line); }
.dm-act-head { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.dm-act-head strong { flex: 1; min-width: 0; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; }
.dm-act-head strong.is-alert { color: var(--act-alert); }
.dm-act-more { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 8px; background: url('assets/figma/activity/more.svg') center / 24px 24px no-repeat; transition: background-color .15s; }
@media (hover: hover) { .dm-act-more:hover { background-color: var(--act-fill); } }
.dm-act-meta { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; color: var(--act-sub); font-size: 14px; line-height: 17px; white-space: nowrap; }
.dm-act-meta span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dm-act-dot { flex: none; width: 2px; height: 2px; border-radius: 50%; background: #b2b2b2; }
.dm-act-buttons { display: flex; gap: 8px; margin-top: 14px; }
.dm-act-buttons:empty { display: none; }
.dm-act-buttons button { height: 40px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--act-fill); color: var(--act-ink); font-size: 14px; font-weight: 500; line-height: 14px; transition: background-color .15s, opacity .15s; }
.dm-act-buttons button.is-primary { background: var(--act-strong); color: var(--act-on-strong); }
.dm-act-buttons button:disabled { opacity: .5; cursor: default; }
@media (hover: hover) { .dm-act-buttons button:not(.is-primary):hover { background: rgba(0, 0, 0, .08); } .dm-act-buttons button.is-primary:hover { background: #424242; } }
/* ··· 메뉴 — Figma 1119:60802(대화 보기 · 삭제) / 예약 1119:60878(대화 보기 · 일시 정지 · 다시 시작 · 삭제).
   흰색(다크 #2E2E2E), 반경 16, 그림자 0 0 40 10%, 폭 160~250. 항목: 여백 12 16, 24 아이콘 + 12 + 16 Medium 행간 1.5, 사이 0.5px 8% 선. 삭제는 #F4551E(다크 #FF7849) */
.dm-act-menu { position: absolute; z-index: 4; top: 40px; right: 12px; display: flex; flex-direction: column; width: 200px; min-width: 160px; max-width: 250px; overflow: hidden; border-radius: 16px; background: var(--act-menu, #fff); box-shadow: 0 0 40px rgba(0, 0, 0, .1); }
.dm-act-menu button { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-radius: 0; background: none; color: var(--act-ink); font-size: 16px; font-weight: 500; line-height: 1.5; text-align: left; white-space: nowrap; transition: background-color .15s; }
.dm-act-menu button + button { border-top: .5px solid var(--act-menu-line, rgba(0, 0, 0, .08)); }   /* 항목 48 + 사이 0.5 → 4개일 때 193.5 */
.dm-act-menu button[class*="is-"]::before { content: ''; flex: none; width: 24px; height: 24px; background-position: center; background-size: 24px 24px; background-repeat: no-repeat; }
.dm-act-menu .is-chat::before { background-image: url('assets/figma/activity/menu-chat.svg'); }
.dm-act-menu .is-pause::before { background-image: url('assets/figma/activity/menu-pause.svg'); }
.dm-act-menu .is-play::before { background-image: url('assets/figma/activity/menu-play.svg'); }
.dm-act-menu .is-trash::before { background-image: url('assets/figma/activity/menu-trash.svg'); }
.dm-act-menu .is-trash, .dm-act-menu .is-danger { color: var(--act-danger, #f4551e); }
@media (hover: hover) { .dm-act-menu button:hover { background: var(--act-fill); } }
.dm-act-menu button:active { background: var(--act-fill); }
:root[data-dm-theme="dark"] .dm-activity { --act-menu: #2e2e2e; --act-menu-line: rgba(255, 255, 255, .12); --act-danger: #ff7849; }
:root[data-dm-theme="dark"] .dm-act-menu .is-chat::before { background-image: url('assets/figma/activity/menu-chat-dark.svg'); }
:root[data-dm-theme="dark"] .dm-act-menu .is-pause::before { background-image: url('assets/figma/activity/menu-pause-dark.svg'); }
:root[data-dm-theme="dark"] .dm-act-menu .is-play::before { background-image: url('assets/figma/activity/menu-play-dark.svg'); }
:root[data-dm-theme="dark"] .dm-act-menu .is-trash::before { background-image: url('assets/figma/activity/menu-trash-dark.svg'); }
.dm-act-item.is-leaving { opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .2s; }
/* 비었을 때: 목록 자리 위 200 에 제목 19 SemiBold #2E2E2E · 10 · 설명 15 #767676 · 24 · 검정 알약 버튼(90%) 15 Medium */
.dm-act-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 200px 52px 16px; text-align: center; }
.dm-act-empty h2 { margin: 0; color: var(--act-strong); font-size: 19px; font-weight: 600; line-height: 1.56; }
.dm-act-empty p { margin: 0; color: var(--act-muted); font-size: 15px; line-height: 1.54; word-break: keep-all; }
.dm-act-empty button { margin-top: 14px; padding: 12px 20px; border: 0; border-radius: 999px; background: #000; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.54; opacity: .9; }
@media (hover: hover) { .dm-act-empty button:hover { opacity: 1; } }
/* PC — 사이드바 옆 본문 가운데 700px 칸(채팅과 같은 너비). 뒤로 버튼 대신 왼쪽 큰 제목, 탭은 칸 너비 그대로, 비었을 때는 위 160 */
@media (min-width: 701px) {
  .dm-activity { max-width: 700px; margin: 0 auto; padding-top: 40px; }
  .dm-act-top { justify-content: flex-start; height: auto; padding: 0 16px 20px; }
  .dm-act-top h1 { font-size: 24px; font-weight: 700; }
  /* PC 뒤로 — 모바일 GNB 의 유리 뒤로 버튼(44, 그라데이션 테두리) 그대로, 큰 제목 왼쪽에 사이 12 */
  .dm-act-top { align-items: center; gap: 12px; }
  .dm-act-back { position: static; flex: none; }
  .dm-act-tabbar { top: 0; }
  .dm-act-empty { padding-top: 160px; }
}
/* 다크 */
:root[data-dm-theme="dark"] body.figma-activity-page, :root[data-dm-theme="dark"] body.figma-activity-page .shell, :root[data-dm-theme="dark"] body.figma-activity-page .danmuji-shell .main { background: #080808; }
:root[data-dm-theme="dark"] .dm-activity { --act-ink: #f2f2f2; --act-sub: #c9c9c9; --act-muted: #a6a6a6; --act-line: rgba(255, 255, 255, .08); --act-fill: rgba(255, 255, 255, .08); --act-chip: #080808; --act-alert: #ff7849; --act-strong: #eeeeee; --act-on-strong: #282828; background: #080808; }
:root[data-dm-theme="dark"] .dm-act-top { background: #080808; }
:root[data-dm-theme="dark"] .dm-act-tabbar { background: #080808; }
:root[data-dm-theme="dark"] .dm-act-back { background-color: rgba(32, 32, 32, .7); background-image: url('assets/figma/activity/back-dark.svg'); box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .05); }
:root[data-dm-theme="dark"] .dm-act-more { background-image: url('assets/figma/activity/more-dark.svg'); }
:root[data-dm-theme="dark"] .dm-act-dot { background: #7c7c7c; }
:root[data-dm-theme="dark"] .dm-act-empty button { background: #fff; color: #080808; }
@media (hover: hover) { :root[data-dm-theme="dark"] .dm-act-buttons button:not(.is-primary):hover { background: rgba(255, 255, 255, .12); } :root[data-dm-theme="dark"] .dm-act-buttons button.is-primary:hover { background: #dfdfdf; } }

/* ── 보관함 (DP-003) — Figma 상품 888:37975 · 이미지 888:38105 · 파일 933:39814 / 비었을 때 933:39935 · 933:40065 · 933:40127. 틀은 활동과 같음 ──
   목록: 위아래 10, 항목 사이 16, 좌우 16. 상품·파일: 80 상자(반경 16, 1px 4% 테두리) + 16 + 글(오른쪽 36 비움) + ··· 24 */
.dm-lib-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 10px 16px; list-style: none; }
.dm-lib-list > li { position: relative; display: flex; align-items: center; gap: 16px; }
.dm-lib-thumb, .dm-lib-tile { position: relative; flex: none; box-sizing: border-box; width: 80px; height: 80px; overflow: hidden; border: 1px solid var(--act-fill); border-radius: 16px; }
.dm-lib-thumb { background: #f6f7fa; }
.dm-lib-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dm-lib-tile { background: var(--act-tile, #fff) center / 46px 46px no-repeat; }
.dm-lib-tile.is-pdf { background-image: url('assets/figma/library/file-pdf.svg'); }
.dm-lib-tile.is-sheet { background-image: url('assets/figma/library/file-sheet.svg'); }
.dm-lib-tile.is-docs { background-image: url('assets/figma/library/file-docs.svg'); }
.dm-lib-tile.is-ppt { background-image: url('assets/figma/library/file-ppt.svg'); }
.dm-lib-tile.is-etc { background-image: url('assets/figma/library/file-etc.svg'); }
.dm-lib-text { display: flex; flex: 1; flex-direction: column; min-width: 0; padding-right: 36px; }
.dm-lib-list > li > .dm-act-more { position: absolute; top: 6px; right: 0; }   /* 글 묶음 맨 위 근처(Figma: 글 위 -2 · -5) */
/* 상품: 가게 13 #595959 · 4 · 이름 16 · 5 · 가격 17 Bold(「원」 SemiBold) */
.dm-lib-product .dm-lib-text small { color: var(--act-sub); font-size: 13px; line-height: normal; }
.dm-lib-product .dm-lib-text strong { margin-top: 4px; overflow: hidden; font-size: 16px; font-weight: 400; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
.dm-lib-product .dm-lib-text b { margin-top: 5px; font-size: 17px; font-weight: 700; line-height: normal; }
.dm-lib-product .dm-lib-text b span { font-weight: 600; }
/* 파일: 이름 16 SemiBold 두 줄까지(어디서든 줄바꿈) · 4 · 용량·확장자 13 */
.dm-lib-file .dm-lib-text strong { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 600; line-height: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dm-lib-file .dm-act-meta { margin-top: 4px; font-size: 13px; line-height: normal; }
.dm-lib-list .dm-act-menu { top: 28px; right: -4px; }
/* 이미지: 두 줄 엇갈림(가로 (칸-10)/2, 사이 10), 반경 16, 사진 원래 비율 */
.dm-lib-photos { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; }
.dm-lib-photos > div { display: flex; flex: 1 0 0; flex-direction: column; gap: 10px; min-width: 0; }
.dm-lib-photo { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #f6f7fa; }
.dm-lib-photo::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(0, 0, 0, .04); border-radius: inherit; pointer-events: none; }
.dm-lib-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .dm-lib-photo img { transition: transform .3s; } .dm-lib-photo:hover img { transform: scale(1.02); } }
/* 비었을 때(버튼 없음): 목록 자리 위 240 */
.dm-act-empty.is-quiet { padding-top: 241px; }
@media (min-width: 701px) { .dm-act-empty.is-quiet { padding-top: 160px; } }
:root[data-dm-theme="dark"] .dm-library { --act-tile: #202020; }
:root[data-dm-theme="dark"] .dm-lib-thumb, :root[data-dm-theme="dark"] .dm-lib-photo { background-color: #202020; }

/* ── 앱 및 서비스 연결 (DP-003) — Figma 1119:61224. 틀은 활동과 같음(PC 700 칸) ──
   위 오른쪽 「MY」 44 유리 버튼(연결한 것만 보기). 분류 칩: 위 6 · 아래 12 · 좌우 16, 사이 8, 15 SemiBold, 회색 4% / 고른 칩 검정 흰 글, 가로로 넘김.
   목록 줄: 여백 12 16, 48 둥근 로고(1px 4% 테두리) + 16 + 이름 16 SemiBold · 5 · 설명 13 #595959 한 줄 + 12 + 알약 버튼 13(여백 6.5 14) */
.dm-conn-chips { position: sticky; z-index: 3; top: 64px; display: flex; gap: 8px; padding: 6px 16px 12px; overflow-x: auto; background: #fff; scrollbar-width: none; }
.dm-conn-chips::-webkit-scrollbar { display: none; }
.dm-conn-chip { flex: none; padding: 9.5px 17px; border: 0; border-radius: 100px; background: var(--act-fill); color: var(--act-sub); font-size: 15px; font-weight: 600; line-height: 1.54; transition: background-color .2s, color .2s; }
.dm-conn-chip[aria-pressed="true"] { background: var(--act-ink); color: #fff; }
@media (hover: hover) { .dm-conn-chip[aria-pressed="false"]:hover { background: rgba(0, 0, 0, .08); } }
.dm-conn-list { margin: 0; padding: 0; list-style: none; }
.dm-conn-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.dm-conn-open { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.dm-conn-logo { position: relative; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: #fff; }
.dm-conn-logo::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--act-fill, rgba(0, 0, 0, .04)); border-radius: 50%; pointer-events: none; }
.dm-conn-logo .connection-icon { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; font-size: 18px; font-weight: 700; }
.dm-conn-text { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.dm-conn-text strong { overflow: hidden; font-size: 16px; font-weight: 600; line-height: normal; letter-spacing: .16px; text-overflow: ellipsis; white-space: nowrap; }
.dm-conn-text small { overflow: hidden; color: var(--act-sub); font-size: 13px; line-height: normal; letter-spacing: .13px; text-overflow: ellipsis; white-space: nowrap; }
.dm-conn-text small em { color: var(--act-alert); font-style: normal; }
.dm-conn-btn { flex: none; padding: 6.5px 14px; border: 0; border-radius: 24px; background: var(--act-ink); color: #fff; font-size: 13px; font-weight: 600; line-height: 21px; white-space: nowrap; transition: background-color .15s; }
.dm-conn-btn.is-done { background: var(--act-fill); color: var(--act-ink); font-weight: 500; }
.dm-conn-btn.is-soon { background: var(--act-fill); color: #b2b2b2; font-weight: 500; }
@media (hover: hover) { button.dm-conn-btn:not(.is-done):hover { background: #424242; } .dm-conn-btn.is-done:hover { background: rgba(0, 0, 0, .08); } }
@media (min-width: 701px) { .dm-conn-chips { top: 0; } }
:root[data-dm-theme="dark"] .dm-conn-chips { background: #080808; }
:root[data-dm-theme="dark"] .dm-conn-chip[aria-pressed="true"], :root[data-dm-theme="dark"] .dm-conn-btn:not(.is-done):not(.is-soon) { color: #080808; }
:root[data-dm-theme="dark"] .dm-conn-logo { background: #202020; }
:root[data-dm-theme="dark"] .dm-conn-btn.is-soon { color: #7c7c7c; }

/* ── 연결 시트 (DP-003) — Figma 1140:63698 연결 전 · 1140:63422 연결됨 · 1140:63981 준비중. 시트 틀(손잡이·반경 32·PC 다이얼로그)은 전화·예약 시트와 같음 ──
   모바일 높이 800(852 화면에서 위 52 남김). 본문 위 24 · 좌우 20, 묶음 사이 36:
   [좌우 4: 로고 80 · 16 · 이름 22 Bold · 6 · 주소 13 #595959 · 16 · 설명 15 행간 1.58] 20 [버튼 높이 48 반경 100: 연결하기 검정 / 연결됨 8% / 준비중 8% 글자 #B2B2B2]
   [섹션 사이 30: 제목 14 SemiBold 좌우 4 · 10 · 상자(3% 바탕, 반경 24, 여백 18 22): 항목 위아래 6, 제목 15 SemiBold · 2 · 설명 13 #595959, 항목 사이 13 칸 가운데 1px 4% 선]
   비어 있는 상자는 높이 80, 가운데 13 #949494. */
.dm-conn-sheet .dm-sheet-head { display: none; }
@media (max-width: 700px) { .dm-conn-sheet { height: calc(100dvh - 52px); } }
.dm-conn-sheet-body { display: flex; flex-direction: column; gap: 36px; padding: 24px 20px 32px; }
.dm-conn-sheet-top { display: flex; flex-direction: column; gap: 20px; }
.dm-conn-sheet-id { display: flex; flex-direction: column; gap: 16px; padding: 0 4px; }
.dm-conn-logo.is-lg { width: 80px; height: 80px; }
.dm-conn-logo.is-lg::after { border-width: 1px; }
.dm-conn-sheet-name { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dm-conn-sheet-name strong { overflow: hidden; font-size: 22px; font-weight: 700; line-height: normal; letter-spacing: .22px; text-overflow: ellipsis; white-space: nowrap; }
.dm-conn-sheet-name small { overflow: hidden; color: #595959; font-size: 13px; line-height: normal; letter-spacing: .13px; text-overflow: ellipsis; white-space: nowrap; }
.dm-conn-sheet-desc { margin: 0; font-size: 15px; line-height: 1.58; }
.dm-conn-cta { width: 100%; height: 48px; padding: 0 20px; border: 0; border-radius: 100px; background: #191919; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.3px; cursor: pointer; transition: background-color .15s; }
.dm-conn-cta.is-done, .dm-conn-cta.is-soon { background: rgba(0, 0, 0, .08); color: #191919; }
.dm-conn-cta.is-soon { color: #b2b2b2; opacity: 1; cursor: default; }
@media (hover: hover) { .dm-conn-cta:not(.is-done):not(.is-soon):hover { background: #424242; } .dm-conn-cta.is-done:hover { background: rgba(0, 0, 0, .12); } }
.dm-conn-sheet-more { display: flex; flex-direction: column; gap: 30px; }
.dm-conn-sheet-can { display: flex; flex-direction: column; gap: 10px; }
.dm-conn-sheet-can h3 { margin: 0; padding: 0 4px; color: #191919; font-size: 14px; font-weight: 600; line-height: 1.5; }
.dm-conn-box { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; border-radius: 24px; background: rgba(0, 0, 0, .03); }
.dm-conn-box p { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 6px 0; line-height: 1.5; }
.dm-conn-box p + p { position: relative; margin-top: 17px; }   /* 항목 · 2 · 구분선 칸 13(선은 가운데) · 2 · 항목 */
.dm-conn-box p + p::before { content: ''; position: absolute; top: -9px; right: 0; left: 0; height: 1px; background: rgba(0, 0, 0, .04); }
.dm-conn-box strong { font-size: 15px; font-weight: 600; }
.dm-conn-box span { color: #595959; font-size: 13px; }
.dm-conn-box.is-empty { height: 80px; }
.dm-conn-box.is-empty p { color: #949494; font-size: 13px; text-align: center; }
.dm-conn-sheet .dm-conn-logo { background: #fff; }
.dm-conn-sheet .dm-conn-logo .connection-icon { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 701px) { .dm-conn-sheet .dm-sheet-head { display: flex; justify-content: flex-end; padding-bottom: 0; } .dm-conn-sheet .dm-sheet-head .dm-sheet-title { display: none; } .dm-conn-sheet-body { padding: 0 30px 30px; } }
:root[data-dm-theme="dark"] .dm-conn-sheet-can h3 { color: #f2f2f2; }
:root[data-dm-theme="dark"] .dm-conn-box span, :root[data-dm-theme="dark"] .dm-conn-sheet-name small { color: #c9c9c9; }
:root[data-dm-theme="dark"] .dm-conn-box { background: rgba(255, 255, 255, .06); }
:root[data-dm-theme="dark"] .dm-conn-box p + p::before { background: rgba(255, 255, 255, .08); }
:root[data-dm-theme="dark"] .dm-conn-box.is-empty p { color: #828282; }
:root[data-dm-theme="dark"] .dm-conn-cta { background: #f2f2f2; color: #282828; }
:root[data-dm-theme="dark"] .dm-conn-cta.is-done { background: rgba(255, 255, 255, .12); color: #f2f2f2; }
:root[data-dm-theme="dark"] .dm-conn-cta.is-soon { background: rgba(255, 255, 255, .12); color: #7c7c7c; }
:root[data-dm-theme="dark"] .dm-conn-sheet .dm-conn-logo { background: #202020; }

/* ── GNB 유리 원형 버튼 테두리 — Figma GNB Btn(1078:59378 · 다크 1029:39300) 은 흰 단색이 아니라 1px 선형 그라데이션 ──
   왼쪽 위 → 오른쪽 아래(137°). 라이트: 선 투명도 70% × [흰 100% → 0%(가운데) → 0% → 100%], 다크: 25% × [80% → 10% → 10% → 100%].
   CSS 에서는 버튼 위에 1px 고리(::after, 안쪽을 마스크로 비움)로 그린다. 그라데이션 축 위치는 Figma 좌표(22.3,20.7 → 51.7,52.5)를 그대로 옮긴 16% → 85.5% */
body.figma-chat-page .figma-chat-head :is(.figma-close, .figma-back, .figma-chat-actions button), .figma-desktop-chat-head button { position: relative; }
:is(body.figma-chat-page .figma-chat-head .figma-close, body.figma-chat-page .figma-chat-head .figma-back, body.figma-chat-page .figma-chat-head .figma-chat-actions button, .figma-desktop-chat-head button, .dm-menu-back, .figma-auth-close, .dm-scroll-down, .dm-act-back)::after {
  content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(137deg, rgba(255, 255, 255, .7) 16%, rgba(255, 255, 255, 0) 50.8%, rgba(255, 255, 255, 0) 68.1%, rgba(255, 255, 255, .7) 85.5%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:root[data-dm-theme="dark"] :is(body.figma-chat-page .figma-chat-head .figma-close, body.figma-chat-page .figma-chat-head .figma-back, body.figma-chat-page .figma-chat-head .figma-chat-actions button, .figma-desktop-chat-head button, .dm-menu-back, .figma-auth-close, .dm-scroll-down, .dm-act-back)::after {
  background: linear-gradient(137deg, rgba(255, 255, 255, .2) 16%, rgba(255, 255, 255, .025) 29.9%, rgba(255, 255, 255, .025) 71.6%, rgba(255, 255, 255, .25) 85.5%);
}

/* ── 설정 (Figma 912:61185) — 활동 틀(뒤로 · 가운데 제목) 위에 묶음 목록. 헤더 아래 19 띄우고 시작.
   묶음 제목 14 SemiBold 행간 1.32 #767676(위아래 8 · 좌우 20) · 줄 16 Medium 행간 24(위아래 13 · 좌우 20, 누르면 4% 바탕)
   묶음 사이 높이 41 칸 가운데(좌우 16) 1px 3% 선. 오른쪽 값 15 #767676, 「준비중」 14 #B2B2B2. 화면 모드는 dm-picker 를 줄 바로 아래에 ── */
.dm-set-group { position: relative; display: flex; flex-direction: column; }
.dm-settings > .dm-set-group:first-of-type { margin-top: 19px; }
.dm-set-group h2 { margin: 0; padding: 8px 20px; color: #767676; font-size: 14px; font-weight: 600; line-height: 1.32; }
.dm-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 20px; border: 0; background: none; color: var(--act-ink); font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; cursor: pointer; transition: background-color .15s; }
.dm-set-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-set-row small { flex: none; color: #767676; font-size: 15px; font-weight: 400; }
.dm-set-soon { flex: none; color: #b2b2b2; font-size: 14px; font-style: normal; font-weight: 400; }
/* hover·pressed — 위젯 목록 줄과 같은 규칙: 줄 안쪽 좌우 8 띄운 반경 12 상자, hover 4% / 누름·열림 8% (다크 8% / 12%) */
.dm-set-row { position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.dm-set-row::before { content: ''; position: absolute; z-index: -1; inset: 0 8px; border-radius: 12px; background: transparent; transition: background-color .15s; }
@media (hover: hover) { .dm-set-row:hover::before { background: rgba(0, 0, 0, .04); } }
.dm-set-row:active::before, .dm-set-row[aria-expanded="true"]::before { background: rgba(0, 0, 0, .08); }
.dm-set-row:focus-visible { outline: none; }
.dm-set-row:focus-visible::before { box-shadow: 0 0 0 2px var(--act-ink); }
@media (hover: hover) { :root[data-dm-theme="dark"] .dm-set-row:hover::before { background: rgba(255, 255, 255, .08); } }
:root[data-dm-theme="dark"] .dm-set-row:active::before, :root[data-dm-theme="dark"] .dm-set-row[aria-expanded="true"]::before { background: rgba(255, 255, 255, .12); }
.dm-set-divider { height: 1px; margin: 20px 16px; border: 0; background: rgba(0, 0, 0, .03); }
.dm-settings .dm-picker { right: 16px; bottom: auto; transform: translateY(-6px) scale(.97); }
.dm-settings .dm-picker.is-open { transform: none; }
@media (min-width: 701px) { .dm-settings > .dm-set-group:first-of-type { margin-top: 0; } }
:root[data-dm-theme="dark"] .dm-set-group h2, :root[data-dm-theme="dark"] .dm-set-row small { color: #a6a6a6; }
:root[data-dm-theme="dark"] .dm-set-soon { color: #7c7c7c; }
:root[data-dm-theme="dark"] .dm-set-divider { background: rgba(255, 255, 255, .06); }

/* ── 설정 상세 — 설정과 같은 머리, 본문은 헤더 아래 19 띄우고. 기존 dev 화면(기억·보안 정보·계정 설정)은 좌우 16 안에 그대로 ── */
.dm-set-body { padding-top: 19px; }
.dm-set-body > :is(.panel, .grid, .list) { margin-right: 16px; margin-left: 16px; }
.dm-set-body .dm-act-empty { padding-top: 181px; }
.dm-set-choice > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-set-choice strong { font-size: 16px; font-weight: 500; line-height: 24px; }
.dm-set-choice > span small { color: #767676; font-size: 13px; font-weight: 400; line-height: 1.5; }
.dm-set-choice[aria-checked="true"] strong { font-weight: 600; }
.dm-set-choice[aria-checked="true"]::after { content: ''; flex: none; width: 24px; height: 24px; background: url('assets/figma/icons/check.svg') center / 24px 24px no-repeat; }
@media (min-width: 701px) { .dm-set-body { padding-top: 0; } .dm-set-body .dm-act-empty { padding-top: 160px; } }
:root[data-dm-theme="dark"] .dm-set-choice > span small { color: #a6a6a6; }
:root[data-dm-theme="dark"] .dm-set-choice[aria-checked="true"]::after { background-image: url('assets/figma/icons/check-dark.svg'); }

/* ── 알림 — 고르기 줄(화면 모드와 같음) 아래 「이렇게 알려 드려요」 상자(연결 시트 상자) + 도움말 13 #767676, 조용한 시간은 스위치 줄 ── */
.dm-set-box { display: flex; flex-direction: column; gap: 8px; padding: 6px 16px 0; }   /* 상자 바깥선은 뒤로 버튼·구분선과 같은 16 */
.dm-set-box .dm-conn-box { padding: 12px 18px; border-radius: 20px; }
.dm-set-note { margin: 0; padding: 0 4px; color: #767676; font-size: 13px; line-height: 1.5; }
.dm-set-switch { cursor: pointer; }
.dm-set-switch > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-set-switch strong { font-size: 16px; font-weight: 500; line-height: 24px; }
.dm-set-switch > span small { color: #767676; font-size: 13px; font-weight: 400; line-height: 1.5; }
/* 스위치 51×31 — 꺼짐 12% 회색, 켜짐 검정(주 버튼과 같은 #191919), 동그라미 27 흰색 */
.dm-switch { position: relative; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 100px; background: rgba(0, 0, 0, .12); cursor: pointer; transition: background-color .2s; -webkit-appearance: none; appearance: none; }
.dm-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .06); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.dm-switch:checked { background: #191919; }
.dm-switch:checked::after { transform: translateX(20px); }
.dm-switch:focus-visible { outline: 2px solid var(--act-ink); outline-offset: 2px; }
.dm-set-pick { position: relative; }
.dm-set-pick .dm-picker { right: 16px; }
.dm-picker.is-from, .dm-picker.is-until { width: 248px; }
:root[data-dm-theme="dark"] .dm-set-note, :root[data-dm-theme="dark"] .dm-set-switch > span small { color: #a6a6a6; }
:root[data-dm-theme="dark"] .dm-switch { background: rgba(255, 255, 255, .16); }
:root[data-dm-theme="dark"] .dm-switch:checked { background: #f2f2f2; }
:root[data-dm-theme="dark"] .dm-switch:checked::after { background: #282828; }

/* 헤더 글자는 자간 없이(0) — 화면 제목·시트 제목·예전 상세 화면 머리 모두 */
.main-head h1, .main-head .mobile-brand { letter-spacing: 0; }

/* ── 설정 상세(메모리 · 결제 수단 · 개인 정보 · 성격과 말투 · 내보내기와 가져오기) — 설정 줄 · 활동 줄 · 연결 칩/알약/상자 · 스위치 재사용 ── */
.dm-set-note.is-pad { padding: 8px 20px 0; }
.dm-set-row.is-danger { color: var(--act-alert); }
.dm-set-row.is-static { cursor: default; }
.dm-set-row.is-static::before { content: none; }
.dm-set-choice.is-static .dm-conn-btn { flex: none; }
.dm-set-group .dm-act-list { padding-top: 0; }
/* 누르면 고치는 기억 줄 — 설정 줄과 같은 hover·누름 상자(좌우 8, 반경 12) */
.dm-act-item.is-tap { isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dm-act-item.is-tap::after { content: ''; position: absolute; z-index: -1; inset: 0 8px; border-radius: 12px; background: transparent; transition: background-color .15s; }
@media (hover: hover) { .dm-act-item.is-tap:hover::after { background: rgba(0, 0, 0, .04); } }
.dm-act-item.is-tap:active::after { background: rgba(0, 0, 0, .08); }
.dm-act-item.is-tap:focus-visible { outline: none; }
.dm-act-item.is-tap:focus-visible::after { box-shadow: 0 0 0 2px var(--act-ink); }
/* 정보 추가 시트 — 종류 칩은 줄바꿈되는 칩 묶음, 칸은 사이 12 */
.dm-conn-chips.is-sheet { position: static; flex-wrap: wrap; padding: 0; overflow: visible; background: none; }
.dm-vault-fields { display: flex; flex-direction: column; gap: 12px; }
.dm-vault-fields[hidden] { display: none; }
.dm-vault-sheet .dm-set-note { padding: 0 4px; }
@media (hover: hover) { :root[data-dm-theme="dark"] .dm-act-item.is-tap:hover::after { background: rgba(255, 255, 255, .08); } }
:root[data-dm-theme="dark"] .dm-act-item.is-tap:active::after { background: rgba(255, 255, 255, .12); }
:root[data-dm-theme="dark"] .dm-conn-chips.is-sheet { background: none; }
.dm-vault-sheet { --act-ink: #191919; --act-sub: #595959; --act-fill: rgba(0, 0, 0, .04); }
:root[data-dm-theme="dark"] .dm-vault-sheet { --act-ink: #f2f2f2; --act-sub: #c9c9c9; --act-fill: rgba(255, 255, 255, .08); }
/* 로그인 마스코트 모션(해냈어요 002, 정사각 400) — 움직임이 판 위끝까지 닿아 잘리지 않게, 시안의 상자(모바일 140 · PC 170)를 정사각 그대로 채움 */
.figma-auth-brand > img.figma-auth-mascot { box-sizing: border-box; width: 140px; height: 140px; padding: 0; object-fit: contain; }
@media (min-width: 701px) { .figma-auth-brand > img.figma-auth-mascot { width: 170px; height: 170px; padding: 0; } }

/* ── 토스트 — Figma 1140:65115 (1177:14948): 유리 rgba(72,74,85,.5)+흰 10%, 블러 10, 반경 20, 여백 16, 14 Medium 흰 글자 가운데(두 줄까지),
   너비 88~351, 화면 위 52(모바일 GNB 아래쪽에 걸침) · PC 위 24. 나타날 때 살짝 내려오며 나타나고 사라질 때 흐려짐 ── */
.toast.dm-toast { position: fixed; z-index: 90; top: calc(52px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; box-sizing: border-box; width: max-content; min-width: 88px; max-width: min(351px, calc(100vw - 24px)); max-height: none; padding: 16px; border-radius: 20px; background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), rgba(72, 74, 85, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; color: #fff; font-size: 14px; font-weight: 500; line-height: normal; text-align: center; word-break: keep-all; opacity: 0; transform: translate(-50%, -6px); transition: opacity .2s, transform .2s ease-out; pointer-events: none; }
.toast.dm-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 701px) { .toast.dm-toast { top: 24px; } }
@media (prefers-reduced-motion: reduce) { .toast.dm-toast { transition: opacity .2s; transform: translate(-50%, 0); } }

/* ── 오류 화면 (Figma 1140:65059 · 65073 · 65087 · 65101) — 빈 화면 글 + 회색 알약. 제목 위치는 시안대로 화면 가운데에서 위로 161(점검은 버튼이 없어 141) ── */
.dm-error .dm-act-empty { padding-top: max(96px, calc(50dvh - 161px)); }
.dm-error.is-maintenance .dm-act-empty { padding-top: max(96px, calc(50dvh - 141px)); }
.dm-act-empty button.is-soft { background: var(--act-fill); color: var(--act-ink); }
@media (hover: hover) { .dm-act-empty button.is-soft:hover { background: rgba(0, 0, 0, .08); } }
:root[data-dm-theme="dark"] .dm-act-empty button.is-soft:hover { background: rgba(255, 255, 255, .12); }
:root[data-dm-theme="dark"] .dm-act-empty button.is-soft { background: rgba(255, 255, 255, .08); color: #f2f2f2; }
.dm-error .dm-act-empty p { word-break: keep-all; }

/* 설정 상세의 활동 줄은 설정 줄과 같은 좌우 20 — 묶음 제목(좌우 20)과 글 시작을 맞춤 */
.dm-set-group .dm-act-item { padding-right: 20px; padding-left: 20px; }
.dm-set-group .dm-act-item + .dm-act-item::before { right: 20px; left: 20px; }
.dm-set-group .dm-act-menu { right: 16px; }
.dm-act-meta:empty { display: none; }
/* ··· 메뉴가 열린 줄은 아래 줄들보다 위로 — 메뉴 층이 다음 줄의 ··· 에 가리지 않게 */
.dm-act-item:has(.dm-act-more[aria-expanded="true"]) { z-index: 6; }
/* 카드 추가 창 — 칸마다 이름, 유효기간 · CVC 두 칸 나란히 */
.dm-card-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-card-sheet .dm-sheet-input { font-weight: 500; letter-spacing: .02em; }
/* 「추가하기」 줄 — 앞에 + (입력창과 같은 Figma Plus01_line 20) */
.dm-set-add > span { display: inline-flex; align-items: center; gap: 8px; }
.dm-set-add i { flex: none; width: 20px; height: 20px; background: url('assets/figma/composer/plus.svg') center / 20px 20px no-repeat; }
:root[data-dm-theme="dark"] .dm-set-add i { background-image: url('assets/figma/composer/plus-dark.svg'); }
/* 일일 사용량 — 연결 시트 상자 안에 오늘 사용 % · 남음, 막대(높이 6, 검정), 다시 채워지는 때 */
.dm-usage { gap: 12px; padding: 20px 22px; }
.dm-usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dm-usage-head strong { font-size: 17px; font-weight: 600; }
.dm-usage-head span { color: #767676; font-size: 14px; }
.dm-usage-track { display: block; height: 6px; overflow: hidden; border-radius: 100px; background: rgba(0, 0, 0, .06); }
.dm-usage-track span { display: block; height: 100%; border-radius: inherit; background: #191919; }
.dm-usage.is-reached .dm-usage-track span { background: var(--act-alert, #ff472b); }
.dm-usage-note { margin: 0; padding: 0 !important; color: #767676; font-size: 13px; line-height: 1.5; }
:root[data-dm-theme="dark"] .dm-usage-head span, :root[data-dm-theme="dark"] .dm-usage-note { color: #a6a6a6; }
:root[data-dm-theme="dark"] .dm-usage-track { background: rgba(255, 255, 255, .1); }
:root[data-dm-theme="dark"] .dm-usage-track span { background: #f2f2f2; }
/* 등록된 카드 상자 — 연결 시트 상자(3% 바탕, 반경 24, 여백 18 22) 안에 카드 줄: 이름 15 SemiBold · 2 · 쓰는 서비스 13 #595959, 오른쪽 삭제(Figma Trash 모양, ··· 와 같은 회색 20),
   줄 사이는 상자의 구분선(13 칸 가운데 1px). 아래 「+ 추가하기」와 사이 8 */
.dm-card-list { padding-top: 12px; padding-bottom: 12px; }
.dm-card-item { position: relative; display: flex; align-items: center; gap: 12px; }
.dm-card-item > p { flex: 1; min-width: 0; }
.dm-card-item + .dm-card-item { margin-top: 13px; }
.dm-card-item + .dm-card-item::before { content: ''; position: absolute; top: -7px; right: 0; left: 0; height: 1px; background: rgba(0, 0, 0, .04); }
.dm-card-delete { flex: none; width: 32px; height: 32px; margin-right: -6px; padding: 0; border: 0; border-radius: 8px; background: url('assets/figma/activity/trash.svg') center / 20px 20px no-repeat; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .dm-card-delete:hover { background-color: rgba(0, 0, 0, .04); } }
.dm-card-delete:active { background-color: rgba(0, 0, 0, .08); }
:root[data-dm-theme="dark"] .dm-card-delete { background-image: url('assets/figma/activity/trash-dark.svg'); }
@media (hover: hover) { :root[data-dm-theme="dark"] .dm-card-delete:hover { background-color: rgba(255, 255, 255, .08); } }
.dm-card-list + .dm-set-add, .dm-set-box + .dm-set-add { margin-top: 8px; }
:root[data-dm-theme="dark"] .dm-card-item + .dm-card-item::before { background: rgba(255, 255, 255, .08); }
/* 메모리 맨 위 안내 한 줄 — 좌우 20, 목록과 사이 4 */
.dm-set-body > .dm-set-note.is-lead { margin: 0; padding: 0 20px 6px; }
/* 확인 창(ask · askText) — 모바일도 아래에서 올라오는 시트가 아니라 화면 가운데 다이얼로그(좌우 20, 반경 24) */
@media (max-width: 700px) {
  .dm-dialog { width: calc(100vw - 40px); max-width: 400px; margin: auto; border-radius: 24px; }
  .dm-dialog-body { padding: 28px 20px 20px; }
  .dm-dialog[open] { animation-name: dm-dialog-in; }
}

/* ── 회원 탈퇴 — 설정 상세 틀 + 연결 시트 상자 세 묶음(사이 30) · 이유 고르기 줄 · 입력 상자 · 확인 줄 · 검정 버튼 ── */
.dm-set-note.is-error { color: var(--act-alert, #ff472b); }
.dm-set-note.is-error:empty { display: none; }
.dm-del-info { gap: 30px; padding-top: 10px; }
.dm-del-list p span { line-height: 1.5; }
.dm-del-feedback { height: 140px; }
.dm-del-actions { gap: 12px; padding-top: 4px; padding-bottom: 32px; }
.dm-del-actions .dm-set-note { padding: 0 4px; }
.dm-del-confirm { padding-top: max(96px, calc(50dvh - 161px)); }
.dm-del-confirm .dm-set-note { margin-top: 8px; }
.dm-del-buttons { display: flex; gap: 8px; margin-top: 14px; }
.dm-del-buttons button { margin: 0 !important; }
.dm-act-empty button.is-danger { background: var(--act-alert, #ff472b); color: #fff; opacity: 1; }
:root[data-dm-theme="dark"] .dm-act-empty button.is-danger { background: #ff7849; color: #080808; }
/* 목록(활동 줄) 바로 아래 구분선은 위 여백 없이 — 마지막 줄의 아래 여백(14)이 곧 간격 */
.dm-set-group:has(> .dm-act-list:last-child) + .dm-set-divider { margin-top: 5px; }   /* 마지막 줄 위(구분선 7 + 위 여백 13)와 아래(아래 여백 15 + 5)를 20 으로 같게 */
/* 상자 안 「+ 추가하기」 줄 — 카드 이름과 같은 15 SemiBold, + 20(입력창 Plus01_line), 줄 전체가 누름 영역 */
.dm-card-add { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--act-ink, #191919); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.dm-card-add i { flex: none; width: 20px; height: 20px; background: url('assets/figma/composer/plus.svg') center / 20px 20px no-repeat; }
:root[data-dm-theme="dark"] .dm-card-add i { background-image: url('assets/figma/composer/plus-dark.svg'); }
/* 확인 창의 위험 동작(삭제·로그아웃 등)도 주 버튼과 같은 검정 — 따로 빨강을 쓰지 않음. 탈퇴 마지막 확인 버튼도 같게 */
.dm-dialog.is-danger .dm-dialog-ok, .dm-act-empty button.is-danger { background: #191919; color: #fff; }
:root[data-dm-theme="dark"] .dm-dialog.is-danger .dm-dialog-ok, :root[data-dm-theme="dark"] .dm-act-empty button.is-danger { background: #f2f2f2; color: #282828; }
/* 「+ 추가하기」는 카드 이름보다 한 단계 옅게 — 글자·+ 모두 #767676(다크 #A6A6A6), 굵기 Medium */
.dm-card-add { color: #767676; font-weight: 500; }
.dm-card-add i { background-image: url('assets/figma/composer/plus-muted.svg'); }
:root[data-dm-theme="dark"] .dm-card-add { color: #a6a6a6; }
:root[data-dm-theme="dark"] .dm-card-add i { background-image: url('assets/figma/composer/plus-muted-dark.svg'); }
/* 고르기 줄(화면 모드·알림·성격과 말투·탈퇴 이유·확인 줄) — 선택 안 됨은 같은 자리의 빈 동그라미, 선택되면 체크 */
.dm-set-choice[aria-checked="false"]::after { content: ''; flex: none; width: 24px; height: 24px; background: url('assets/figma/icons/check-empty.svg') center / 24px 24px no-repeat; }
:root[data-dm-theme="dark"] .dm-set-choice[aria-checked="false"]::after { background-image: url('assets/figma/icons/check-empty-dark.svg'); }
/* 누르는 기억 줄 — 제목 줄(16/21)이 날짜 줄(13/17)보다 행간이 커서 글이 아래로 2 치우침 → 위 13 · 아래 15 로 글과 상자 위아래 간격을 맞춤 */
.dm-act-item.is-tap { padding-top: 13px; padding-bottom: 15px; }
.dm-alert-more[hidden] { display: none; }
/* 설정의 시간 고르기(방해 금지 모드 시작·끝) — 위로 열면 고정된 머리에 가려 잘려서, 줄 바로 아래로 열고 머리보다 위에 둠 */
.dm-set-pick .dm-picker { top: calc(100% + 6px); bottom: auto; z-index: 8; transform-origin: top right; }
.dm-set-pick .dm-picker:not(.is-open) { transform: translateY(-6px) scale(.97); }
.dm-set-pick:has(.dm-picker) { z-index: 8; }
.dm-alert-more ~ *, #dm-quiet { position: relative; }
/* 스위치 줄(알림 받기 · 방해 금지 모드 · 알아서 기억하기)은 줄 hover·누름 상자 없이 — 스위치만 반응 */
.dm-set-row.dm-set-switch::before { content: none; }
.dm-set-row.dm-set-switch { cursor: default; }
.dm-set-row.dm-set-switch .dm-switch { cursor: pointer; }
/* 설명 없는 스위치 줄은 다른 줄과 같은 높이 50(스위치 31 + 위아래 9.5) — 알림을 끄면 구분선도 받는 정도와 함께 숨어 두 스위치 줄이 바로 이어짐 */
.dm-set-row.dm-set-switch:not(:has(small)) { padding-top: 9.5px; padding-bottom: 9.5px; }
/* 앱 및 서비스 연결 빈 분류 — 활동 빈 화면과 같은 높이에 제목(모바일·PC 모두 화면 위에서 320). 분류 칩 줄이 탭보다 4 높아 그만큼 덜 띄움 */
.dm-connections .dm-act-empty.is-quiet { padding-top: 196px; }
@media (min-width: 701px) { .dm-connections .dm-act-empty.is-quiet { padding-top: 156px; } }
/* PC 연결 다이얼로그 — 내용 길이와 상관없이 같은 높이(가장 긴 「구글 캘린더」 734). 창이 낮으면 화면 안으로 줄고 안에서 스크롤, 내용은 위에서부터 */
@media (min-width: 701px) { .dm-conn-sheet { height: min(734px, calc(100dvh - 48px)); } }

/* ── 시트·다이얼로그 스크롤 — 시트 전체가 아니라 머리(손잡이·제목)와 아래 버튼 사이 내용만 스크롤. 스크롤바가 둥근 모서리 밖으로 나가지 않게
   스크롤 칸을 오른쪽 4 · (PC) 아래 12 안으로 들이고, 스크롤바는 얇은 회색(4) ── */
.dm-sheet { overflow: hidden; }
.dm-sheet > :is(.dm-sheet-form, .dm-conn-sheet-body) { flex: 1 1 auto; min-height: 0; margin-right: 4px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .16) transparent; }
.dm-sheet > :is(.dm-sheet-form, .dm-conn-sheet-body)::-webkit-scrollbar { width: 4px; }
.dm-sheet > :is(.dm-sheet-form, .dm-conn-sheet-body)::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(0, 0, 0, .16); }
.dm-sheet > .dm-sheet-form { padding-right: 12px; }
.dm-sheet > .dm-conn-sheet-body { padding-right: 16px; }
@media (min-width: 701px) { .dm-sheet > .dm-sheet-form { padding-right: 20px; } .dm-sheet > .dm-conn-sheet-body { margin-bottom: 12px; padding-right: 26px; padding-bottom: 18px; } }
/* 시트 안에서 시간·반복 고르기가 열려 있는 동안에는 잘리지 않게 스크롤 칸을 잠시 풀어 줌 */
.dm-sheet > .dm-sheet-form:has(.dm-picker) { overflow: visible; }
:root[data-dm-theme="dark"] .dm-sheet > :is(.dm-sheet-form, .dm-conn-sheet-body) { scrollbar-color: rgba(255, 255, 255, .2) transparent; }
:root[data-dm-theme="dark"] .dm-sheet > :is(.dm-sheet-form, .dm-conn-sheet-body)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); }
/* 확인 창(ask · askText)도 창은 고정, 글이 길면 안쪽만 스크롤 */
.dm-dialog { overflow: hidden; }
.dm-dialog-body { max-height: calc(100dvh - 64px); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* PC 다크 시트 테두리 — border 1px 이 안쪽 높이를 2 줄여 같은 높이(734)에서 스크롤이 생겼음 → 자리 차지 않는 안쪽 링으로 */
@media (min-width: 701px) {
  :root[data-dm-theme="dark"] .dm-sheet { border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 60px rgba(0, 0, 0, .2); }
}