/* Figma mobile layouts. Loaded after desktop CSS, only below 768px. */
html { display: block; font-size: 100px; height: auto; }
body { display: block; width: 100%; font-size: 12px; background: white; color: black; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; user-select: text; }
body > #main, body > #background-box, body > #footer, body > #ajaxProgress { display: none !important; }
#foot, #mp3Player { display: none !important; }
/* First-release document shell: never swap root scrolling modes between routes. */
#mobileApp { width: 100%; min-height: 100svh; overflow-x: clip; }
html:has(body.m-overlay-open) { overflow: hidden; }
#mobileApp *, #mobileApp *::before, #mobileApp *::after { box-sizing: border-box; }
#mobileApp button { font: inherit; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; }
#mobileApp a { text-decoration: none; color: inherit; }
#mobileApp img { display: block; }
#mobileApp button:focus-visible, #mobileApp a:focus-visible, #mobileApp summary:focus-visible { outline: 2px solid #6c9fdb; outline-offset: 4px; }
#mobileApp [hidden] { display: none !important; }
.m-home { height: var(--m-home-height, 100svh); position: relative; overflow: hidden; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.m-home-stage { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; width: calc(100% / var(--m-home-scale, 1)); height: 640px; transform: scale(var(--m-home-scale, 1)); transform-origin: top left; }
.m-home-menu { position: absolute; top: 32px; left: calc(43 / 375 * 100% - 9px); padding: 9px !important; }
.m-home-nav { position: absolute; top: 125px; left: calc(43 / 375 * 100%); display: grid; gap: 20px; font-size: 20px; line-height: 26px; font-weight: 600; }
.m-home-nav::before { content: ''; position: absolute; top: 8px; left: calc(-43 / 375 * 100vw / var(--m-home-scale, 1)); height: 14px; width: 4px; background: black; }
.m-home-card { position: absolute; top: 263px; left: calc(43 / 375 * 100%); width: 361px; height: 203px; background: #fcfcfc; }
.m-last { position: absolute; top: 274px; left: calc(43 / 375 * 100%); display: flex; gap: 7px; padding: 3px 0 0 27px; height: 39px; font-size: 14px; line-height: 14px; }
.m-last::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 15px; background: #fc1d1d; }
.m-last time { font-weight: 300; color: #888; }
.m-last small { display: block; margin-top: 3px; opacity: .1; font-size: 12px; }
.m-triangle { position: absolute; top: 184.973px; left: calc(212 / 375 * 100% - 1px); pointer-events: none; }
.m-triangle svg { display: block; }
.m-squiggle { position: absolute; top: 445px; left: calc(256 / 375 * 100%); pointer-events: none; }
.m-profile { position: absolute; top: 450px; left: calc(52 / 375 * 100%); font-size: 14px; line-height: 15px; font-weight: 300; }
.m-avatar { width: 58px; height: 58px; position: relative; overflow: hidden; mask: url('/assets/mobile/avatar-mask.svg') center / 58px 58px no-repeat; }
.m-avatar img { width: 84.141px; height: 84.141px; position: absolute; left: -11.437px; top: -7.352px; }
.m-profile strong { display: block; font-size: 18px; line-height: 22px; margin-top: 15px; font-weight: 700; }
.m-profile > div:not(.m-avatar):not(.m-social) { margin-top: 0; }
.m-profile p { margin: 0; }
.m-social { display: flex; gap: 23px; margin-top: 28px; }
.m-social a, .m-social button { display: block; position: relative; width: 28px; height: 28px; }
.m-social .m-social-glyph { position: absolute; inset: 0; width: 28px; height: 28px; pointer-events: none; }
.m-copyright { position: absolute; bottom: calc(15px + env(safe-area-inset-bottom, 0px)); left: calc(43 / 375 * 100%); color: #b3b3b3; font-size: 9px; }
.m-header { height: 119px; position: relative; display: flex; align-items: flex-start; justify-content: flex-end; padding: 73px calc(43 / 375 * 100%) 0; }
.m-header .m-menu-toggle { position: absolute; top: 70px; left: calc(43 / 375 * 100% - 9px); padding: 9px !important; }
.m-brand { font-size: 15px !important; font-weight: 700 !important; line-height: 20px; }
.m-brand span { font-weight: 300; color: #bababa; }
.m-header:has(.m-page-heading) { justify-content: flex-start; }
.m-header:has(.m-page-heading) .m-menu-toggle { display: none; }
.m-page-heading { font-size: 18px !important; font-weight: 600 !important; }
.m-menu-layer { position: fixed; inset: 0; z-index: 100; }
.m-menu-shade { position: absolute; inset: 0; background: rgba(0,0,0,.16) !important; width: 100%; height: 100%; }
.m-menu { background: white; position: relative; height: min(calc(346px + env(safe-area-inset-top, 0px)), 100%); overflow-y: auto; display: flex; flex-direction: column; gap: 32px; padding: calc(115px + env(safe-area-inset-top, 0px)) calc(43 / 375 * 100%) 32px; font-size: 18px; line-height: 24px; font-weight: 600; }
.m-menu-close { position: absolute; top: calc(35px + env(safe-area-inset-top, 0px)); left: calc(43 / 375 * 100% - 9px); padding: 9px !important; }
.m-menu-close img { transform: rotate(90deg); }
body.m-overlay-open { overflow: hidden; }
.m-essay-list { margin: 0 calc(43 / 375 * 100%); padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
.m-header:has(+ .m-essay-list) .m-brand { font-size: 17px !important; line-height: 22px; }
/* Keep the shared PC palette and weights, with one larger mobile list text size. */
.m-essay-card { display: flex; flex-direction: column; margin-bottom: 56px; min-height: 56px; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.m-essay-card ._date, .m-article > ._date { font-size: 16px; line-height: 22px; }
.m-essay-card h2, .m-article > .essay-title { font-size: 24px; line-height: 32px; }
.m-essay-card h2 { margin: 10px 0 0; }
.m-essay-card .m-preview { width: 100%; height: 80px; margin-top: 22px; object-fit: cover; border-radius: 5px; }
/* Match the desktop summary font fallback and its computed lighter weight. */
.m-essay-card .m-summary { display: block; font-family: "Segoe UI", "Hiragino Sans GB", "Hiragino Sans GB W3", Microsoft JhengHei, WenQuanYi Micro Hei, "Microsoft YaHei", sans-serif; font-weight: 100; font-size: 22px; line-height: 30px; }
.m-essay-card .m-summary p { margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; font-size: 12px; }
.m-pagination [data-action="prev-page"] { grid-column: 1; justify-self: start; }
.m-pagination > span { grid-column: 2; }
.m-pagination [data-action="next-page"] { grid-column: 3; justify-self: end; }
.m-pagination button { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.m-pagination button:disabled { opacity: .2; cursor: default; }
.m-essay-list .m-pagination { margin-top: 8px; gap: 14px; font-size: 14px; line-height: 20px; }
.m-essay-list .m-pagination button { gap: 14px; }
.m-next-icon { transform: scaleX(-1); }
.m-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-gallery-grid a { aspect-ratio: 1; overflow: hidden; }
.m-gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
.m-detail { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.m-detail-banner { flex: 0 0 auto; height: clamp(64px, 18dvh, 120px); background-size: cover; background-position: center; }
.m-detail > main { flex: 1 1 auto; }
.m-gallery-images { padding: calc(24px + env(safe-area-inset-top, 0px)) 0 16px; display: flex; flex-direction: column; gap: 8px; }
.m-gallery-images img { width: 100%; height: auto; flex: 0 0 auto; }
.m-detail-bar { flex: 0 0 auto; padding: 10px max(29px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(29px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 24px; background: white; z-index: 30; font-size: 12px; }
.m-detail-bar .m-back { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-comment-button { display: flex; align-items: center; gap: 8px; font-weight: 700 !important; min-height: 44px; }
.m-next { padding: 10px !important; margin-right: 3px; }
.m-article { padding: 54px calc(44 / 375 * 100%) 24px calc(42 / 375 * 100%); --m-article-font-scale: .875; font-size: calc(12px * var(--m-article-font-scale)); line-height: calc(16px * var(--m-article-font-scale)); user-select: text; }
/* Fill short articles without fixing the toolbar or introducing an inner scroller. */
.m-article { display: flex; flex-direction: column; min-height: 100svh; min-height: 100dvh; }
.m-article > * { flex: 0 0 auto; }
/* Align only the article banner; leave the verified document shell unchanged. */
.m-article:has(> ._banner) { padding-top: 0; }
.m-article > .m-detail-bar { margin: auto calc(-44 / 375 * 100vw) -24px calc(-42 / 375 * 100vw); padding-top: 34px; font-size: calc(12px * var(--m-article-font-scale)); }
/* Desktop metadata uses viewport widths; size it to the padded article instead. */
#mobileApp .m-article > .essay-title, #mobileApp .m-article > ._date { width: auto; }
.m-article > .essay-title { margin: 0 0 10px; overflow-wrap: anywhere; }
.m-article > ._date { display: block; margin-bottom: 17px; }
.m-article ._banner { margin: 0 calc(-44 / 375 * 100vw) 18px calc(-42 / 375 * 100vw); height: 120px; background-size: cover; background-position: center; }
.m-article ._banner::after { content: none; }
/* Preserve Markdown hierarchy and colors while reducing all article text together. */
.m-article .essay-context { width: auto; min-width: 0; margin: 0; font-size: calc(16px * var(--m-article-font-scale)); line-height: normal; overflow-wrap: anywhere; }
#mobileApp .essay-context a { color: #ff861e; }
.m-article img { max-width: 100%; height: auto; }
.m-article .essay-context pre { max-width: 100%; overflow-x: auto; overflow-wrap: normal; font-size: calc(14px * var(--m-article-font-scale)); }
.m-article .essay-context code.code, .m-article .essay-context ol.fn-ol, .m-article .essay-context .essay-img::before { font-size: calc(14px * var(--m-article-font-scale)); }
.m-article .essay-context ol.fn-ol a.fnref { font-size: calc(12px * var(--m-article-font-scale)); }
.m-article .essay-context iframe, .m-article .essay-context video { max-width: 100%; }
.m-article .essay-context ._youtube { width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* The PC closing quote has a 700px offset, so anchor both marks to the quote on mobile. */
.m-article .essay-context blockquote { position: relative; }
.m-article .essay-context blockquote::before, .m-article .essay-context blockquote::after { margin: 0; font-size: calc(50px * var(--m-article-font-scale)); line-height: 1; pointer-events: none; }
.m-article .essay-context blockquote::before { top: -20px; left: 10px; }
.m-article .essay-context blockquote::after { bottom: -20px; right: 10px; }
.m-article .essay-hr { margin: 24px 0; }
.m-article .essay-end-tip { width: 30px; flex-shrink: 0; padding: 5px 0; font-size: calc(10px * var(--m-article-font-scale)); line-height: calc(14px * var(--m-article-font-scale)); text-align: center; }
.m-article .essay-hr ._tags { margin-left: 26px; font-size: calc(10px * var(--m-article-font-scale)); width: auto; color: #d4d4d4; }
.m-article .essay-hr ._tags > em { color: #53dca3; }
.m-article table { display: block; overflow-x: auto; }
.m-archive, .m-about, .m-links { padding: 29px calc(43 / 375 * 100%) 60px; }
.m-archive details { margin-bottom: 28px; }
.m-archive summary { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 18px; line-height: 24px; list-style: none; cursor: pointer; }
.m-archive summary::-webkit-details-marker { display: none; }
.m-archive details[open] summary img { visibility: hidden; }
.m-archive ul { margin: 32px 0 0; padding: 0 17px 0 23px; list-style: none; }
.m-archive li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; line-height: 17px; margin-bottom: 16px; }
.m-archive li a { min-width: 0; overflow-wrap: anywhere; }
.m-archive time { color: #b3b3b3; white-space: nowrap; font-size: 10px; font-weight: 300; }
.m-about h2 { font-size: 18px; line-height: 24px; margin: 0 0 20px; }
.m-about p { font-size: 12px; line-height: 16px; margin: 0 0 28px; }
.m-about section { margin-top: 58px; }
.m-computer-placeholder { height: 170px; border: 1px solid #f2f2f2; background: repeating-linear-gradient(to bottom,#fbfbfb 0px,#fbfbfb 25px,white 25px,white 48px); }
.m-links { display: flex; flex-direction: column; gap: 28px; }
.m-comments-panel { position: fixed; top: min(119px, 15dvh); inset-inline: 0; bottom: 0; background: white; z-index: 60; display: flex; flex-direction: column; }
.m-comments-panel > header { height: 81px; padding: 23px max(43px, env(safe-area-inset-right, 0px)) 20px max(23px, env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; align-items: flex-start; flex-shrink: 0; }
.m-comments-panel > header button { padding: 5px !important; }
.m-comments-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 max(23px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(23px, env(safe-area-inset-left, 0px)); flex: 1; min-height: 0; }
#mobileApp #mixxopost { margin: 0; width: 100%; }
#mobileApp .mixxo-post { border-radius: 0; margin: 20px 0 0; padding: 0; font-size: 10px; }
#mobileApp .mixxo-user-info { flex-direction: column !important; }
#mobileApp #mixxopost .mixxo-user-info > div { width: 100% !important; border-bottom: 1px dashed #ededed; border-right: 0; height: 35px; padding: 0 16px; }
#mobileApp .mp-info, #mobileApp .mp-label { font-size: 10px; height: 34px; line-height: 34px; }
#mobileApp .mixxo-user-comments { margin: 0; }
#mobileApp #mp-comments-panel { display: none; }
#mobileApp #mp-post-lists { padding: 0; margin: 0; }
#mobileApp .mp-post-body { margin-bottom: 24px; }
#mobileApp .mp-post-body .headimg { min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; margin-right: 11px; }
#mobileApp .mpr-nick { font-size: 12px; font-weight: 400; }
#mobileApp .mpr-header .mpr-date { font-size: 8px; padding-left: 8px; }
#mobileApp .mpr-header .mp-writer { font-size: 8px; padding: 0 4px; margin: 0 3px; }
#mobileApp .mpr-body { font-size: 10px; line-height: 16px; }
#mobileApp .mpr-footer { font-size: 12px; }
#mobileApp .mp-reply { margin: 0; padding-left: 47px; }
#mobileApp #mixxopost #mp-comment { min-height: 58px; font-size: 10px; padding: 12px 16px; }
#mobileApp #mp-post { width: 70px; height: 27px; font-size: 10px; background: black; color: white; }
#mobileApp .mixxo-footer label { font-size: 10px; }
.m-error { font-size: 14px; margin: 80px 43px; }
.m-error a, .m-error button { display: inline-block; padding: 16px 0 !important; margin-right: 24px; }
@media (orientation: landscape) and (max-height: 450px) {
    .m-home-stage { width: 100%; height: 100%; transform: none; }
    .m-home-menu { top: 16px; }
    .m-home-nav { top: 75px; }
    .m-home-nav::before { left: calc(-43 / 375 * 100vw); }
    .m-home-card { top: 170px; height: 130px; }
    .m-last { top: 185px; }
    .m-triangle { top: 85px; left: 24%; opacity: .35; }
    .m-profile { top: 30px; left: 58%; }
    .m-squiggle { top: 245px; left: 49%; }
}
@media (prefers-reduced-motion: reduce) { #mobileApp * { animation: none !important; scroll-behavior: auto !important; } }