/* GGWiki — namuwiki-style markup, 꾸미기 editor tools and phone fixes.
   Loaded on every page after style.css/community.css (templates/_header_extra.html), so equal-specificity
   rules here win without editing the existing ones. CSP: no inline styles anywhere — every colour and size
   the markup can produce is a class below. */

/* ── namu markup & editor ── */
/* palette — every pair is ≥4.5:1 against both themes' page and card backgrounds (tests/test_namu_markup.py checks) */
.cm-c-red{color:#ff8f8f}
:root[data-theme=light] .cm-c-red{color:#c2232c}
.cm-c-orange{color:#ffaa66}
:root[data-theme=light] .cm-c-orange{color:#ad4a00}
.cm-c-yellow{color:#f0cf55}
:root[data-theme=light] .cm-c-yellow{color:#856000}
.cm-c-lime{color:#b6e36a}
:root[data-theme=light] .cm-c-lime{color:#4a7500}
.cm-c-green{color:#6fd392}
:root[data-theme=light] .cm-c-green{color:#17773a}
.cm-c-teal{color:#5cd4c5}
:root[data-theme=light] .cm-c-teal{color:#0b6e66}
.cm-c-sky{color:#6cc5fb}
:root[data-theme=light] .cm-c-sky{color:#0868a0}
.cm-c-blue{color:#8db0ff}
:root[data-theme=light] .cm-c-blue{color:#1d55d4}
.cm-c-navy{color:#a2abff}
:root[data-theme=light] .cm-c-navy{color:#24318f}
.cm-c-purple{color:#c89cff}
:root[data-theme=light] .cm-c-purple{color:#7630bd}
.cm-c-pink{color:#ff8dc7}
:root[data-theme=light] .cm-c-pink{color:#bd246f}
.cm-c-magenta{color:#f08ae6}
:root[data-theme=light] .cm-c-magenta{color:#a2229a}
.cm-c-brown{color:#dba476}
:root[data-theme=light] .cm-c-brown{color:#8a4a1c}
.cm-c-gray{color:#a7adb9}
:root[data-theme=light] .cm-c-gray{color:#5a606d}
.cm-c-black{color:#15171c;background:#d9dce3;border-radius:3px;padding:0 .2em}
:root[data-theme=light] .cm-c-black{color:#15171c;background:none;padding:0}
.cm-c-white{color:#ffffff}
:root[data-theme=light] .cm-c-white{color:#ffffff;background:#3a3f4b;border-radius:3px;padding:0 .2em}
.cm-bg-red{background:#4c1d22}
:root[data-theme=light] .cm-bg-red{background:#fde1e3}
.cm-bg-orange{background:#4a2914}
:root[data-theme=light] .cm-bg-orange{background:#ffe7d3}
.cm-bg-yellow{background:#3f3510}
:root[data-theme=light] .cm-bg-yellow{background:#fff2c2}
.cm-bg-lime{background:#2f3c12}
:root[data-theme=light] .cm-bg-lime{background:#ecf7d2}
.cm-bg-green{background:#163b27}
:root[data-theme=light] .cm-bg-green{background:#dcf3e4}
.cm-bg-teal{background:#113a3a}
:root[data-theme=light] .cm-bg-teal{background:#d4f1ed}
.cm-bg-sky{background:#11334a}
:root[data-theme=light] .cm-bg-sky{background:#daeefb}
.cm-bg-blue{background:#1b2b58}
:root[data-theme=light] .cm-bg-blue{background:#dfe7ff}
.cm-bg-navy{background:#1a1f4d}
:root[data-theme=light] .cm-bg-navy{background:#dadcf6}
.cm-bg-purple{background:#341f52}
:root[data-theme=light] .cm-bg-purple{background:#ece0fb}
.cm-bg-pink{background:#4b1c3a}
:root[data-theme=light] .cm-bg-pink{background:#fddff0}
.cm-bg-magenta{background:#451843}
:root[data-theme=light] .cm-bg-magenta{background:#f8dbf5}
.cm-bg-brown{background:#3e2a1b}
:root[data-theme=light] .cm-bg-brown{background:#f0e1d4}
.cm-bg-gray{background:#2b2f37}
:root[data-theme=light] .cm-bg-gray{background:#e8eaee}
.cm-bg-black{background:#050608;color:#f3f4f6}
:root[data-theme=light] .cm-bg-black{background:#2a2d34;color:#f3f4f6}
.cm-bg-white{background:#eceef2;color:#14161c}
:root[data-theme=light] .cm-bg-white{background:#ffffff;color:#14161c}
.cm-bg-black a,.cm-bg-white a,:root[data-theme=light] .cm-bg-black a,.cm-c-black a,.cm-c-white a{color:inherit;text-decoration:underline}
[class*=" cm-c-"] a,[class^="cm-c-"] a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.cm-size-p1{font-size:1.15em}.cm-size-p2{font-size:1.3em}.cm-size-p3{font-size:1.5em}.cm-size-p4{font-size:1.75em}.cm-size-p5{font-size:2em}
.cm-size-p3,.cm-size-p4,.cm-size-p5{line-height:1.35}
.cm-size-m1{font-size:.92em}.cm-size-m2{font-size:.85em}.cm-size-m3{font-size:.78em}.cm-size-m4{font-size:.72em}.cm-size-m5{font-size:.66em}
.cm-wiki u,.cm-preview u{text-underline-offset:3px}
.cm-wiki del,.cm-preview del{color:var(--muted)}
.cm-code{font-family:var(--mono);font-size:.9em;padding:1px 5px;border:1px solid var(--line);border-radius:4px;background:var(--surface-2);color:var(--text);overflow-wrap:anywhere}
.cm-codeblock{max-height:none;margin:14px 0;white-space:pre;overflow:auto;overflow-wrap:normal;font-family:var(--mono);font-size:13px;color:var(--text)}
.cm-page .cm-pre code,.cm-pre code{padding:0;border:0;border-radius:0;background:none;color:inherit;font-size:inherit}  /* not the inline-code chip of .cm-page code */

/* lists: '- ', '* ', '1. ' and nesting by leading spaces */
.cm-list{margin:0 0 16px;padding-left:1.45em}
.cm-list .cm-list{margin:4px 0}
.cm-list li{margin:4px 0;padding-left:2px;min-width:0}
ul.cm-list>li::marker{color:var(--accent-light)}
ol.cm-list>li::marker{color:var(--accent-light);font-weight:700}
.cm-hr{height:0;margin:22px 0;border:0;border-top:1px solid var(--line-strong)}

/* 접기 {{{#!folding 제목 … }}} and {{{#!wiki …}}} boxes */
.cm-fold{margin:14px 0;border:1px solid var(--line);border-radius:8px;background:var(--surface);min-width:0}
.cm-fold>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;cursor:pointer;list-style:none;color:var(--text);font-weight:700;line-height:1.45;border-radius:8px}
.cm-fold>summary::-webkit-details-marker{display:none}
.cm-fold>summary::before{content:"";flex:none;width:0;height:0;border:5px solid transparent;border-left:7px solid var(--accent-light);margin-right:-2px;transition:transform .15s;transform-origin:3px 5px}
.cm-fold[open]>summary::before{transform:rotate(90deg)}
.cm-fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cm-fold-body{min-width:0;padding:10px 14px 4px;border-top:1px solid var(--line)}
.cm-wikibox{min-width:0;margin:14px 0;padding:12px 14px 2px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}

/* tables: always inside a horizontal scroll box so a wide table never widens the page */
.cm-table-wrap{max-width:100%;margin:14px 0 18px;overflow-x:auto;border:1px solid var(--line-strong);border-radius:8px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cm-table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* max-content + capped cells: short columns stay on one line, long text wraps at a readable width and the
   box scrolls sideways — instead of every column being squeezed into a tall, one-word-wide strip */
.cm-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.cm-table caption{padding:8px 12px;border-bottom:1px solid var(--line-strong);text-align:left;font-weight:700;color:var(--text)}
.cm-table th,.cm-table td{min-width:3em;max-width:26em;padding:8px 12px;border:1px solid var(--line);vertical-align:top;text-align:left;overflow-wrap:break-word;word-break:keep-all}
.cm-table th{background:var(--surface-2);color:var(--text);font-weight:700;vertical-align:middle}
.cm-table tr>:first-child{border-left:0}.cm-table tr>:last-child{border-right:0}
.cm-table thead tr:first-child>*,.cm-table tbody:first-child tr:first-child>*{border-top:0}.cm-table tbody tr:last-child>*{border-bottom:0}
.cm-table p{margin:0}
.cm-al-c{text-align:center!important}.cm-al-l{text-align:left!important}.cm-al-r{text-align:right!important}
.cm-va-t{vertical-align:top!important}.cm-va-b{vertical-align:bottom!important}
.cm-table .cm-doc{white-space:nowrap}

/* footnotes [* …] */
.cm-fn-ref{font-size:.72em;line-height:0;vertical-align:super}
.cm-fn-ref a{display:inline-block;margin:-6px -2px;padding:6px 3px;color:var(--accent-light);font-weight:700;text-decoration:none}
.cm-fn-ref a:hover{text-decoration:underline}
.cm-footnotes{margin:30px 0 8px;padding-top:12px;border-top:1px solid var(--line-strong);color:var(--secondary);font-size:13.5px;line-height:1.7}
.cm-fn-title{margin:0 0 8px!important;color:var(--text);font-size:15px;font-weight:700}
.cm-fn-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.cm-fn-list li{display:flex;align-items:baseline;gap:6px;min-width:0;padding:2px 6px;margin:0 -6px;border-radius:6px;scroll-margin-top:calc(var(--topbar-h) + 16px)}
.cm-fn-list li:target{background:var(--accent-soft)}
.cm-fn-label{flex:none;color:var(--accent-light);font-weight:700}
.cm-fn-backs{flex:none;display:inline-flex;gap:2px}
.cm-fn-backs a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;color:var(--accent-light);font-size:12px;text-decoration:none;border-radius:4px}
.cm-fn-backs a:hover{background:var(--hover)}
.cm-fn-text{flex:1;min-width:0;color:var(--prose)}
.cm-fn-pop{position:fixed;left:8px;right:8px;bottom:calc(var(--mnav-h) + 12px + env(safe-area-inset-bottom));z-index:70;max-height:45vh;overflow:auto;padding:10px 14px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);color:var(--prose);font-size:14px;line-height:1.7}
.cm-fn-pop.is-bubble{position:absolute;right:auto;bottom:auto;width:min(420px,calc(100vw - 16px))}
.cm-fn-pop-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;min-width:0}
.cm-fn-pop-head strong{flex:1;min-width:0;color:var(--text);font-size:13px}
.cm-fn-pop-head a{color:var(--accent-light);font-size:12.5px}
.cm-fn-pop-head button{min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--secondary);font:inherit;font-size:12.5px;cursor:pointer}

/* #넘겨주기, 분류 bar, [[:분류:…]] links */
.cm-redirect-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 18px;padding:12px 14px;border:1px dashed var(--accent-line);border-radius:8px;background:var(--accent-soft);min-width:0}
.cm-redirect-box>*{min-width:0}
.cm-redirect-label{font-weight:700;color:var(--accent-light)}
.cm-redirected{display:flex;flex-wrap:wrap;gap:6px}
.cm-categories{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:26px 0 8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13.5px;line-height:1.4}
.cm-categories a{display:inline-flex;align-items:center;min-height:32px;max-width:100%;padding:4px 11px;border:1px solid var(--line-strong);border-radius:999px;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.cm-categories a:hover{border-color:var(--accent-line);color:var(--accent-light)}
.cm-categories .cm-cat-label{border-color:transparent;padding-left:4px;color:var(--secondary);font-weight:700}
.cm-cat-link{color:var(--accent-light)}

/* editor: 꾸미기 toolbar, colour and table popovers */
.cm-toolbar sup,.cm-toolbar sub{font-size:.7em;line-height:0}
.cm-tool-color{display:inline-block;padding-bottom:1px;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#e5484d,#f5a524,#30a46c,#3e8bf5,#8e4ec6) 1;font-weight:800}
.cm-tool-help{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:0 9px;border-radius:6px;color:var(--secondary);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.cm-tool-help:hover,.cm-tool-help:focus-visible{background:var(--hover);color:var(--text)}
.cm-pop{position:absolute;z-index:30;left:8px;top:46px;width:min(380px,calc(100% - 16px));padding:10px 12px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.cm-pop-head{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:10px}
.cm-pop-head strong{flex:none;font-size:14px}
.cm-pop-note{flex:1;min-width:0;color:var(--muted);font-size:12px;line-height:1.4}
.cm-pop-close{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--secondary);font:inherit;font-size:12.5px;cursor:pointer}
.cm-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cm-sw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:52px;padding:6px 2px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font:inherit;cursor:pointer}
.cm-sw span{font-size:19px;font-weight:800;line-height:1.25}
.cm-sw small{max-width:100%;color:var(--secondary);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-sw:hover,.cm-sw:focus-visible{border-color:var(--accent);outline:0}
.cm-table-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.cm-stepper{display:inline-flex;align-items:center;gap:4px}
.cm-stepper span{margin-right:2px;color:var(--secondary);font-size:13px}
.cm-stepper button{width:40px;height:40px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;font-size:18px;line-height:1;cursor:pointer}
.cm-stepper input{width:54px;height:40px;padding:0 4px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;text-align:center}
.cm-check{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--secondary);font-size:13.5px}
.cm-check input{width:18px;height:18px;accent-color:var(--accent)}

/* /category, /wiki/{id}/backlinks, /help/markup */
.namu-section{margin:24px 0}
.namu-section>h2{margin:0 0 12px;font-size:18px;letter-spacing:-.02em}
.namu-chips{display:flex;flex-wrap:wrap;gap:8px}
.namu-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:40px;padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--text);font-size:14px;text-decoration:none;overflow-wrap:anywhere}
.namu-chip:hover{border-color:var(--accent-line);color:var(--accent-light)}
.namu-chip-count{color:var(--muted);font-size:12px}
.namu-parents{margin:0 0 16px}
.namu-cat-desc{min-height:0;margin:0 0 8px;padding:14px 16px 2px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.namu-group{margin:0 0 16px}
.namu-initial{margin:0 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line);color:var(--accent-light);font-size:14px}
.namu-doc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 10px;margin:0;padding:0;list-style:none}
.namu-doc-list li{display:flex;align-items:center;gap:6px;min-width:0}
.namu-doc-list .cm-doc{min-height:36px;align-items:center;max-width:100%}
.namu-doc-rows{grid-template-columns:minmax(0,1fr)}
.namu-badge-redirect{border-color:var(--amber-line);color:var(--amber)}
.namu-search{display:flex;gap:8px;margin:0 0 18px}
.namu-search input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:16px}
.namu-hint,.namu-copy{margin:12px 0}
.namu-help-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.namu-help-toc a{display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;color:var(--secondary);font-size:13px;text-decoration:none}
.namu-help-toc a:hover{color:var(--accent-light);border-color:var(--accent-line)}
.namu-help-intro{margin:0 0 12px;color:var(--secondary);font-size:14px;line-height:1.7}
.namu-example{margin:0 0 16px}
.namu-example-label{margin-bottom:6px;color:var(--text);font-size:13.5px;font-weight:700}
.namu-example-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.namu-example-src{margin:0;max-height:none}
.namu-example-out.article-body{min-height:0;margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14.5px;line-height:1.8}
.namu-example-out>:last-child,.namu-example-out .cm-list:last-child{margin-bottom:0}
.namu-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.namu-palette li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.namu-palette-text{font-weight:700}
.namu-palette-cell{padding:1px 8px;border:1px solid var(--line);border-radius:4px;font-size:13px}
.namu-palette code{font-size:12px}
.wiki-toc-toggle{display:none}

/* ── mobile ── */
@media (max-width:760px){
  .namu-example-grid{grid-template-columns:minmax(0,1fr)}
  .namu-doc-list{grid-template-columns:minmax(0,1fr)}
  /* article editor: one scrolling row of tools; 미리보기 stays pinned at the right edge */
  .cm-editor[data-mode=article] .cm-toolbar{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .cm-editor[data-mode=article] .cm-toolbar::-webkit-scrollbar{display:none}
  .cm-editor[data-mode=article] .cm-preview-btn{position:sticky;right:0;z-index:1;margin-left:4px;background:var(--surface);box-shadow:-10px 0 10px var(--surface)}
  .cm-tool-help{min-height:40px}
  .cm-pop{left:8px!important;right:8px;width:auto}
  .cm-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* the table of contents: a folded bar at the top instead of disappearing (the 목차 button stays too) */
  .article-main>.wiki-toc.is-collapsible{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:var(--sp-4) 0 var(--sp-5);padding:0;overflow:hidden}
  .wiki-toc.is-collapsible>strong,.wiki-toc.is-collapsible:not(.is-open)>a{display:none}
  .wiki-toc.is-collapsible>.wiki-toc-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;padding:0 var(--sp-4);border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:700;text-align:left;cursor:pointer}
  .wiki-toc.is-collapsible>.wiki-toc-toggle::after{content:"";width:8px;height:8px;border-right:2px solid var(--secondary);border-bottom:2px solid var(--secondary);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
  .wiki-toc.is-open>.wiki-toc-toggle::after{transform:rotate(-135deg) translateY(-2px)}
  .wiki-toc.is-collapsible.is-open>a{display:flex;align-items:center;min-height:42px;padding:6px var(--sp-4);border-top:1px solid var(--line);font-size:var(--fs-md)}
  .wiki-toc.is-collapsible.is-open>.toc-depth-3{padding-left:var(--sp-7);font-size:var(--fs-sm)}
  /* a tool scrolled to the right edge must not end up under the pinned 미리보기 button */
  .cm-editor[data-mode=article] .cm-toolbar{scroll-padding-inline-end:104px}
  .cm-editor[data-mode=article] .cm-preview-btn{box-shadow:-10px 0 10px var(--surface),8px 0 0 var(--surface)}
  /* tables: a narrower cap so a long cell wraps within the phone screen */
  .cm-table{font-size:13.5px}
  .cm-table th,.cm-table td{max-width:17em;padding:7px 10px}
  .cm-categories a,.namu-help-toc a,.namu-doc-list .cm-doc{min-height:40px}

  /* iOS Safari zooms the page into any field under 16px and leaves it zoomed */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{font-size:16px!important}

  /* tap targets under 40px */
  .cm-toolbar button{min-width:40px}  /* community.css shrinks them to 30px; the article toolbar scrolls instead */
  .namu-help-toc a{min-width:40px;justify-content:center}
  .source-row a{display:inline-flex;align-items:center;min-height:40px}
  .rail-toc{display:none}  /* the folded 목차 at the top and the floating 목차 button already cover phones */
  .cm-section-tools a{display:inline-flex;align-items:center;min-height:40px;padding:0 9px}
  .section-link{min-width:40px;min-height:40px}
  .cm-chip{min-height:40px;padding:6px 13px}
  .cm-delta-link{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}
  .cm-rev-pick{gap:0;padding-top:6px}
  .cm-rev-pick{flex:none}
  .cm-rev-pick input{flex:none;width:22px;height:22px;margin:9px}
  .ed-ib-link{display:inline-flex;align-items:center;min-height:40px}
  .hm-card-foot.hm-link{display:flex;align-items:center;min-height:40px}
  .hub-overview nav a{display:flex;align-items:center;min-height:40px}
  .cm-filters label:has([data-game-picker]){flex-basis:100%}

  /* small print readable on a phone */
  .status,.cm-badge,.hm-badge{font-size:12px}
  .cm-doc-game{font-size:12px}
  .article-visual figcaption,.cm-figure figcaption,.ggu-foot,.chat-page-note{font-size:12.5px}

  /* /chat: the answer box fits between the top bar and the bottom tab bar (dvh follows the URL bar) */
  .ggu-chat-full{height:calc(100vh - 190px);height:calc(100dvh - var(--topbar-h) - var(--mnav-h) - 44px - env(safe-area-inset-bottom));min-height:380px}
  .ggu-icon-btn{width:40px;height:40px}
  .ggu-send{width:44px;height:44px}
}