@import url("book-site-menu.css?v=20261110-menu-pc-18-1");
.mobile-bottom-nav { display:none; }
.mobile-support-button,.mobile-support-header { display:none; }
.mobile-support-dialog { box-sizing:border-box; width:min(calc(100% - 24px),480px); height:min(620px,85dvh); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:18px; color:#182b46; background:#fff; font-family:Arial,"Malgun Gothic",sans-serif; }
.mobile-support-dialog[open] { display:flex; flex-direction:column; }
.mobile-support-dialog::backdrop { background:#182b4666; }
.mobile-support-dialog h2 { margin:0; font-size:20px; }
.mobile-support-dialog p { font-size:14px; line-height:1.7; }
.mobile-support-dialog button { padding:8px 18px; border:0; border-radius:8px; background:#ff176c; color:#fff; font:inherit; cursor:pointer; }
.support-chat-header { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid #e9edf4; }
.support-chat-header p { margin:4px 0 0; color:#68758a; }
.mobile-support-dialog .support-chat-close { width:36px; height:36px; padding:0; background:transparent; color:#68758a; font-size:28px; }
.support-chat-messages { flex:1; min-height:70px; overflow-y:auto; padding:18px; background:#fff7fa; }
.support-chat-empty { margin:0; color:#68758a; }
.support-chat-bubble { width:fit-content; max-width:90%; margin:0 0 12px auto; padding:10px 14px; border-radius:14px 14px 0 14px; background:#ff176c; color:#fff; white-space:pre-wrap; overflow-wrap:anywhere; }
.support-chat-form { flex:0 0 auto; padding:14px 18px; }
.support-chat-form label { display:block; margin-bottom:6px; font-size:14px; font-weight:700; }
.support-chat-form textarea { box-sizing:border-box; width:100%; max-height:100px; padding:10px; border:1px solid #d1d5db; border-radius:10px; font:inherit; font-size:14px; resize:none; }
.support-chat-form textarea:focus { outline:none; border-color:#ff176c; }
.support-chat-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.support-chat-footer span,.mobile-support-dialog .support-chat-status { color:#68758a; font-size:12px; line-height:1.5; }
.support-chat-status { margin:8px 0 0; }
.support-chat-form button:disabled { opacity:.5; cursor:default; }
body.support-chat-open { overflow:hidden; }
@media (max-width:767px) {
  .mobile-support-header { display:block; position:relative; height:40px; }
  body.mobile-nav-active main > header { position:relative; }
  .mobile-support-button { position:absolute; right:0; top:50%; transform:translateY(-50%); display:block; box-sizing:border-box; height:29px; padding:0 10px; border:1px solid #d1d5db; background:#fff; color:#3f4650; font:700 14px Arial,"Malgun Gothic",sans-serif; white-space:nowrap; cursor:pointer; }
  .mobile-support-button:focus-visible { outline:2px solid #ff176c; outline-offset:2px; }
  body.mobile-nav-active { --mobile-nav-height:68px; }
  .mobile-bottom-nav { position:fixed; z-index:12; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,520px); box-sizing:border-box; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:8px 4px calc(8px + env(safe-area-inset-bottom)); background:rgba(240,243,252,.92); border-top:0; box-shadow:0 -4px 16px #182b4614; }
  .mobile-bottom-nav a { min-width:0; min-height:57px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; color:#5e6c82; font-family:Arial,"Malgun Gothic",sans-serif; font-size:11px; font-weight:700; line-height:1.2; text-decoration:none; white-space:nowrap; }
  .mobile-bottom-nav svg { box-sizing:border-box; width:38px; height:38px; padding:7px; border-radius:50%; background:transparent; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-bottom-nav a[aria-current="page"] { color:#ff176c; }
  .mobile-bottom-nav a[aria-current="page"] svg { background:#ff176c; color:#fff; }
  .mobile-bottom-nav a[data-nav="home"][aria-current="page"] svg { background:#e8edf6; color:#ff176c; }
  .mobile-bottom-nav a:focus-visible { outline:2px solid #ff176c; outline-offset:-2px; border-radius:8px; }
  body.mobile-nav-active > main { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  body.mobile-nav-audio > main { padding-bottom:calc(180px + env(safe-area-inset-bottom)); }
  body.mobile-nav-audio .audio-dock { bottom:calc(80px + env(safe-area-inset-bottom)); }
  body.mobile-nav-active .toast { bottom:calc(90px + env(safe-area-inset-bottom)); }
}