:root{--kakao-yellow: #fee500;--kakao-yellow-deep: #f5dc00;--kakao-brown: #3c1e1e;--kakao-ink: #191919;--kakao-muted: #5c5c5c;--kakao-chat-bg: #b2c7d9;--kakao-white: #ffffff;--kakao-line: #e5e5e5;--kakao-soft: #f5f5f5;--kakao-warn: #e65f3e;--radius-bubble: 16px;--font: "Noto Sans KR", sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font);color:var(--kakao-ink);background:#3a3a3c;line-height:1.45}button,input{font:inherit}.kakao-frame{min-height:100vh;display:grid;place-items:center;padding:1rem}.kakao-phone{width:min(430px,100%);height:min(920px,calc(100vh - 2rem));display:flex;flex-direction:column;background:var(--kakao-chat-bg);border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px #ffffff14,0 24px 60px #00000073}.kakao-header{flex:0 0 auto;display:flex;justify-content:space-between;gap:.75rem;align-items:center;padding:.85rem .95rem;background:#b2c7d9eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}.kakao-header-main{display:flex;gap:.65rem;align-items:center;min-width:0}.kakao-back{flex-shrink:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff8c;color:var(--kakao-ink);text-decoration:none;font-size:16px;font-weight:700;line-height:1}.kakao-back:hover{background:var(--kakao-white)}.kakao-avatar{width:40px;height:40px;border-radius:14px;background:var(--kakao-yellow);color:var(--kakao-brown);display:grid;place-items:center;font-weight:800;flex:0 0 auto}.kakao-header h1{margin:0;font-size:1rem;font-weight:700;letter-spacing:-.02em}.kakao-subtitle{margin:.1rem 0 0;font-size:.75rem;color:var(--kakao-muted)}.kakao-live{display:grid;gap:.1rem;text-align:right;font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--kakao-muted);flex:0 0 auto}.kakao-live small{font-size:.65rem}.kakao-tabs{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.45rem .7rem .55rem;background:#b2c7d9eb}.kakao-tabs button{border:0;border-radius:999px;padding:.55rem .4rem;background:#ffffff73;color:var(--kakao-muted);font-weight:700;font-size:.88rem;cursor:pointer}.kakao-tabs button.is-on{background:var(--kakao-yellow);color:var(--kakao-brown)}.kakao-room{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.kakao-notice{margin:.7rem 1rem .35rem;align-self:center;max-width:86%;padding:.45rem .75rem;border-radius:999px;background:#0000002e;color:#fff;font-size:.72rem;text-align:center;line-height:1.35}.kakao-location-chip{margin:.35rem .75rem .5rem;padding:.65rem .7rem;background:#ffffff8c;border-radius:14px}.kakao-offset{margin:.4rem 0 0;font-size:.75rem;color:var(--kakao-muted)}.field{display:grid;gap:.3rem;position:relative}.field label{font-size:.75rem;font-weight:700;color:var(--kakao-muted)}.field input[type=search],.composer input[type=date],.composer input[type=time],.field input[type=date],.field input[type=time]{width:100%;border:0;border-radius:20px;padding:.65rem .85rem;background:var(--kakao-white);color:var(--kakao-ink);box-shadow:0 1px 2px #0000000f}.field input:focus,.composer input:focus{outline:2px solid rgba(254,229,0,.9)}.dt-fields{display:grid;gap:.35rem;padding-bottom:.35rem;border-bottom:1px dashed #ddd;margin-bottom:.25rem}.dt-fields:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}.dt-row{display:grid;gap:.25rem}.time-presets{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}.time-presets button{border:0;border-radius:999px;padding:.28rem .55rem;background:#e8e8e8;color:var(--kakao-muted);font-size:.75rem;font-weight:700;cursor:pointer}.time-presets button.is-on{background:var(--kakao-yellow);color:var(--kakao-brown)}.search-list{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;margin:0;padding:.3rem;list-style:none;max-height:220px;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 10px 30px #0000002e}.search-list button{width:100%;display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;border:0;background:transparent;text-align:left;padding:.55rem .6rem;border-radius:10px;cursor:pointer;color:inherit}.search-list button:hover,.search-list button.is-active{background:#fff8c4}.search-main{font-weight:700;font-size:.88rem}.search-meta{color:var(--kakao-muted);font-size:.72rem}.search-empty{padding:.7rem;color:var(--kakao-muted);font-size:.85rem}.chat-section{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.chat-stream{flex:1 1 auto;min-height:0;overflow:auto;padding:.4rem .75rem .9rem;display:flex;flex-direction:column;gap:.65rem}.day-divider{display:flex;justify-content:center;margin:.25rem 0}.day-divider span{background:#0000002e;color:#fff;font-size:.72rem;font-weight:600;padding:.28rem .7rem;border-radius:999px}.bubble-row{display:flex;gap:.45rem;align-items:flex-end;max-width:92%}.bubble-row.me{align-self:flex-end;flex-direction:row-reverse}.bubble-row.other{align-self:flex-start}.profile{width:34px;height:34px;border-radius:12px;background:#7aa0b8;color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:800;flex:0 0 auto}.profile.soft{background:#6b7c8f}.sender{margin:0 0 .2rem .15rem;font-size:.72rem;color:#33485a;font-weight:600}.bubble{position:relative;padding:.65rem .8rem;border-radius:var(--radius-bubble);max-width:280px;box-shadow:0 1px 1px #0000000a}.bubble-white{background:var(--kakao-white);border-top-left-radius:4px}.bubble-yellow{background:var(--kakao-yellow);border-top-right-radius:4px;color:var(--kakao-brown)}.bubble-label{margin:0 0 .2rem;font-size:.72rem;font-weight:700;opacity:.75}.bubble-time{margin:0;font-size:1.02rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.35}.bubble-sub,.bubble-text{margin:.35rem 0 0;font-size:.82rem;line-height:1.4}.bubble-actions{margin-top:.5rem}.system-chip{align-self:center;display:flex;gap:.4rem;align-items:center;background:#00000029;color:#fff;font-size:.75rem;font-weight:600;padding:.35rem .7rem;border-radius:999px}.composer{flex:0 0 auto;padding:.65rem .7rem .85rem;background:#f6f6f6;border-top:1px solid var(--kakao-line);display:grid;gap:.4rem}.composer-label{font-size:.72rem;font-weight:700;color:var(--kakao-muted)}.composer-row{display:grid;grid-template-columns:1fr auto;gap:.4rem}.kakao-seg{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;margin-bottom:.15rem}.kakao-seg button{border:0;border-radius:999px;padding:.45rem .3rem;background:#e8e8e8;color:var(--kakao-muted);font-weight:700;font-size:.82rem;cursor:pointer}.kakao-seg button.is-on{background:var(--kakao-yellow);color:var(--kakao-brown)}.btn-send{border:0;border-radius:18px;padding:0 .95rem;background:var(--kakao-yellow);color:var(--kakao-brown);font-weight:800;cursor:pointer;min-width:58px}.btn-send:hover{background:var(--kakao-yellow-deep)}.btn-link{border:0;background:transparent;color:#4a6f88;font-size:.8rem;font-weight:700;cursor:pointer;justify-self:start;padding:.15rem 0}.btn-chip{border:0;border-radius:999px;padding:.28rem .65rem;background:#00000014;color:var(--kakao-ink);font-size:.75rem;font-weight:700;cursor:pointer}.bubble-yellow .btn-chip{background:#3c1e1e1a;color:var(--kakao-brown)}.system-chip .btn-chip{background:#ffffffeb;color:var(--kakao-ink)}.warn{margin:.15rem 0 0;padding:.45rem .65rem;border-radius:10px;background:#ffe8e2;color:var(--kakao-warn);font-size:.78rem;font-weight:700}@media(max-width:480px){.kakao-frame{padding:0}.kakao-phone{width:100%;height:100vh;height:100dvh;border-radius:0;box-shadow:none}}