/* Layouts designed for mobile and tablet screen sizes. */
:root {
  --visual-height: 100dvh;
  --visual-top: 0px;
  --tablet-sidebar: 176px;
  --mobile-page-gap: 16px;
  --sheet-top-gap: 24px;
  --sheet-radius: 20px;
  --mobile-input-font: 16px;
  --mobile-title-font: 24px;
  --mobile-metric-font: 25px;
  --mobile-action-gap: 8px;
  --mobile-note-gap: 12px;
  --mobile-label-font: 11px;
  --tablet-conversation-list: 220px;
  --more-dot-size:3px;
  --tablet-brand-font:18px;
  --tablet-brand-icon:32px;
  --tablet-label-font:12px;
  --compact-caption-font:10px;
  --tablet-directory-chrome:220px;
  --mobile-control-min:80px;
  --mobile-primary-value:30px;
  --control-icon-size:24px;
  --nav-icon-label-gap:3px;
}
.more-icon { display:flex; align-items:center; justify-content:center; gap:var(--more-dot-size); }
.more-icon i { width:var(--more-dot-size); height:var(--more-dot-size); border-radius:50%; background:currentColor; }
body:has(dialog[open]) { overflow:hidden; }
.country-search { margin-top:var(--mobile-action-gap); }
.country-search summary { min-height:var(--touch); display:flex; align-items:center; color:var(--teal); cursor:pointer; }
.workspace,.panel,.column,main,.conversation-reader,.conversation-directory { min-width:0; }
.sidebar { overflow-y:auto; overscroll-behavior:contain; }
.sidebar>.brand,.sidebar>nav { flex-shrink:0; }
.sidebar nav { min-height:0; overflow:visible; }
.sidebar-bottom { flex-shrink:0; }
.panel-heading>h2,.panel-heading>div { min-width:0; overflow-wrap:anywhere; }
dialog { max-height:calc(var(--visual-height) - var(--sheet-top-gap) * 2); overscroll-behavior:contain; }
dialog[open] .auth-form { overflow-wrap:anywhere; }
.all-menu { display:grid; gap:var(--mobile-action-gap); }
.all-menu .nav-item { margin:0; width:100%; text-align:left; border:0; background:transparent; }
.all-menu .nav-item.active { background:var(--mint); color:var(--teal); }
.all-menu .nav-item:hover { background:var(--canvas); }
.choice { min-height:var(--touch); align-items:center; }
.choice input { margin-top:0; }
.challenge-mission { min-height:var(--touch); cursor:pointer; }
.chat-sources summary { min-height:var(--touch); display:flex; align-items:center; }
.table-scroll { max-width:100%; overscroll-behavior-x:contain; }
.ranking-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-5); }
.ranking-pagination .button { min-height:var(--touch); }

:root[data-layout="tablet"] { --sidebar:var(--tablet-sidebar); --gap:var(--space-4); }
:root[data-layout="tablet"] .sidebar { padding:var(--space-5) var(--mobile-note-gap); }
:root[data-layout="tablet"] .brand { font-size:var(--tablet-brand-font); gap:var(--mobile-action-gap); padding-inline:0; }
:root[data-layout="tablet"] .brand .icon { width:var(--tablet-brand-icon); height:var(--tablet-brand-icon); }
:root[data-layout="tablet"] .brand small { font-size:var(--compact-caption-font); letter-spacing:0; }
:root[data-layout="tablet"] .nav-item { gap:var(--mobile-action-gap); padding:var(--mobile-note-gap) var(--mobile-action-gap); font-size:var(--tablet-label-font); }
:root[data-layout="tablet"] .workspace { padding-inline:var(--space-5); }
:root[data-layout="tablet"] .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
:root[data-layout="tablet"] .metric { padding:var(--space-4); gap:var(--mobile-action-gap); }
:root[data-layout="tablet"] .metric-icon { display:none; }
:root[data-layout="tablet"] .metric-value { font-size:var(--mobile-metric-font); overflow-wrap:anywhere; }
:root[data-layout="tablet"] .dashboard-grid { grid-template-columns:minmax(0,1fr); }
:root[data-layout="tablet"] .conversation-layout { grid-template-columns:minmax(0,var(--tablet-conversation-list)) minmax(0,1fr); }
:root[data-layout="tablet"] .conversation-directory { max-height:calc(var(--visual-height) - var(--tablet-directory-chrome)); overflow-y:auto; }
:root[data-layout="tablet"] .chat-history-body { display:block; }
:root[data-layout="tablet"] .mobile-history-toggle { display:none; }
:root[data-layout="tablet"] .conversation-reader { padding:var(--space-4); }
:root[data-layout="tablet"] .chat-message { padding:var(--mobile-note-gap); max-width:100%; }

:root[data-layout="mobile"] { --gap:var(--mobile-page-gap); }
:root[data-layout="mobile"] .sidebar { display:none; }
:root[data-layout="mobile"] .workspace {
  margin:0;
  padding:env(safe-area-inset-top) max(var(--mobile-page-gap),env(safe-area-inset-right))
    calc(var(--mobile-nav) + env(safe-area-inset-bottom) + var(--space-5))
    max(var(--mobile-page-gap),env(safe-area-inset-left));
}
:root[data-layout="mobile"] .page-header { margin:0; padding:var(--space-5) 0 var(--space-4); gap:var(--mobile-note-gap); align-items:flex-start; flex-wrap:wrap; }
:root[data-layout="mobile"] h1 { font-size:var(--mobile-title-font); }
:root[data-layout="mobile"] .page-header .eyebrow { display:none; }
:root[data-layout="mobile"] .page-header .muted { font-size:var(--font-small); }
:root[data-layout="mobile"] .header-actions { gap:var(--mobile-action-gap); flex-wrap:wrap; }
:root[data-layout="mobile"] .header-actions .button { min-height:var(--touch); padding-inline:var(--mobile-note-gap); }
:root[data-layout="mobile"] .panel { padding:var(--space-4); }
:root[data-layout="mobile"] .panel-heading { align-items:flex-start; flex-wrap:wrap; }
:root[data-layout="mobile"] .panel-heading .button { min-height:var(--touch); }
:root[data-layout="mobile"] input,:root[data-layout="mobile"] select,:root[data-layout="mobile"] textarea { font-size:var(--mobile-input-font); }
:root[data-layout="mobile"] .preview-bar { align-items:flex-start; padding-block:var(--mobile-action-gap); }
:root[data-layout="mobile"] .preview-bar select { min-height:var(--touch); min-width:var(--mobile-control-min); font-size:var(--mobile-input-font); }
:root[data-layout="mobile"] .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root[data-layout="mobile"] .metric { padding:var(--space-4); gap:var(--mobile-note-gap); align-items:flex-start; }
:root[data-layout="mobile"] .metric:first-child { grid-column:1/-1; background:var(--surface); align-items:center; }
:root[data-layout="mobile"] .metric:not(:first-child) .metric-icon { display:none; }
:root[data-layout="mobile"] .metric-value { font-size:var(--mobile-metric-font); overflow-wrap:anywhere; }
:root[data-layout="mobile"] .metric:first-child .metric-value { font-size:var(--mobile-primary-value); }
:root[data-layout="mobile"] .dashboard-grid,:root[data-layout="mobile"] .challenge-layout,:root[data-layout="mobile"] .knowledge-grid,
:root[data-layout="mobile"] .admin-detail-grid,:root[data-layout="mobile"] .conversation-layout { grid-template-columns:minmax(0,1fr); }
:root[data-layout="mobile"] .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root[data-layout="mobile"] .inline-form { flex-wrap:wrap; }
:root[data-layout="mobile"] .inline-form input { flex:1 1 100%; }
:root[data-layout="mobile"] .inline-form .button { width:100%; }
:root[data-layout="mobile"] .review-actions { gap:var(--mobile-action-gap); }
:root[data-layout="mobile"] .review-actions .button { flex:1 1 auto; }
:root[data-layout="mobile"] .form-actions { flex-wrap:wrap; }
:root[data-layout="mobile"] .form-actions .button { flex:1; }
:root[data-layout="mobile"] .challenge-progress { grid-template-columns:minmax(0,1fr); gap:var(--mobile-note-gap); }
:root[data-layout="mobile"] .challenge-mission { padding-block:var(--space-4); gap:var(--mobile-note-gap); }
:root[data-layout="mobile"] .challenge-mission small { font-size:var(--font-small); }
:root[data-layout="mobile"] .challenge-reward .button { width:100%; }
:root[data-layout="mobile"] .own-rank { flex-wrap:wrap; gap:var(--mobile-note-gap); }
:root[data-layout="mobile"] .ranking-pagination { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
:root[data-layout="mobile"] .ranking-pagination>span { grid-column:1/-1; order:-1; text-align:center; }
:root[data-layout="mobile"] .ranking-pagination>.button { width:100%; }
:root[data-layout="mobile"] .conversation-directory { max-height:none; overflow:visible; }
:root[data-layout="mobile"] .chat-history-body { display:none; }
:root[data-layout="mobile"] .conversation-directory.expanded .chat-history-body { display:block; max-height:calc(var(--visual-height) / 2); overflow:auto; }
:root[data-layout="mobile"] .mobile-history-toggle { display:flex; }
:root[data-layout="mobile"] .chat-transcript { max-height:calc(var(--visual-height) / 2); }
:root[data-layout="mobile"] .chat-composer textarea { min-height:var(--mobile-control-min); }
:root[data-layout="mobile"] .chat-composer .panel-heading { align-items:center; }
:root[data-layout="mobile"] .chat-message { max-width:100%; padding:var(--mobile-note-gap); }
:root[data-layout="mobile"] .chat-suggestions .button { width:100%; }
:root[data-layout="mobile"] .knowledge-test { position:static; }
:root[data-layout="mobile"] footer { text-align:left; }
:root[data-layout="mobile"] .mobile-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  padding:var(--mobile-action-gap) max(var(--mobile-action-gap),env(safe-area-inset-right))
    calc(var(--mobile-action-gap) + env(safe-area-inset-bottom)) max(var(--mobile-action-gap),env(safe-area-inset-left));
  min-height:var(--mobile-nav); background:var(--surface); border-top:1px solid var(--line);
}
:root[data-layout="mobile"] .mobile-nav>a,:root[data-layout="mobile"] .mobile-nav>button {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:var(--touch); min-width:0; padding:0; gap:var(--nav-icon-label-gap); border:0; border-radius:var(--radius);
  background:transparent; color:var(--muted); font-size:var(--mobile-label-font);
}
:root[data-layout="mobile"] .mobile-nav .icon { width:var(--control-icon-size); height:var(--control-icon-size); }
:root[data-layout="mobile"] .mobile-nav .active { background:var(--mint); color:var(--teal); font-weight:700; }
:root[data-layout="mobile"] #notification {
  left:var(--mobile-note-gap); right:var(--mobile-note-gap);
  bottom:calc(var(--mobile-nav) + env(safe-area-inset-bottom) + var(--mobile-note-gap));
}
:root[data-layout="mobile"] dialog {
  position:fixed; margin:0; inset:auto 0 auto;
  top:calc(var(--visual-top) + var(--visual-height)); transform:translateY(-100%);
  width:100%; max-width:none; max-height:calc(var(--visual-height) - var(--sheet-top-gap));
  border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; border-bottom:0;
}
:root[data-layout="mobile"] dialog .auth-form {
  padding:var(--space-5) var(--space-4) max(var(--space-5),env(safe-area-inset-bottom));
}
:root[data-layout="mobile"] .all-menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
:root[data-layout="mobile"] .all-menu .nav-item { padding:var(--mobile-note-gap); gap:var(--mobile-action-gap); font-size:var(--font-small); }
:root[data-layout="mobile"][data-keyboard="open"] .mobile-nav { display:none; }
:root[data-layout="mobile"][data-keyboard="open"] #notification { bottom:var(--mobile-note-gap); }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* Compact transaction receipts retain amount and balance without horizontal scrolling. */
.ledger-mobile-label { display:none; }
.ledger-table .ledger-reason { white-space:normal; overflow-wrap:anywhere; }
:root[data-layout="mobile"] .ledger-table,
:root[data-layout="mobile"] .ledger-table tbody { display:block; width:100%; min-width:0; }
:root[data-layout="mobile"] .ledger-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
:root[data-layout="mobile"] .ledger-table tbody tr {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"date date" "reason reason" "delta balance";
  gap:var(--mobile-action-gap); padding:var(--space-4) 0; border-bottom:1px solid var(--line);
}
:root[data-layout="mobile"] .ledger-table tbody tr:last-child { border-bottom:0; }
:root[data-layout="mobile"] .ledger-table td { display:block; min-width:0; padding:0; border:0; white-space:normal; overflow-wrap:anywhere; }
:root[data-layout="mobile"] .ledger-date { grid-area:date; color:var(--muted); font-size:var(--mobile-label-font); }
:root[data-layout="mobile"] .ledger-reason { grid-area:reason; }
:root[data-layout="mobile"] .ledger-delta { grid-area:delta; font-weight:600; }
:root[data-layout="mobile"] .ledger-balance { grid-area:balance; text-align:right; }
:root[data-layout="mobile"] .ledger-mobile-label { display:block; font-size:var(--mobile-label-font); color:var(--muted); font-weight:400; }

.startup-error { max-width:var(--shop-copy-width,650px); margin:var(--space-5) auto; padding:var(--space-5); }
.startup-error p { margin-block:var(--space-4); }

/* Use native script fonts without adding external font requests. */
:root:lang(zh) { --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif; }
:root:lang(ja) { --font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif; }
:root:lang(th) { --font:-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Thonburi",sans-serif; }
:root:lang(mn) { --font:-apple-system,BlinkMacSystemFont,"Noto Sans","Segoe UI",sans-serif; }
.preview-bar { flex-wrap:wrap; overflow-wrap:anywhere; }
.preview-bar select { flex-shrink:0; max-width:100%; }
.nav-item>span { min-width:0; overflow-wrap:anywhere; }
.nav-item>.icon { flex-shrink:0; }
.mobile-nav a,.mobile-nav>button { text-align:center; min-width:0; overflow-wrap:anywhere; }
:root { --language-selector-min:136px; --language-selector-end:28px; }
:root[data-layout] .preview-bar select {
  min-width:var(--language-selector-min);
  padding-inline:var(--mobile-action-gap) var(--language-selector-end);
}

.preview-note { flex:1; min-width:0; overflow-wrap:anywhere; }
.preview-bar select { margin-inline-start:auto; }

:root[data-layout="tablet"] .page-header { flex-wrap:wrap; align-items:flex-start; }
:root[data-layout="tablet"] .header-actions { flex-shrink:0; flex-wrap:wrap; }
:root[data-layout="tablet"] .header-actions .button { flex-shrink:0; }

.chat-file-panel{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.chat-file-choose{position:relative;overflow:hidden;cursor:pointer}
.chat-file-choose input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.chat-file-choose:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.chat-attachments{list-style:none;padding:0;display:grid;gap:8px;margin:8px 0}
.chat-attachments li{display:flex;justify-content:space-between;gap:12px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.chat-attachments li>div:first-child{min-width:0;flex:1}
.chat-attachments strong,.chat-attachments a,.chat-attachments span{overflow-wrap:anywhere}
.chat-attachments small{display:block;color:var(--muted);margin-top:4px}
.chat-attachments .review-actions{flex-shrink:0}
@media(max-width:480px){.chat-attachments li{flex-wrap:wrap}.chat-attachments .review-actions{width:100%;justify-content:flex-end}}

.chat-markdown{overflow-wrap:anywhere;white-space:normal;line-height:1.65}
.chat-markdown p{white-space:normal;margin:0 0 10px}
.chat-markdown :last-child{margin-bottom:0}
.chat-markdown h3,.chat-markdown h4,.chat-markdown h5,.chat-markdown h6{margin:16px 0 8px;font-size:1.1em}
.chat-markdown ul,.chat-markdown ol{padding-left:24px;margin:8px 0 12px}
.chat-markdown li+li{margin-top:5px}
.chat-markdown a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.chat-markdown code{font-family:ui-monospace,monospace;font-size:.92em;background:var(--canvas);border-radius:4px;padding:2px 4px}
.chat-markdown pre{overflow-x:auto;max-width:100%;padding:14px;background:var(--canvas);border:1px solid var(--line);border-radius:10px;white-space:pre}
.chat-markdown pre code{padding:0;background:transparent;white-space:pre}
.chat-markdown blockquote{margin:12px 0;padding:4px 14px;border-left:3px solid var(--teal);color:var(--muted)}
.chat-markdown .chat-plain{white-space:pre-wrap}
.chat-table{overflow-x:auto;max-width:100%;margin:12px 0;border:1px solid var(--line);border-radius:10px}
.chat-table table{border-collapse:collapse;min-width:100%;font-size:inherit}
.chat-table th,.chat-table td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--line);white-space:normal;min-width:100px}
.chat-table th{background:var(--canvas)}

/* Legacy sign-in is a quiet migration link, separate from the primary phone login. */
.auth-legacy-kakao { margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--line); }
.auth-legacy-kakao>.button { padding-inline:0; color:var(--teal); text-decoration:underline; text-underline-offset:.2em; }
.auth-legacy-kakao details { margin-top:8px; }
.auth-legacy-kakao summary { cursor:pointer; color:var(--muted); font-size:var(--font-small); padding-block:8px; }
.auth-transition-note { padding:12px; margin-block:8px 16px; border-radius:8px; background:var(--mint); }

/* Live ranking honors remain smaller than the permanent membership crown. */
.ranking-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ranking-column{min-width:0;padding:20px}
.ranking-column .panel-heading{margin-bottom:12px}
.ranking-column .panel-heading p{margin:5px 0 0}
.ranking-list{list-style:none;margin:12px 0 0;padding:0}
.ranking-person{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:64px;padding:10px 6px;border-bottom:1px solid var(--line)}
.ranking-person:last-child{border-bottom:0}
.ranking-place{font-size:16px;font-weight:700;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.ranking-place.is-top{color:var(--accent)}
.ranking-identity{min-width:0}.ranking-identity .member-name{flex-wrap:wrap;gap:4px 8px}
.ranking-identity .member-nickname{overflow-wrap:anywhere}
.ranking-score{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:14px}
.ranking-column .own-rank{min-height:50px;flex-wrap:wrap;gap:8px;padding:10px 12px}
.member-decorations,.rank-honors{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;vertical-align:middle}
.sidebar .profile .member-name:has(.rank-honor){flex-wrap:wrap;row-gap:2px}
.sidebar .profile .member-name:has(.rank-honor) .member-nickname{flex-basis:100%;max-width:100%}
.rank-honors:empty{display:none}.rank-honor{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;line-height:1;flex:0 0 auto}
.rank-honor img{display:block;width:26px;height:26px;object-fit:contain}
.rank-honor-tooltip{position:absolute;z-index:40;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:7px 10px;background:#182235;color:#fff;border-radius:8px;white-space:nowrap;font-size:12px;line-height:1.4;box-shadow:0 3px 12px #0002;visibility:hidden;pointer-events:none}
.rank-honor:hover .rank-honor-tooltip,.rank-honor:focus .rank-honor-tooltip{visibility:visible}
.rank-honor:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ranking-column .ranking-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px}
@media(max-width:960px){.ranking-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.ranking-column{padding:14px}.ranking-person{grid-template-columns:28px minmax(0,1fr) auto;gap:8px}.ranking-score{font-size:13px}.rank-honor img{width:24px;height:24px}}