/* Shared desktop/mobile layout; loaded after the legacy layout stylesheet. */

#MainFrame { box-sizing: border-box; width: 100%; max-width: 1050px; margin: 55px 0; padding: 30px; }
#TopMenu, #LoginArea, #ContentArea, #Footer { box-sizing: border-box; width: auto; margin-left: 45px; }
#LoginArea { height: auto; min-height: 38px; }
#LoginArea:after { content: ""; display: block; clear: both; }
#ContentArea { clear: both; padding-bottom: 0; background-color: transparent; }
#TopMenu a { display: inline-block; vertical-align: middle; }
#TopMenu a:focus-visible { outline: 2px solid #526d9b; outline-offset: 4px; }
@media (max-width: 768px) {
    body { margin: 0; }
    #MainFrame { width: 100%; min-width: 0; margin: 0 auto; padding: 16px; }
    #TopMenu, #LoginArea, #ContentArea, #Footer { margin-left: 0; width: 100%; min-width: 0; }
    #TopMenu { height: auto; min-height: 80px; }
    #TopMenu table { width: 100%; table-layout: fixed; }
    #TopMenu td { height: auto; }
    #TopMenu tr:first-child td { height: 12px; }
    #TopMenu tr:last-child td { padding: 8px 0; line-height: 2.5; }
    #TopMenu a { padding: 8px 3px; }
    #TopMenu img { max-width: 100%; height: auto; vertical-align: middle; }
    #TopMenu img[hspace] { margin: 0 4px; }
    #LoginArea { padding: 8px 0; min-height: 40px; }
    #LoginArea a { display: inline-block; padding: 8px 2px; }
    #Footer { padding: 24px 0; font-size: 11px; line-height: 1.6; }
}
@media (max-width: 380px) { #MainFrame { padding: 12px; } }

/* Member tools: readable labels with understated line icons. */
#LoginArea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 6px;
    height: auto;
    padding: 12px 0 4px;
    font: 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
}
#LoginArea:after { display: none; }
#LoginArea a.accountLink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 6px;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background-color .15s;
}
#LoginArea a.accountLink:hover { color: #405572; background: #f0f4fa; }
#LoginArea a.accountLink:focus-visible { outline: 2px solid #718bb9; outline-offset: 2px; }
#LoginArea .accountLink svg { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#LoginArea .accountBadge { min-width: 16px; padding: 0 4px; border-radius: 8px; box-sizing: border-box; background: #e3ebf8; color: #405c89; text-align: center; font-size: 10px; line-height: 16px; }
@media (max-width: 768px) {
    #LoginArea { gap: 4px; padding: 8px 0; }
    #LoginArea a.accountLink { min-height: 40px; padding: 8px; }
}