:root { --ink: #2b2620; --paper: rgba(250, 246, 238, 0.94); --line: rgba(60, 46, 30, 0.16); --accent: #8a5a2b; --mine: #2f7d5b; --other: #b07a52; --acc: #3d6fa8; font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; }
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1117; color: var(--ink); word-break: keep-all; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }
button { font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
#hud { position: fixed; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 0; pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 62vw; padding: 7px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.18); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill span { white-space: nowrap; } .pill #st-place { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.pill .sep { width: 1px; height: 14px; background: var(--line); flex: none; }
.tools { pointer-events: auto; display: flex; gap: 6px; flex: none; }
.tools button { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 2px 10px rgba(0,0,0,.16); font-size: 13px; }
.tools button .ic { font-size: 15px; opacity: .8; } .tools button[aria-pressed="true"] { background: #efe2cc; }
.top-actions { pointer-events: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.top-actions select, .top-actions button { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 2px 10px rgba(0,0,0,.16); font: inherit; font-size: 13px; white-space: nowrap; }
.top-actions select { max-width: 94px; padding: 0 8px; cursor: pointer; }
.top-actions button { padding: 0 11px; }
.top-actions :focus-visible, #feedback-dialog :focus-visible { outline: 2px solid #2c65ad; outline-offset: 2px; }
#feedback-dialog { width: min(440px, calc(100vw - 24px)); max-height: min(90dvh, 700px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #faf6ee; color: var(--ink); box-shadow: 0 20px 70px #0007; }
#feedback-dialog::backdrop { background: #181612a8; }
#feedback-form { padding: 18px; display: grid; gap: 12px; }
#feedback-form header { display: flex; align-items: center; justify-content: space-between; }
#feedback-form h2 { margin: 0; font-size: 20px; white-space: nowrap; }
#feedback-form p { margin: 0; line-height: 1.5; }
#feedback-form label { font-weight: 700; white-space: nowrap; }
#feedback-form textarea { width: 100%; min-height: 150px; resize: vertical; padding: 12px; border: 1px solid #a99b88; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; line-height: 1.5; }
#feedback-form .feedback-note { color: #655a4d; font-size: 12px; }
.feedback-actions { display: flex; justify-content: flex-end; gap: 8px; }
.feedback-admin-link { align-self: center; margin-right: auto; color: #315e55; font-size: 12px; white-space: nowrap; }
.feedback-actions button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
#feedback-submit { background: #795029; color: #fff; border-color: #795029; }
@media (max-width: 1100px) and (min-width: 641px) { #hud { flex-wrap: wrap; } .pill { max-width: 100%; } .tools, .top-actions { margin-left: auto; } }
@media (max-width: 900px) and (min-width: 641px) { .tools { margin-left: 0; } .tools button { width: 36px; justify-content: center; padding: 0; } .tools button .lb { display: none; } }
#prompt { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: rgba(30, 24, 18, 0.82); color: #fff6e8; font-size: 15px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#prompt kbd { font: inherit; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: #f4e6cc; color: #3a2a18; }
#toast { position: fixed; left: 50%; top: 62px; transform: translateX(-50%); padding: 9px 14px; border-radius: 10px; background: rgba(30, 24, 18, .86); color: #fff; font-size: 14px; max-width: min(560px, 92vw); text-align: center; pointer-events: none; }
#panel { position: fixed; top: 58px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.28); overflow: hidden; }
#panel header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
#panel h2 { margin: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 16px; }
#panel-body { padding: 12px 14px 16px; overflow-y: auto; overflow-x: hidden; font-size: 14px; line-height: 1.55; }
@media (max-width: 1100px) and (min-width: 641px) { #panel { top: 96px; } #toast { top: 100px; } }
.sec { margin: 0 0 14px; } .sec h3 { margin: 0 0 6px; font-size: 14px; white-space: nowrap; }
.note { color: #6b5f50; font-size: 12.5px; margin: 4px 0 0; }
.badge { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 6px; background: #f1dfc2; color: #6b4520; font-size: 12px; white-space: normal; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; } .seg button { padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 14px; } .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.row { display: flex; align-items: center; gap: 10px; } input[type=range] { width: 100%; }
.dest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .dest button { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; } .dest button b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dest button small { color: #7a6b58; white-space: normal; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; overflow-x: auto; } .tabs button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; } .tabs button[aria-pressed="true"] { background: #3a2f24; color: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; margin: 6px 0 8px; } .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid rgba(0,0,0,.15); }
.seatgrid { display: grid; gap: 3px; justify-content: start; } .seatgrid .rl { font-size: 11px; color: #7a6b58; text-align: right; padding-right: 3px; line-height: 20px; }
.seatgrid button { width: 22px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); background: #fff; font-size: 0; }
.seatgrid button.other { background: var(--other); } .seatgrid button.mine { background: var(--mine); } .seatgrid button.acc { box-shadow: inset 0 0 0 2px var(--acc); } .seatgrid button.comp { box-shadow: inset 0 0 0 2px #9b7bc0; } .seatgrid .gap { width: 10px; }
.chars { display: grid; gap: 8px; margin-bottom: 10px; } .char-row { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 6px; align-items: stretch; }
.char-sp { display: flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; } .char-sp i, .char small i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }
.char { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; white-space: normal; min-width: 0; } .char b { font-size: 14px; white-space: nowrap; } .char small { display: flex; gap: 5px; align-items: center; color: #7a6b58; font-size: 12px; line-height: 1.35; } .char[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: #fbf3e6; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; } .kv dt { color: #7a6b58; white-space: nowrap; } .kv dd { margin: 0; }
.primary { padding: 9px 14px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; } .ghost { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
#touch-ui { display: none; }
#pad { position: fixed; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.5); opacity: 0; pointer-events: none; transition: opacity .15s; left: 30px; bottom: 40px; }
#pad.on { opacity: 1; } #knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.75); }
.acts { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; gap: 8px; align-items: end; }
.acts button { height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.5); background: rgba(30,24,18,.6); color: #fff; font-size: 14px; }
.acts .big { grid-column: 1 / span 2; height: 56px; font-size: 16px; background: rgba(138,90,43,.86); }
#btn-run { grid-column: 1 / span 2; }
#btn-run[aria-pressed="true"] { background: #386c4d; color: #fff; }
#greeting-faith { display: block; width: 100%; margin-top: 6px; padding: 8px; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.greeting-section { position: relative; }
#greeting-info { border: 0; background: transparent; padding: 2px 6px; font-size: 16px; }
#greeting-tip { position: absolute; z-index: 1; inset: 28px 0 auto; margin: 0; padding: 10px 12px; border-radius: 8px; background: #30291f; color: #fff; font-size: 12.5px; box-shadow: 0 3px 12px #0003; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #1b1712; color: #f5ead6; z-index: 10; } .ld-box { width: min(360px, 80vw); text-align: center; } .ld-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; } #ld-msg { font-size: 14px; opacity: .8; } .ld-bar { height: 4px; background: rgba(255,255,255,.15); border-radius: 2px; margin-top: 14px; overflow: hidden; } #ld-fill { display: block; height: 100%; width: 5%; background: #d8a35c; transition: width .2s; }
body.touch #touch-ui { display: block; } body.touch #prompt { bottom: max(210px, calc(env(safe-area-inset-bottom) + 192px)); } body.touch #prompt kbd { display: none; }
body.panel-open .acts, body.panel-open #prompt { display: none; }
@media (max-width: 640px) {
  #hud { flex-direction: column; gap: 6px; padding: max(8px, env(safe-area-inset-top)) 8px 0; }
  .pill { width: 100%; max-width: 100%; min-height: 36px; font-size: 13px; padding: 6px 10px; gap: 6px; }
  .pill .faith { display: inline; }
  .tools { display: grid; width: 100%; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .top-actions { width: 100%; justify-content: flex-end; }
  .top-actions select, .top-actions button { height: 32px; font-size: 12px; }
  .tools button { width: 100%; min-width: 0; height: 44px; flex-direction: column; justify-content: center; gap: 1px; padding: 0; border-radius: 11px; }
  .tools button .lb { display: block; font-size: 10px; line-height: 1.1; } .tools button .ic { font-size: 14px; line-height: 16px; }
  #prompt { width: min(460px, calc(100vw - 24px)); justify-content: center; font-size: 13px; padding: 8px 11px; }
  #toast { top: max(138px, calc(env(safe-area-inset-top) + 138px)); }
  #panel { top: auto; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: min(68dvh, calc(100dvh - 154px)); border-radius: 14px; }
  #panel header { padding: 10px 12px 7px; }
  #panel-body { padding: 10px 12px max(14px, env(safe-area-inset-bottom)); }
  body.panel-open #touch-ui { display: none; }
  #pad { width: 104px; height: 104px; left: 18px; bottom: max(18px, env(safe-area-inset-bottom)); }
  #knob { left: 29px; top: 29px; width: 42px; height: 42px; }
  .acts { right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: min(184px, calc(50vw - 12px)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .acts button { min-width: 0; height: 46px; padding: 0 4px; border-radius: 12px; font-size: 12px; }
  .acts .big { grid-column: auto; grid-row: auto; height: 46px; font-size: 13px; }
  #btn-run { grid-column: auto; }
  body.touch #prompt { bottom: max(126px, calc(env(safe-area-inset-bottom) + 116px)); }
  .char-row { grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
  .char { padding: 7px 8px; }
  .char b { font-size: 13px; }
  .char small { font-size: 11px; }
}
@media (max-width: 400px) {
  .pill { gap: 5px; padding-inline: 8px; }
  .pill .sep { height: 12px; }
  .tools { gap: 3px; }
  .tools button { min-height: 40px; }
  .char-row { grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
  .char { padding: 6px; }
  .seatgrid { width: 100% !important; grid-template-columns: 12px repeat(5, minmax(0, 1fr)) 7px repeat(5, minmax(0, 1fr)) !important; gap: 2px; }
  .seatgrid .rl { padding-right: 1px; font-size: 10px; }
  .seatgrid button { width: 100%; min-width: 0; }
  .seatgrid .gap { width: auto; }
}
@media (max-height: 520px) {
  #panel { top: 104px; bottom: 8px; max-height: none; }
  #feedback-form { padding: 12px; gap: 8px; }
  #feedback-form textarea { height: 80px; min-height: 80px; resize: none; }
  body.touch #prompt { bottom: max(112px, calc(env(safe-area-inset-bottom) + 102px)); }
  .acts { bottom: max(8px, env(safe-area-inset-bottom)); }
  .acts button, .acts .big { height: 42px; }
}
@media (max-height: 520px) and (min-width: 760px) {
  #hud { flex-wrap: nowrap; }
  .pill { max-width: 34vw; }
  .tools { margin-left: 0; }
  .tools button { width: 36px; justify-content: center; padding: 0; }
  .tools button .lb { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  #panel { top: 58px; }
}
@media (max-width: 640px) and (orientation: landscape) {
  #hud { flex-direction: row; align-items: flex-start; }
  .pill { width: auto; max-width: min(38vw, 280px); }
  .tools { width: auto; flex: 1; }
  .tools button { max-width: 48px; }
  .tools button .lb { display: none; }
  .top-actions { width: auto; margin-left: auto; }
  #panel { top: 58px; left: auto; right: 8px; bottom: 8px; width: min(400px, 54vw); max-height: none; }
  body.touch #prompt { left: 50%; bottom: 14px; width: auto; max-width: min(38vw, 360px); }
}

/* 기획 이미지와 현재 WebGL 렌더를 같은 화면에서 비교한다. */
#art-compare {
  position: fixed; inset: 0; margin: 0; width: 100%; max-width: none;
  height: 100%; max-height: none; padding: clamp(10px, 2vw, 28px); border: 0;
  background: #181612; color: #f4ede2; overflow: hidden;
}
#art-compare[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
#art-compare::backdrop { background: #181612; }
.art-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.art-header h2 { margin: 0; font-size: clamp(17px, 2vw, 24px); white-space: nowrap; }
.art-subjects, #art-angles { display: flex; gap: 5px; }
#art-compare button { border: 1px solid #766450; border-radius: 7px; background: #30291f; color: #fbf2e4; padding: 7px 12px; min-height: 36px; font-size: 14px; }
#art-compare button[aria-pressed="true"] { background: #e6c398; color: #291f16; border-color: #e6c398; }
#art-compare button:focus-visible { outline: 2px solid #f4d29e; outline-offset: 3px; }
#art-close { justify-self: end; width: 38px; padding: 0 !important; }
.art-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.art-frame { margin: 0; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid #4e4134; border-radius: 11px; overflow: hidden; background: #27211b; }
.art-frame figcaption { padding: 9px 12px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.art-media { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; background: #29221d; overflow: hidden; }
#art-reference { display: block; width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
#art-reference.statue-reference { inset: 50% auto auto 50%; width: 700%; height: auto; transform: translate(-54.45%, -45.7%); }
#art-reference.altar-reference { inset: 50% auto auto 50%; width: 315%; height: auto; transform: translate(-54.45%, -47.9%); }
#art-live #view { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#art-fallback { padding: 12px; text-align: center; }
.art-footer { min-width: 0; min-height: 36px; display: flex; justify-content: flex-end; }
@media (max-width: 660px) and (orientation: portrait) {
  #art-compare[open] { gap: 8px; }
  .art-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .art-subjects { grid-area: 2 / 1 / 3 / 3; }
  #art-close { grid-area: 1 / 2; }
  .art-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .art-frame figcaption { padding: 6px 10px; }
}
@media (max-width: 375px) {
  #art-compare .art-subjects button { padding-inline: 8px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  #art-compare { padding: 8px; }
  #art-compare[open] { gap: 6px; }
  .art-frame figcaption { padding: 5px 10px; }
}
#fade{position:fixed;inset:0;background:#f4ece0;opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:50}
#fade.on{opacity:1}

/* Shared community controls stay below the 3D view and above touch movement buttons. */
#chat-dock { position: fixed; z-index: 5; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(490px, calc(100vw - 24px)); padding: 9px; border: 1px solid var(--line); border-radius: 15px; background: rgba(250,246,238,.96); box-shadow: 0 9px 32px #0005; }
#chat-dock header { display: flex; align-items: center; gap: 8px; min-width: 0; }
#guest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; max-width: 34%; }
#online-count { white-space: nowrap; font-size: 11px; color: #6b5f50; }
.chat-nav { display: flex; gap: 4px; margin-left: auto; }
.chat-nav button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 9px; font-size: 12px; }
#chat-log { max-height: 58px; overflow-y: auto; margin: 5px 0; padding: 2px 3px; font-size: 12px; line-height: 18px; }
.chat-line { margin: 0 0 3px; overflow-wrap: anywhere; }
.chat-line strong { margin-right: 5px; }
.chat-line.private { color: #6b4d9d; }
#chat-form { display: flex; gap: 5px; min-width: 0; }
#chat-form select, #chat-form input { min-width: 0; height: 36px; border: 1px solid #bcae9a; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
#chat-form select { width: 112px; flex: none; }
#chat-form input { flex: 1; padding: 0 9px; }
#chat-form button, .social-form button, .social-action { border: 0; border-radius: 8px; padding: 7px 11px; background: #77522d; color: #fff; font-size: 13px; }
#chat-dock :focus-visible, .social-dialog :focus-visible { outline: 2px solid #2c65ad; outline-offset: 2px; }
#social-status { margin: 5px 2px 0; font-size: 12px; color: #9a301d; }
#speech-layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.speech { position: absolute; transform: translate(-50%,-100%); max-width: min(230px, 55vw); padding: 7px 10px; border-radius: 11px; background: #fffdf8; color: #2b2620; box-shadow: 0 3px 12px #0005; text-align: center; font-size: 13px; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
.speech::after { content: ''; position: absolute; left: calc(50% - 6px); bottom: -7px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fffdf8; }
.speech strong { display: block; font-size: 11px; color: #77522d; margin-bottom: 2px; }
.speech.private { border: 2px solid #9c7ec1; }
.social-dialog { width: min(620px, calc(100vw - 20px)); max-height: min(86dvh, 760px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #faf6ee; color: var(--ink); box-shadow: 0 20px 70px #0007; }
.social-dialog::backdrop { background: #181612a8; }
.social-dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.social-dialog h2, .social-dialog h3 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-dialog h2 { font-size: 20px; } .social-dialog h3 { font-size: 15px; }
.social-dialog > header button { border: 0; background: transparent; font-size: 17px; }
.social-body { overflow-y: auto; max-height: calc(min(86dvh, 760px) - 56px); padding: 14px 18px 20px; }
.social-body > section { margin-bottom: 20px; }
.social-list { display: grid; gap: 9px; margin: 8px 0 18px; }
.social-card { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; min-width: 0; }
.social-card h4 { margin: 0 0 5px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-card p { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }
.social-card small { display: block; color: #6b5f50; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.social-card .actions select { max-width: 220px; min-width: 0; }
.social-form { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.social-form label { font-size: 12px; font-weight: 700; white-space: nowrap; }
.social-form input, .social-form textarea, .social-form select { width: 100%; min-width: 0; padding: 8px; border: 1px solid #bcae9a; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.social-form button { justify-self: end; margin-top: 5px; }
.meeting-fields { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(80px,.6fr); gap: 7px; }
.meeting-fields > div { min-width: 0; }
.social-empty { margin: 8px 0; color: #6b5f50; font-size: 13px; }
body.panel-open #chat-dock, body.social-open #chat-dock, body.social-open #touch-ui { visibility: hidden; }
@media (max-width: 640px) {
  body.touch #chat-dock { bottom: max(128px, calc(env(safe-area-inset-bottom) + 120px)); }
  #chat-dock { width: calc(100vw - 16px); padding: 7px; }
  #chat-log { max-height: 40px; }
  #chat-form select { width: 86px; }
  .social-body { padding: 12px; }
  .meeting-fields { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .meeting-fields > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  .tools { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .tools button { height: 38px; }
  .tools button .lb { display: none; }
}
@media (max-height: 520px) and (min-width: 641px) {
  body.touch #chat-dock { left: 12px; bottom: 8px; transform: none; width: min(440px, calc(100vw - 210px)); }
  #chat-log { max-height: 40px; }
  .social-dialog { max-height: 94dvh; }
  .social-body { max-height: calc(94dvh - 54px); }
}

/* 소리 버튼: 음소거면 흐리게 + 사선 */
#sound-toggle .ic { position: relative; }
#sound-toggle.muted { opacity: .7; }
#sound-toggle.muted .ic::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; border-top: 2px solid currentColor; transform: rotate(-40deg); }
#snd-vol { flex: 1; min-width: 80px; }
@media (min-width: 641px) { #sound-toggle { width: 36px; justify-content: center; padding: 0; } #sound-toggle .lb { display: none; } }