@operato/menu 10.6.0 → 10.8.0

package/dist/src/menu-portrait-styles.js

@@ -1,166 +1,590 @@
 import { css } from 'lit';
+/**
+ * 왼쪽 메뉴의 모양 — **한 벌이다.**
+ *
+ * ## 왜 한 벌인가
+ *
+ * 한때 둘이었다. 기존 모양(줄마다 밑줄 · 왼쪽 여백 16px · hover 에 굵기 변화)과 레일 모양
+ * (라운드 알약 · 밑줄 없음 · 접을 수 있음). 같은 메뉴가 설정 하나로 딴 물건처럼 보였고, 무엇을
+ * 어느 쪽에 두어야 하는지를 매번 판단해야 해서 **일곱 번 조용히 깨졌다.**
+ *
+ * 기존 모양은 접을 수도 없었다 — 줄마다 폭 전체를 쓰는 밑줄이 있고 왼쪽 여백이 16px 이라
+ * 56px 에서 무너진다. 그래서 레일 펼친 모양을 기준으로 통일했다.
+ *
+ * ## 안에 세 변형이 있다
+ *
+ * ```
+ * (기본)          늘 보이는 모양. 서랍도 이것이다
+ * [collapsed]     접힌 레일 — 아이콘만. 하위는 팝업으로
+ * .railpop        팝업 — 접힌 레일에서 하위로 가는 길, 그리고 시스템 항목의 자리
+ * ```
+ *
+ * 무엇이 어느 변형에 걸리나는 `menu-mode.ts` 가 답한다. 여기서 그때그때 판단하지 않는다.
+ *
+ * ## 값의 출처
+ *
+ * `operato-twin` 의 레일(`twin-nav-rail`)이 쓰던 값이다. 값을 베끼지 않고 조정 지점으로 노출해
+ * 앱이 자기 테마에 맞출 수 있게 둔다.
+ */
 export const MenuPortraitStyles = css `
   :host {
+    /*
+     * ── 조정 지점 ─────────────────────────────────────────────────────────
+     * 폭은 여기 없다 — ox-menu-part 가 정한다. 셸이 크기를 재는 요소도 그것이고, 리사이즈
+     * 손잡이가 인라인 폭을 쓰는 요소도 그것이다. 여기서 또 정하면 둘이 싸운다.
+     * 폭 토큰(--menu-rail-width · --menu-rail-width-collapsed)은 앱이 위에서 준다.
+     */
+    --menu-rail-radius: 8px;
+    --menu-rail-gap: 11px;
+    --menu-rail-font-size: 13px;
+    --menu-rail-font-weight: 560;
+    --menu-rail-icon-size: 19px;
+    /*
+     * ── 줄의 세로 여백 ────────────────────────────────────────────────────
+     * 줄 높이는 아이콘(20px)에 이 값의 두 배를 더한 것이다. 8px 이면 36px 줄이다.
+     *
+     * 항목이 스물 남짓인 레일은 그 높이로 화면을 넘긴다. 그때는 줄여 앉힌다 — 다 보이는 것이
+     * 넉넉한 것보다 낫다. 다만 **줄이는 것은 앱이 고르는 값**이고, 화면 높이에 따라 저절로
+     * 눌리게 두지 않는다.
+     *
+     * 저절로 눌리게 두면 창 높이마다 줄 높이가 달라진다. 실제로 그런 레일이 있었다 —
+     * 창 1100 에서 33px · 800 에서 28px · 620 에서 16px 이 되어 아이콘이 뭉개졌다.
+     *
+     * 기본은 6.5px — 33px 줄이다. 두 제품이 같은 값을 골랐고, 앱마다 적어 두면 한쪽만 고쳐진다.
+     */
+    --menu-rail-row-pad: 6.5px;
+    --menu-rail-surface: var(--md-sys-color-surface, #fff);
+    --menu-rail-ink: var(--md-sys-color-on-surface, #17242c);
+    --menu-rail-muted: var(--md-sys-color-on-surface-variant, #57676f);
+    --menu-rail-faint: var(--md-sys-color-outline, #8a959c);
+    --menu-rail-hover: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.04));
+    --menu-rail-accent: var(--md-sys-color-primary, #0e8a56);
+    --menu-rail-accent-wash: var(--md-sys-color-primary-container, rgba(14, 138, 86, 0.1));
+
+    /*
+     * ── 세로 단이다 ───────────────────────────────────────────────────────
+     * 이 셋이 없으면 gap 이 안 먹고, **바닥에 붙이는 빈 자리가 자라지 않아** 시스템 줄이 목록
+     * 바로 뒤에 붙는다. 두 스타일 파일을 합칠 때 이것을 잃어 그 증상이 났다.
+     */
     display: flex;
-    overflow-y: auto;
     flex-direction: column;
     height: 100%;
-    background-color: var(--md-sys-color-on-primary);
+
+    box-sizing: border-box;
+    width: 100%;
+    background-color: var(--menu-rail-surface);
+    padding: 10px 8px;
+    gap: 2px;
+    overflow-x: hidden;
+    overflow-y: auto;
   }
 
-  :host > ul {
-    margin-block-end: 1.5em;
+  /*
+   * 하위가 펼쳐져 있으면 최상위의 합계를 감춘다.
+   *
+   * 그 아래에 낱개 건수가 다 보이므로 같은 말을 두 번 하는 것이고, 합계와 낱개가 나란히 있으면
+   * 「합계가 저 셋과 다른 무엇인가」를 한 번 생각하게 만든다.
+   *
+   * 최상위에만 건다 — 하위 항목도 지금 페이지이면 active 를 단다. 그래서 [top] 으로 가른다.
+   *
+   * 접혔을 때는 감추지 않는다 — 낱개가 안 보이므로 합계가 유일한 신호다.
+   */
+  :host(:not([collapsed])) li[top][active] > a [badge] {
+    display: none;
   }
 
-  ul {
+  :host ul {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
     list-style: none;
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
+    margin: 0;
+    padding: 0;
   }
 
-  [group-label] {
-    padding: var(--spacing-huge) var(--spacing-none) var(--spacing-small) var(--spacing-large);
-    border-bottom: var(--border-dim-color);
-    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 12px var(--theme-font);
-    color: var(--md-sys-color-primary);
+  /* 묶음 이름 — 접히면 자리가 없다. */
+  :host [group-label] {
+    padding: 10px 10px 4px;
+    border: none;
+    font-family: var(--theme-font-mono, monospace);
+    font-size: 9.5px;
+    font-weight: 400;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
+    color: var(--menu-rail-faint);
+  }
+
+  /* 접히면 자리가 없다 — 레일 안쪽만. 팝업 안의 묶음 이름은 그대로 보인다. */
+  :host([collapsed]) > [group-label],
+  :host([collapsed]) > ul [group-label] {
+    display: none;
   }
 
-  a {
+  :host a {
     display: flex;
     align-items: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding: var(--spacing-medium);
-    padding-left: var(--spacing-large);
+    gap: var(--menu-rail-gap);
+    padding: var(--menu-rail-row-pad) 11px;
+    /*
+     * **줄어들지 않는다.** 목록이 화면보다 길면 겉 상자가 구르면 되고, 줄이 눌릴 일이 아니다.
+     * 이것이 없으면 창 높이에 따라 줄 높이가 달라진다(위 --menu-rail-row-pad 머리말).
+     */
+    flex: none;
+    border: none;
+    border-radius: var(--menu-rail-radius);
+    font: var(--menu-rail-font-weight) var(--menu-rail-font-size) var(--theme-font, inherit);
+    color: var(--menu-rail-muted);
     text-decoration: none;
-    font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
-    color: var(--md-sys-color-on-surface-variant);
-    text-transform: capitalize;
+    text-transform: none;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  /*
+   * hover 에서 굵기를 바꾸지 않는다. 기존 모양은 a:hover { font-weight: bold } 여서 마우스가
+   * 지날 때마다 글자 폭이 늘어 줄이 흔들렸다. 색만 바꾼다.
+   */
+  :host a:hover {
+    background-color: var(--menu-rail-hover);
+    color: var(--menu-rail-ink);
+    font-weight: var(--menu-rail-font-weight);
+  }
+
+  :host a md-icon {
+    --md-icon-size: var(--menu-rail-icon-size);
 
+    flex: none;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    margin: 0;
+    opacity: 1;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    color: var(--menu-rail-faint);
+  }
+
+  /*
+   * ── 지금 페이지 ─────────────────────────────────────────────────────────
+   * 어느 층이든 **지금 보고 있는 그 줄**에만 강조를 준다. 층으로 가르지 않는다 — 최상위가 그
+   * 자리일 수도 있고(하위가 없는 묶음) 하위가 그 자리일 수도 있다.
+   */
+  :host li[current] > a {
+    border-left: none;
+    background-color: var(--menu-rail-accent-wash);
+    color: var(--menu-rail-ink);
+    font-weight: 700;
   }
 
-  a:hover {
-    color: var(--md-sys-color-primary);
-    font-weight: bold;
+  :host li[current] > a md-icon {
+    color: var(--menu-rail-accent);
   }
 
-  a * {
-    vertical-align: middle;
+  /*
+   * ── 펼쳐진 최상위 ───────────────────────────────────────────────────────
+   * **강조하지 않는다.** 최상위의 active 는 「하위가 펼쳐져 있다」는 여닫힘이고, 지금 페이지는
+   * 그 안의 한 줄이다. 둘에 같은 강조를 주면 두 줄이 나란히 강조되어 어느 쪽이 지금 자리인지
+   * 흐려진다.
+   *
+   * 그래도 옅게는 둔다 — 접힌 화살표와 함께 「여기가 열려 있다」를 말한다.
+   */
+  :host(:not([collapsed])) li[top][active]:not([current]) > a {
+    background-color: transparent;
+    color: var(--menu-rail-ink);
   }
 
-  a md-icon {
-    --md-icon-size: 1.1em;
-    opacity: 0.7;
-    margin-right: var(--spacing-small);
-    color: var(--md-sys-color-primary);
+  :host(:not([collapsed])) li[top][active]:not([current]) > a md-icon {
+    color: var(--menu-rail-ink);
   }
 
-  md-icon[filled] {
-    --md-icon-size: 1.1em;
-    font-variation-settings: 'FILL' 1;
+  /*
+   * ── 접히면 최상위가 대신 말한다 ─────────────────────────────────────────
+   * 하위가 감춰지므로 지금 자리를 말할 줄이 최상위뿐이다. 그때는 최상위가 강조를 받는다.
+   */
+  :host([collapsed]) li[top][active] > a {
+    background-color: var(--menu-rail-accent-wash);
+    color: var(--menu-rail-ink);
   }
 
-  a [submenu-button] {
-    max-height: 1em;
+  :host([collapsed]) li[top][active] > a md-icon {
+    color: var(--menu-rail-accent);
+  }
+
+  /*
+   * ── 팝업을 연 항목 ─────────────────────────────────────────────────────
+   * active(지금 페이지)와 **다른 뜻**이라 다른 표시를 준다. 접힌 레일에서 강조된 아이콘은
+   * 「지금 페이지」만 뜻하므로, 이 표시가 없으면 어느 항목의 팝업인지 알 수 없다.
+   *
+   * 강조색을 쓰지 않는다 — 그 색은 지금 페이지의 것이다. 대신 글자·아이콘을 짙게 하고 팝업과
+   * 같은 면색으로 칠해 팝업의 연장으로 읽히게 한다.
+   */
+  :host li[popped] > a {
+    background-color: var(--menu-rail-hover);
+    color: var(--menu-rail-ink);
+  }
+
+  :host li[popped] > a md-icon {
+    color: var(--menu-rail-ink);
+  }
+
+  /* 지금 페이지이면서 팝업까지 연 경우 — 강조색이 이긴다(그것이 더 드문 사실이다). */
+  :host li[current][popped] > a,
+  :host([collapsed]) li[top][active][popped] > a {
+    background-color: var(--menu-rail-accent-wash);
+  }
+
+  :host li[current][popped] > a md-icon,
+  :host([collapsed]) li[top][active][popped] > a md-icon {
+    color: var(--menu-rail-accent);
+  }
+
+  /*
+   * ── 하위가 있다는 표시 ──────────────────────────────────────────────────
+   * **이 화살표가 곧 「나는 묶음이다」이다.** 없으면 최상위 줄만 보고 하위를 가졌는지, 자기가
+   * 끝인지 알 수 없다 — 눌러 봐야 안다.
+   *
+   * 글자는 md-icon 의 내용이 아니라 여기서 준다. 두 스타일 파일을 합칠 때 이 ::before 를
+   * 잃었고, 그래서 <md-icon submenu-button> 이 **빈 채로 남아 화살표가 사라졌다.**
+   * 아이콘 이름을 컴포넌트로 옮기지 않는 이유는, 접힘·팝업마다 다르게 두는 것이 이 파일의
+   * 일이기 때문이다.
+   */
+  :host a [submenu-button] {
     margin-left: auto;
-    transition: transform 0.7s ease;
+    --md-icon-size: 16px;
+    width: 16px;
+    min-width: 16px;
+    color: var(--menu-rail-faint);
+    transition: transform 0.2s ease;
   }
 
-  a [submenu-button]::before {
+  :host a [submenu-button]::before {
     content: 'chevron_right';
   }
 
-  li[active] > a [submenu-button] {
+  /* 펼쳐지면 아래를 가리킨다 — 화살표 하나로 여닫힘까지 말한다. */
+  :host li[active] > a [submenu-button] {
     transform: rotate(90deg);
+    color: var(--menu-rail-ink);
   }
 
-  li[active] > a [submenu-button]::before {
-    content: 'chevron_right';
+  /* 접히면 하위가 팝업으로 뜬다. 56px 안에 화살표를 둘 자리도 없다. */
+  :host([collapsed]) > ul li a [submenu-button] {
+    display: none;
   }
 
-  a > span {
+  :host a > span {
     flex: 1;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  li[active] > a {
-    color: var(--md-sys-color-on-primary-container);
-    font-weight: bold;
-    border-left: 3px solid var(--md-sys-color-primary);
+  /*
+   * ── 접으면 이름을 감춘다 — **레일 안쪽만** ─────────────────────────────
+   * 팝업은 같은 shadow root 안의 **형제**다(.railpop). 그래서 li 로만 좁히면 팝업 줄도
+   * 함께 걸려 **아이콘만 남는다** — 접힌 레일에서 팝업은 이름을 읽으러 여는 자리인데.
+   *
+   * > ul 로 좁힌다. 레일의 목록과 시스템 목록은 host 의 직계 자식이고, 팝업의 목록은
+   * .railpop 안에 있다. 이 한 칸이 두 자리를 가른다.
+   */
+  :host([collapsed]) > ul li a > span {
+    display: none;
   }
 
-  li li a {
-    padding: var(--spacing-medium);
-    padding-left: var(--spacing-huge);
-    font: normal 13px var(--theme-font);
-    color: var(--md-sys-color-on-surface-variant);
+  :host([collapsed]) > ul li a {
+    justify-content: center;
+    gap: 0;
+    padding: var(--menu-rail-row-pad) 0;
   }
 
-  li li[active] a {
-    background-color: var(--md-sys-color-primary-container);
-    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
-      var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
-    color: var(--md-sys-color-primary);
+  /* ── 하위 메뉴 — 펼친 상태에서는 그 자리에서 열린다 ────────────────── */
+  :host li > ul {
+    overflow: hidden;
+    max-height: 0;
+    background: none;
+    padding-left: 20px;
+    transition: max-height 0.24s ease;
   }
 
-  li > ul {
-    overflow-y: hidden;
-    max-height: 0;
-    background-color: var(--md-sys-color-surface);
+  :host li[active] > ul {
+    max-height: 640px;
+  }
 
-    transition-property: all;
-    transition-duration: 0.7s;
+  :host li[active] > ul[settled] {
+    overflow-y: auto;
   }
 
-  li[active] > ul {
-    max-height: 550px;
+  :host li li a {
+    padding: calc(var(--menu-rail-row-pad) - 2px) 11px;
+    font-size: 12.5px;
+    color: var(--menu-rail-muted);
   }
 
-  li[active] > ul[settled] {
+
+  /*
+   * 접히면 하위를 그 자리에서 열지 않는다. 56px 안에서는 들여쓴 목록이 읽히지 않는다.
+   * 대신 팝업으로 뜬다 — .railpop 이 그 자리다.
+   */
+  :host([collapsed]) > ul li > ul {
+    display: none;
+  }
+
+  /* ── 건수 ──────────────────────────────────────────────────────────── */
+  /*
+   * **메뉴에서 유일하게 색을 갖는 자리다.**
+   *
+   * 나머지는 무채색이다 — 틀은 자리를 말하고, 색은 「무엇이 나를 기다리나」에만 쓴다. 건수가 바로
+   * 그것이라 여기에 제품의 강조색을 준다.
+   *
+   * 색을 --menu-rail-accent 에서 가져오지 않는다. 그 이름은 지금 페이지 표시에도 쓰이고, 그것까지
+   * 강조색이 되면 메뉴 전체가 물든다. 배지만 따로 든다.
+   *
+   * 순서는 앱 토큰이 먼저다(--ui-accent). md 의 primary 는 앱마다 뜻이 다르다 — operato-twin 에서는
+   * 브랜드 청록이지만 operato-plant 에서는 **진회색**이라, primary 를 쓰면 한쪽에서만 색이 나온다.
+   * 실제로 그랬다.
+   *
+   * 글자색은 짝으로 온다. 강조색 위에 흰 글자를 늘 올리면 어두운 테마의 밝은 초록에서 대비가
+   * 2.24 로 떨어진다 — 그 테마는 짙은 글자를 짝으로 둔다.
+   */
+  :host a [badge] {
+    margin-left: auto;
+    min-width: 18px;
+    padding: 0 5px;
+    border-radius: 9px;
+    background-color: var(--menu-rail-badge, var(--ui-accent, var(--md-sys-color-primary, #0c7a4c)));
+    color: var(--menu-rail-badge-ink, var(--ui-on-accent, var(--md-sys-color-on-primary, #ffffff)));
+    font-family: var(--theme-font-mono, monospace);
+    font-size: 10.5px;
+    font-weight: 700;
+    line-height: 17px;
+    text-align: center;
+  }
+
+  /*
+   * 접히면 라벨이 없어 옆에 둘 자리가 없다. 아이콘 위에 겹친다.
+   *
+   * 이것도 **레일 안쪽만**이다. 팝업에는 이름이 있으니 건수가 그 오른쪽에 알약으로 선다 —
+   * 위의 기본 규칙이 그대로 맞다.
+   */
+  :host([collapsed]) > ul li[menu] {
+    position: relative;
+  }
+
+  :host([collapsed]) > ul li a [badge] {
+    position: absolute;
+    top: 0;
+    right: 2px;
+    margin-left: 0;
+    /*
+     * 글자를 9.5px 에서 10px 로 올린다. 링이 아이콘을 밀어내 준 만큼 숫자에 자리를 줄 수 있다 —
+     * 접힌 레일에서 이 숫자가 유일한 신호이므로 읽히는 것이 먼저다.
+     */
+    min-width: 15px;
+    padding: 0 3px;
+    font-size: 10px;
+    line-height: 15px;
+    /*
+     * **배경색 링으로 아이콘을 밀어낸다.**
+     *
+     * 56px 안에서는 배지가 아이콘 위에 겹칠 수밖에 없다. 겹친 자리에서 아이콘의 선이 배지의
+     * 글자를 지나가면 숫자가 안 읽힌다. 링이 그 사이를 끊는다 — 아이콘을 지운 것처럼 보인다.
+     *
+     * 링 색은 레일의 면색이다. 고른 항목은 배경이 accent-wash 여서 정확히 같지는 않지만, 그
+     * 색이 아주 옅어 눈에 걸리지 않는다.
+     */
+    box-shadow: 0 0 0 2px var(--menu-rail-surface);
+  }
+
+  /*
+   * **값이 아직 안 온 동안**만 자리를 비운다.
+   *
+   * 알약을 그릴지는 배지 정의가 있나로 정해지고, 그 안의 값은 조금 뒤에 채워진다. 그 사이 빈
+   * 알약이 아이콘 위에 뜻 없는 점으로 남는다.
+   *
+   * **0 은 값이다.** 0 이면 0 을 보인다 — 「기다리는 것이 없다」도 사람이 알아야 하는 사실이고,
+   * 그 자리가 비어 있으면 「아직 안 왔나」와 구별되지 않는다.
+   */
+  :host a [badge]:empty {
+    display: none;
+  }
+
+  /* ── 시스템 자리 ───────────────────────────────────────────────────── */
+  /*
+   * 빈 자리로 벌린다 — 시스템 항목이 바닥에 붙는다.
+   *
+   * 목록이 화면보다 길면 이 자리가 0 이 되고 시스템은 목록 끝에 그대로 이어진다.
+   * flex: 1 1 auto 가 아니라 flex: 1 1 0 이라야 그렇게 된다 — auto 면 이 빈 칸이 자기
+   * 높이를 주장해 목록이 밀린다.
+   *
+   * **레일 전용이 아니다.** 한때 [rail] 에 걸어 두고 「바닥에 붙이는 것은 폭이 좁을 때의
+   * 배치」라고 적었는데, 그건 지어낸 이유였다. 서랍도 화면 높이를 다 쓰므로 시스템이 바닥에
+   * 붙는 뜻이 같다.
+   */
+  :host .railspacer {
+    flex: 1 1 0;
+    min-height: 0;
+  }
+
+  /*
+   * 시스템 단추의 스타일은 여기에 없다 — **보통 메뉴 줄로 그린다.**
+   *
+   * 전에는 button.railitem 으로 따로 그리고 그 꾸밈을 여기에 두었다. 그러면 레일이 아닌
+   * 모양에서는 꾸밈이 없다. ul > li > a 로 두면 위의 규칙들이 그대로 붙는다 — 여백 · 색 ·
+   * hover · 접힘 · 화살표 · 팝업 표시까지.
+   */
+
+  /* ── 접기 단추 ─────────────────────────────────────────────────────── */
+  :host .railtoggle {
+    display: flex;
+    align-items: center;
+    gap: var(--menu-rail-gap);
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    padding: 8px 11px;
+    border: none;
+    border-radius: var(--menu-rail-radius);
+    background: none;
+    color: var(--menu-rail-faint);
+    font: var(--menu-rail-font-weight) var(--menu-rail-font-size) var(--theme-font, inherit);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  :host .railtoggle:hover {
+    background-color: var(--menu-rail-hover);
+    color: var(--menu-rail-ink);
+  }
+
+  :host .railtoggle md-icon {
+    --md-icon-size: var(--menu-rail-icon-size);
+
+    flex: none;
+    width: 20px;
+    min-width: 20px;
+    color: inherit;
+  }
+
+  :host([collapsed]) .railtoggle {
+    justify-content: center;
+    gap: 0;
+    padding: 8px 0;
+  }
+
+  :host([collapsed]) .railtoggle span {
+    display: none;
+  }
+
+  /*
+   * ── 하위 메뉴 팝업 ──────────────────────────────────────────────────────
+   * **레일 전용이 아니다.** 접힌 레일에서 하위로 가는 길이기도 하고, 시스템 항목(주소가 아니라
+   * 함수)의 자리이기도 하다. 시스템은 어느 모양에서든 팝업으로 열리므로 [rail] 에 걸지 않는다.
+   */
+  /*
+   * fixed 다 — 레일은 overflow-x: hidden 이라 안에서 띄우면 잘린다.
+   *
+   * 그리고 팝업은 같은 shadow root 안에 있다. 그래서 위의 접힘 규칙들은 **> ul 로 좁혀 둔다** —
+   * 좁히지 않으면 a > span 의 display: none 이 팝업 항목의 이름까지 지우고, 가운데 정렬과
+   * 여백 0 이 같이 걸려 **아이콘만 남는다.** 한때 li 로만 좁혀 두었는데, 팝업 줄도 li 라서
+   * 아무것도 가리지 못했다.
+   */
+  :host .railpop {
+    position: fixed;
+    z-index: 60;
+    min-width: 190px;
+    /*
+     * 70vh 였다. 그러면 열여섯 줄짜리 목록이 화면에 다 들어가는데도 스크롤이 생긴다.
+     * 자리는 fitPopup 이 맞추므로, 여기서는 **화면이 허락하는 만큼**만 잘라 둔다.
+     */
+    max-height: calc(100vh - 16px);
     overflow-y: auto;
+    box-sizing: border-box;
+    padding: 6px;
+    /*
+     * 테두리는 **선 색**이다. 표면색으로 두면 경계가 안 보여 레일에서 흘러나온 것처럼 읽힌다.
+     * 그림자만으로는 밝은 테마에서 약하다.
+     */
+    border: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));
+    border-radius: 10px;
+    background-color: var(--menu-rail-surface);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
   }
 
-  li li a::before {
-    margin-right: var(--spacing-small);
+  /*
+   * 노브 — 팝업이 어느 항목에서 열렸는지 가리킨다.
+   *
+   * 45도 돌린 정사각이다. 왼쪽 두 변만 테두리를 두어 팝업의 왼쪽 선에서 뾰족하게 나오고,
+   * 배경은 팝업과 같은 면색이라 팝업의 선이 그 자리에서 끊긴 것처럼 보인다.
+   *
+   * 자리(top)는 fitKnob 이 정한다. 팝업이 위로 밀려 그 항목이 팝업의 세로 범위 밖에 있으면
+   * hidden 이 붙는다 — 아무 데도 가리키지 못하는 화살은 없는 것이 낫다.
+   */
+  :host .railknob {
+    /*
+     * **fixed 다 — 팝업 안에 두면 잘린다.** 팝업은 목록이 길 때 스크롤해야 해서
+     * overflow-y: auto 이고, 그러면 브라우저가 overflow-x 도 auto 로 계산한다. 노브는 팝업의
+     * 왼쪽 선 밖으로 나가야 하므로 그 스크롤 박스에 잘렸다. 자리는 fitKnob 이 화면 좌표로 준다.
+     */
+    position: fixed;
+    z-index: 61;
+    width: 10px;
+    height: 10px;
+    transform: rotate(45deg);
+    /*
+     * 선과 면이 **팝업과 같다.** 팝업의 왼쪽 선에 반쯤 물리면 그 선이 그 자리에서 뾰족하게
+     * 꺾인 것처럼 보인다 — 따로 붙은 장식이 아니라 팝업의 일부다.
+     *
+     * 선을 한 단 진하게 하고 크게 하고 그림자까지 얹어 봤다. 눈에는 더 잡히는데 팝업에서
+     * 떨어진 부품처럼 보였다. 선을 아예 없애 봤더니 팝업의 선이 끊긴 틈으로만 남아 약했다.
+     *
+     * 안 보였던 원인은 색도 크기도 아니라 **잘림**이었다(position: fixed 로 고쳤다).
+     */
+    border-left: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));
+    border-bottom: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));
+    background-color: var(--menu-rail-surface);
   }
 
-  a [badge] {
-    margin-left: auto;
-    background-color: var(--md-sys-color-primary);
-    border-radius: var(--md-sys-shape-corner-full);
-    padding: 0 var(--spacing-small);
-    color: var(--md-sys-color-on-primary);
-    font-size: 0.9em;
+  :host .railpop .phead {
+    padding: 6px 10px 4px;
+    font-family: var(--theme-font-mono, monospace);
+    font-size: 9.5px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--menu-rail-faint);
   }
 
-  @media only screen and (max-width: 460px) {
-    :host {
-      min-width: 100vw;
-    }
+  :host .railpop a {
+    padding: 8px 10px;
+    border-radius: 7px;
+    font-size: 12.5px;
+  }
 
-    a {
-      padding: var(--spacing-large);
-      font: normal 15px var(--theme-font);
+  /*
+   * 팝업 안의 지금 페이지에 대한 규칙은 **여기 없다.**
+   *
+   * 팝업도 renderMenus 가 그리므로 줄이 li[current] > a 다. 위의 규칙이 그대로 닿는다.
+   * 한때 팝업 줄을 a[current] 로 따로 그렸고 그 규칙이 여기 남아 있었는데, 모양이 바뀐 뒤
+   * 아무것에도 걸리지 않는 죽은 줄이었다.
+   */
+
+  /*
+   * ── 손가락으로 누르는 화면 ──────────────────────────────────────────────
+   * 폭이 아니라 **입력 장치**로 가른다. 좁은 창에서 마우스를 쓰는 사람에게 줄을 키울 이유는
+   * 없고, 넓은 태블릿에서 손가락으로 누르는 사람에게는 키워야 한다.
+   *
+   * 기존 모양은 max-width: 460px 으로 갈랐다. 그건 「좁으면 휴대폰일 것」이라는 짐작이다.
+   */
+  @media (pointer: coarse) {
+    :host {
+      --menu-rail-font-size: 15px;
     }
 
-    li li a {
-      display: block;
-      padding: var(--spacing-medium);
-      padding-left: var(--spacing-huge);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
+    :host a,
+    :host .railitem {
+      padding: 12px 11px;
     }
 
-    li li[active] a {
-      font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
-        var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
+    :host li li a {
+      padding: 10px 11px;
     }
   }
 `;