/* 로비와 같은 평면 surface와 터치 규격을 모든 콘텐츠 페이지에 사용합니다. */
.hub-panel,.hub-list,.hub-card,.hub-field,.hub-character-content{min-width:0;max-width:100%;box-sizing:border-box}
.hub-panel{font-size:15px;line-height:1.5}
.hub-panel h3,.hub-panel h4{margin:0 0 8px;font-size:1rem;line-height:1.4}
.hub-panel p{margin:8px 0;overflow-wrap:break-word;word-wrap:break-word}
.hub-list{display:block}
.hub-card{display:block;margin:8px 0;padding:12px;border:1px solid #43546b;border-radius:10px;background:#202d3d;overflow-wrap:break-word;word-wrap:break-word}
.hub-card>button,.hub-panel form>button{margin:6px 4px 2px 0}
.hub-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.hub-tabs button,.hub-quantity button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #526781;border-radius:10px;color:inherit;background:#202d3d;font:inherit;white-space:normal;word-wrap:break-word}
.hub-tabs button[aria-selected=true],.hub-tabs button[aria-pressed=true]{border-color:#85e0ce;background:#24434a}
.hub-product{width:100%;min-height:72px;text-align:left;color:inherit;font:inherit;cursor:pointer}
.hub-product strong,.hub-product span,.hub-product small{display:block}
.hub-field{display:block;margin:10px 0;font-weight:600}
.hub-field input,.hub-field textarea,.hub-field select{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:44px;margin:6px 0 0;padding:8px;border:1px solid #526781;border-radius:10px;color:inherit;background:#121d2b;font:inherit;font-size:16px}
.hub-field textarea{min-height:80px;resize:none;line-height:1.4}
.hub-detail-list{display:block;margin:8px 0}
.hub-detail-list>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:5px 0;border-bottom:1px solid #34465c}
.hub-detail-list dt,.hub-detail-list dd{margin:0;min-width:0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word}
.hub-detail-list code{font-size:12px;white-space:normal;word-break:break-all}
.hub-character-heading{display:flex;align-items:center;gap:12px;margin:8px 0}
.hub-character-heading img{width:68px;height:68px;object-fit:contain;flex:none}
.hub-character-heading>div{min-width:0}
.hub-character-heading h3{font-size:1.25rem}
.hub-quantity{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:10px 0}
.hub-quantity strong{min-width:24px;text-align:center}
.hub-chat-list time{display:block;font-size:12px;opacity:.8;overflow-wrap:break-word}
.hub-chat-text{white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}
.hub-panel button:disabled{cursor:default;opacity:.55}
.hub-panel button{min-width:44px;min-height:44px}
.news-list{display:block;min-width:0;max-width:100%}
.news-entry{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;box-sizing:border-box;width:100%;min-width:44px;min-height:80px;margin:8px 0;padding:12px;border:1px solid #43546b;border-radius:10px;background:#202d3d;color:inherit;font:inherit;font-size:15px;line-height:1.5;text-align:left;white-space:normal;overflow-wrap:break-word;word-wrap:break-word}
.news-entry-copy{display:block;min-width:0;max-width:100%}
.news-entry-copy small,.news-entry-copy strong{display:block}
.news-entry-copy small,.news-read-status,.news-date{font-size:12px;opacity:.8}
.news-read-status{margin:6px 0 0 8px}
.news-detail-heading{min-width:0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word}
.news-paragraph{margin:10px 0;line-height:1.5;overflow-wrap:break-word;word-wrap:break-word}
.hub-panel button:focus-visible,.hub-panel input:focus-visible,.hub-panel select:focus-visible,.hub-panel textarea:focus-visible{outline:2px solid #a7efe0;outline-offset:2px}
@media(max-height:420px){.hub-panel{font-size:14px}.hub-card{padding:8px}.hub-field textarea{min-height:64px}.hub-character-heading img{width:52px;height:52px}}
@supports not (gap:6px){.hub-tabs button{margin:3px}.hub-character-heading img{margin-right:12px}.hub-quantity>*{margin-right:12px}}