/* ============================================================
 * md-style.css — md-rendering-like frontend stylesheet.
 *
 * Design system pulled from mdsystem/docs/design/login.html and
 * mypage.html: CSS custom properties for color/typography (light
 * + dark via prefers-color-scheme), tight nav, centered footer,
 * form / button / card / link-list / welcome-box / history-row
 * components, plus markdown-body typography for rendered md.
 *
 * Used by:
 *   - MdHome.Master shell (nav, footer, page)
 *   - md*.aspx self-emitted HTML pages in ?view=1 mode
 *   - View/Login.aspx, View/wcRegister.aspx,
 *     View/wcQuestionHistoryList.aspx (pages on MdHome.Master)
 *
 * Class prefix `md-*` for new utilities; legacy shim at the bottom
 * keeps unmigrated codebehind-emitted markup readable.
 * ============================================================ */

:root {
    --bg: #ffffff;
    --bg-secondary: #f7f7f5;
    --text: #1a1a1a;
    --text-secondary: #666;
    --text-tertiary: #999;
    --border: #e5e5e3;
    --link: #1a6daa;
    --link-hover: #0f4c75;
    --accent: #e8f4f8;
    --orange: #ed7514;
    --green: #4a7a00;
    --error-bg: #ffeef0;
    --error-text: #86181d;
    --error-border: #fdaeb7;
    --info-bg: #f1f8ff;
    --info-text: #05264c;
    --info-border: #c8e1ff;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
            "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP",
            Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --font-mono: "SF Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
    --max-width: 960px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a1a;
        --bg-secondary: #242424;
        --text: #e5e5e3;
        --text-secondary: #aaa;
        --text-tertiary: #777;
        --border: #333;
        --link: #6db3d8;
        --link-hover: #8cc8e8;
        --accent: #1e2d33;
        --orange: #f09440;
        --green: #7ab830;
        --error-bg: #3a1418;
        --error-text: #fdaeb7;
        --error-border: #5a1f24;
        --info-bg: #122035;
        --info-text: #c8e1ff;
        --info-border: #1f3a5e;
    }
}

/* ---------- Reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.8;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- Top navbar ---------- */

.md-nav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 20px 0;
}
.md-nav__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.md-nav__brand {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    text-decoration: none;
}
.md-nav__brand:hover { color: var(--link); text-decoration: none; }
.md-nav__sep { color: var(--border); user-select: none; }
.md-nav__link {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.md-nav__link:hover { color: var(--link); text-decoration: none; }

/* ---------- Page container ---------- */

.md-page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px 20px 80px;
}
.md-page--centered { display: flex; justify-content: center; }
.md-page--narrow { max-width: 640px; }

/* ---------- Footer ---------- */

.md-footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
}
.md-footer a { color: var(--text-tertiary); }
.md-footer a:hover { color: var(--link); }
.md-footer p { margin: 0 0 8px; }
.md-footer p:last-child { margin-bottom: 0; }

/* ---------- Card (form / section container) ---------- */

.md-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px;
    margin: 0 auto 20px;
}
.md-card--login { max-width: 360px; }
.md-card__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

/* ---------- Forms ---------- */

.md-form__row { margin-bottom: 16px; }
.md-form__label {
    display: block;
    font-weight: 700;
    color: var(--orange);
    font-size: 14px;
    margin-bottom: 6px;
}
.md-form__label::after { content: ':'; }
.md-form__input,
input[type="text"].md-form__input,
input[type="password"].md-form__input,
input[type="email"].md-form__input,
textarea.md-form__input,
select.md-form__input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #aaa;
    border-radius: 3px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
}
.md-form__input:focus { outline: none; border-color: var(--link); }
.md-form__help {
    display: block;
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 12px;
}
.md-form__error {
    color: var(--error-text);
    font-size: 13px;
    margin-top: 6px;
}

/* ---------- Buttons ---------- */

.md-btn,
input[type="submit"].md-btn,
button.md-btn {
    display: inline-block;
    padding: 6px 20px;
    background: var(--bg-secondary);
    border: 1px solid #aaa;
    border-radius: 3px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    line-height: 1.5;
}
.md-btn:hover { background: var(--accent); text-decoration: none; }
.md-btn--primary {
    background: var(--accent);
    color: var(--text);
    border-color: var(--link);
}
.md-btn--primary:hover { background: var(--link); color: #fff; }
.md-btn--link {
    background: transparent;
    border: none;
    color: var(--link);
    padding: 0;
    cursor: pointer;
}
.md-btn--link:hover { background: transparent; text-decoration: underline; }

.md-btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

/* ---------- Sub-link list (boxed list of icon + text rows) ---------- */

.md-linklist {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin: 16px 0 0 0;
    padding: 0;
    list-style: none;
}
.md-linklist li { margin: 0; }
.md-linklist a,
.md-linklist li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.md-linklist a:last-child,
.md-linklist li:last-child a { border-bottom: none; }
.md-linklist a:hover { background: var(--bg-secondary); text-decoration: none; }

/* ---------- mypage components: welcome box, history header, inquiry rows, notices ---------- */

.md-welcome {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.md-welcome__hello {
    color: var(--orange);
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 6px;
}
.md-welcome__newmsg {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 14px;
}
.md-welcome__newmsg a {
    color: var(--link);
    text-decoration: underline;
}

.md-history__header {
    background: var(--green);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 16px;
    border-radius: 4px 4px 0 0;
    margin-top: 8px;
}
.md-history__toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.md-pagination {
    font-size: 13px;
    text-align: right;
    margin-bottom: 16px;
}
.md-pagination a { color: var(--link); margin: 0 2px; }

.md-inquiry-link {
    display: block;
    color: var(--text);
    text-decoration: none;
}
.md-inquiry-link:hover { text-decoration: none; }
.md-inquiry-link:hover .md-inquiry { background: var(--bg-secondary); }

.md-inquiry {
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}
.md-inquiry__num {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.md-inquiry__cat {
    background: var(--bg-secondary);
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 10px;
    margin-bottom: 6px;
}
.md-inquiry__body { font-size: 14px; padding: 0 4px; }

.md-notices { margin-bottom: 24px; }
.md-notices h2 {
    font-size: 14px;
    font-weight: bold;
    color: var(--orange);
    margin-bottom: 8px;
}
.md-notices ul { list-style: none; padding: 0; margin: 0; }
.md-notices li { margin-bottom: 6px; font-size: 13px; }
.md-notices a { color: var(--green); text-decoration: underline; }
.md-notices a:hover { opacity: 0.8; }

/* ---------- Alerts / messages ---------- */

.md-alert {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}
.md-alert--error { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); }
.md-alert--info  { background: var(--info-bg);  color: var(--info-text);  border: 1px solid var(--info-border); }
.md-alert--ok    { background: #dcffe4; color: #144620; border: 1px solid #bef5cb; }

/* ---------- Markdown body (rendered md content) ---------- */

.markdown-body {
    font-family: var(--font);
    color: var(--text);
    line-height: 1.8;
    word-wrap: break-word;
}
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child  { margin-bottom: 0; }

.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin-top: 1.8em;
    margin-bottom: 0.7em;
    font-weight: 600;
    line-height: 1.3;
}
.markdown-body h1 { font-size: 28px; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.markdown-body h2 { font-size: 20px; padding-bottom: .3em; border-bottom: 1px solid var(--border); color: var(--orange); }
.markdown-body h3 { font-size: 17px; }
.markdown-body h4 { font-size: 15px; }
.markdown-body h5 { font-size: 14px; }
.markdown-body h6 { font-size: 13px; color: var(--text-secondary); }

.markdown-body p { margin: 0 0 1em 0; }

.markdown-body ul,
.markdown-body ol {
    margin: 0 0 1em 0;
    padding-left: 1.8em;
}
.markdown-body li { margin: 0; }
.markdown-body li + li { margin-top: 0.25em; }
.markdown-body li > p { margin-bottom: 0.5em; }
.markdown-body li > ul,
.markdown-body li > ol { margin-top: 0.25em; margin-bottom: 0.25em; }

.markdown-body a { color: var(--link); text-decoration: underline; }
.markdown-body a:hover { color: var(--link-hover); }

.markdown-body code {
    font-family: var(--font-mono);
    font-size: 85%;
    background: var(--bg-secondary);
    padding: .2em .4em;
    border-radius: 3px;
}
.markdown-body pre {
    font-family: var(--font-mono);
    font-size: 85%;
    background: var(--bg-secondary);
    padding: 12px 16px;
    border-radius: 6px;
    overflow: auto;
    line-height: 1.45;
    margin: 0 0 1em 0;
}
.markdown-body pre code { background: transparent; padding: 0; font-size: 100%; }

.markdown-body blockquote {
    margin: 0 0 1em 0;
    padding: 0.5em 1em;
    color: var(--text-secondary);
    border-left: .25em solid var(--border);
    background: var(--bg-secondary);
}
.markdown-body blockquote > :last-child { margin-bottom: 0; }

.markdown-body img {
    max-width: 100%;
    height: auto;
    margin: 0.5em 0;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.markdown-body hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2em 0;
    height: 0;
}

/* Tables in rendered md need real borders + padding so they read clearly. */
.markdown-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    border-collapse: collapse;
    margin: 0 0 1em 0;
    border: 1px solid var(--border);
    font-size: 14px;
}
.markdown-body table th,
.markdown-body table td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.markdown-body table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text);
}
.markdown-body table tr:nth-child(2n) td { background: var(--bg-secondary); }
.markdown-body table tr:nth-child(2n+1) td { background: var(--bg); }

.markdown-body kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 85%;
    color: var(--text);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 3px;
}

.markdown-body details {
    margin: 0 0 1em 0;
    padding: 0.5em 1em;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.markdown-body summary { cursor: pointer; font-weight: 600; }

/* Source-file hint above an md page (e.g. "output_md/index.md") */
.md-source {
    font-size: 12px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    margin-bottom: 8px;
}

/* ---------- Small helpers ---------- */

.md-text-center { text-align: center; }
.md-text-right  { text-align: right; }
.md-mt-0 { margin-top: 0; }
.md-mt-1 { margin-top: 8px; }
.md-mt-2 { margin-top: 16px; }
.md-mt-3 { margin-top: 24px; }
.md-muted { color: var(--text-secondary); }

.md-required {
    color: var(--orange);
    font-weight: 700;
    margin-left: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
    body { font-size: 14px; }
    .md-page { padding: 20px 14px 60px; }
    .md-card { padding: 20px 18px; }
}

/* ============================================================
 * Legacy-shim. Pages that haven't been fully rewritten emit
 * inline HTML with these class names from codebehind. Defining
 * minimal styles here keeps them visually coherent inside the
 * new MdHome.Master shell. Remove a rule once its emitter is
 * rewritten to use md-* utility classes.
 * ============================================================ */

.format_h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 1em 0;
    padding-bottom: .3em;
    border-bottom: 1px solid var(--border);
    color: var(--orange);
}
.contactArchiveList dl {
    margin: 0 0 16px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.contactArchiveList dt,
.contactArchiveList dd {
    padding: 8px 14px;
    margin: 0;
    line-height: 1.5;
}
.contactArchiveList dt {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}
.contactArchiveList dt:first-child { border-top: 0; }
.contactArchiveList dt span { margin-right: 10px; }
.contactArchiveList dd { background: var(--bg); border-top: 1px solid var(--bg-secondary); }
.contactArchiveList dd.categoryPath { color: var(--text-secondary); font-size: 13px; }
.contactArchiveList ul.contactSubject {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 500;
}
.contactArchiveList ul.contactSubject li { margin: 0; }
.contactArchiveList img { vertical-align: middle; margin-right: 6px; }

.errorModule {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}
.messageModule {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}
.pagerModule { margin: 16px 0; text-align: center; font-size: 13px; }
.pagerModule a { padding: 4px 8px; }

/* wcQuestionDetailInput / wcRegister legacy form-row markup. The dl/dt/dd
 * pattern stays in place where the codebehind emits it; these rules give
 * a passable layout in the new shell until each page is fully rewritten. */
.searchModule {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 0 0 20px;
}
.searchItems {
    margin: 0 0 14px 0;
}
.searchItems dt {
    font-weight: 700;
    color: var(--orange);
    font-size: 14px;
    margin-bottom: 6px;
}
.searchItems dd {
    margin: 0 0 12px 0;
}
.searchItems input[type="text"],
.searchItems input[type="password"],
.searchItems textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #aaa;
    border-radius: 3px;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
}
.searchItems .require { color: var(--orange); margin-left: 4px; }
.category_combo dt {
    font-weight: 700;
    color: var(--orange);
    font-size: 14px;
    margin-bottom: 6px;
}
.category_combo dd { margin: 0 0 10px 0; }
.category_combo input[type="text"] {
    padding: 6px 8px;
    border: 1px solid #aaa;
    border-radius: 3px;
    font-size: 14px;
}

/* btnModule-LR: legacy layout container with left + right action buttons.
 * .md-btn-row replaces it on rewritten pages, but keep these for unported
 * inquiry detail / send-confirmation pages so they don't render mangled. */
.btnModule-LR {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.btnModule-LR ul,
.btnModule-LR > div > ul {
    display: contents;
    list-style: none;
    padding: 0;
    margin: 0;
}
.btnModule-Left { order: 1; }
.btnModule-Right { order: 2; }

.listFile { margin-top: 8px; }
.listFile a { color: var(--link); }

/* slidepanel.js walks up the DOM looking for the literal className
 * "panelButton" / "panelButtonOpened". Keep these classes in legacy-shim
 * so wcQuestionHistoryDetailReply's 追伸 (append) flow keeps working —
 * styling matches md-history__toolbar (right-aligned action button).
 * Don't merge md-history__toolbar onto the same element; the JS uses
 * strict equality and would not match a multi-class string. */
.panelButton,
.panelButtonOpened {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.panelClipbox { margin: 12px 0; }
.panelClipbox-inner {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
}