/* UI modernization base (Phase 1).
   - Designed to be low-risk: improves readability and accessibility without breaking layout.
   - Auto-injected into pages via analytics/apply_ui_modernization.py.
*/

 :root{
  color-scheme: light dark;
  --ui-bg: #f6f7fb;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f1f5f9;
  --ui-surface-subtle: #e9eef5;
  --ui-fg: #111827;
  --ui-muted: #4b5563;
  --ui-muted-2: #9ca3af;
  --ui-border: #d7dde6;
  --ui-border-strong: #c2c9d6;
  --ui-accent: #0b57d0;
  --ui-accent-soft: #e7f0ff;
  --ui-on-accent: #ffffff;
  --ui-link: var(--ui-accent);
  --ui-link-visited: var(--ui-accent);
  --ui-success: #1a7f37;
  --ui-focus: rgba(11, 87, 208, 0.25);
  --ui-shadow: rgba(15,23,42,0.10);

  --ui-radius-sm: 8px;
  --ui-radius: 12px;

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ui-bg: #0b0f16;
    --ui-surface: #111827;
    --ui-surface-muted: #0f172a;
    --ui-surface-subtle: #131a2a;
    --ui-fg: #e5e7eb;
    --ui-muted: #a1a7b3;
    --ui-muted-2: #7c8898;
    --ui-border: #2a3242;
    --ui-border-strong: #3b465a;
    --ui-accent: #8ab4f8;
    --ui-accent-soft: #1b2a45;
    --ui-on-accent: #0b0f16;
    --ui-link: var(--ui-accent);
    --ui-link-visited: var(--ui-accent);
    --ui-success: #34d399;
    --ui-focus: rgba(138, 180, 248, 0.35);
    --ui-shadow: rgba(0,0,0,0.45);
  }
}

 :root[data-theme="light"]{
  color-scheme: light;
  --ui-bg: #f6f7fb;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f1f5f9;
  --ui-surface-subtle: #e9eef5;
  --ui-fg: #111827;
  --ui-muted: #4b5563;
  --ui-muted-2: #9ca3af;
  --ui-border: #d7dde6;
  --ui-border-strong: #c2c9d6;
  --ui-accent: #0b57d0;
  --ui-accent-soft: #e7f0ff;
  --ui-on-accent: #ffffff;
  --ui-link: var(--ui-accent);
  --ui-link-visited: var(--ui-accent);
  --ui-success: #1a7f37;
  --ui-focus: rgba(11, 87, 208, 0.25);
  --ui-shadow: rgba(15,23,42,0.10);
 }

:root[data-theme="dark"]{
  color-scheme: dark;
  --ui-bg: #0b0f16;
  --ui-surface: #111827;
  --ui-surface-muted: #0f172a;
  --ui-surface-subtle: #131a2a;
  --ui-fg: #e5e7eb;
  --ui-muted: #a1a7b3;
  --ui-muted-2: #7c8898;
  --ui-border: #2a3242;
  --ui-border-strong: #3b465a;
  --ui-accent: #8ab4f8;
  --ui-accent-soft: #1b2a45;
  --ui-on-accent: #0b0f16;
  --ui-link: var(--ui-accent);
  --ui-link-visited: var(--ui-accent);
  --ui-success: #34d399;
  --ui-focus: rgba(138, 180, 248, 0.35);
  --ui-shadow: rgba(0,0,0,0.45);
}

body{
  background: var(--ui-bg);
  color: var(--ui-fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  text-rendering: optimizeLegibility;
}

body:not([data-ui-template="san"]) a{
  color: var(--ui-link);
}

body:not([data-ui-template="san"]) a:visited{
  color: var(--ui-link-visited);
}

/* Override legacy hover pink (main.css) on non-san templates. */
body:not([data-ui-template="san"]) a:hover{
  color: var(--ui-accent);
}

/* Main template header (main.css + lay01.css pages): modernize the most visible "old" area. */
body:not([data-ui-template="san"]) #allwrap .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 6px 12px;
  border: 1px solid var(--ui-border);
  border-left: 6px solid var(--ui-accent);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  padding: 12px 14px;
  margin: 12px 0 10px;
  overflow: visible;
}

body:not([data-ui-template="san"]) #allwrap .head h1{
  flex: 1 1 240px;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ui-fg);
}

body:not([data-ui-template="san"]) #allwrap .head h1 span{
  font-size: inherit;
  line-height: inherit;
}

body:not([data-ui-template="san"]) #allwrap .head p{
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

body:not([data-ui-template="san"]) #allwrap .head p.toplogo{
  flex: 0 0 auto;
  float: none;
  margin-left: auto;
}

body:not([data-ui-template="san"]) #allwrap .head p.toplogo img{
  display:block;
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 48px;
}

body:not([data-ui-template="san"]) #allwrap .head p.tit{
  flex: 1 1 100%;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ui-muted);
}

body:not([data-ui-template="san"]) #allwrap .head p.tit a{
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

body:not([data-ui-template="san"]) #allwrap .head p.tit a:hover{
  text-decoration: underline;
}

/* Main template sidebar: remove legacy yellow "button list" look while keeping dense navigation. */
body:not([data-ui-template="san"]) #sub{
  box-sizing: border-box;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  padding: 12px 12px 14px;
}

body:not([data-ui-template="san"]) #sub h2{
  margin: 14px 0 8px;
  padding: 0 0 0 10px;
  border: none;
  border-left: 4px solid var(--ui-border);
  background: transparent;
  color: var(--ui-fg);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  text-align: left;
}

body:not([data-ui-template="san"]) #sub h2:first-child{
  margin-top: 0;
}

body:not([data-ui-template="san"]) #sub h2 a{
  color: inherit;
  text-decoration: none;
}

body:not([data-ui-template="san"]) #sub h2 a:hover{
  text-decoration: underline;
}

body:not([data-ui-template="san"]) #sub ul{
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: transparent;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
}

body:not([data-ui-template="san"]) #sub ul li{
  display:block;
  margin: 0;
  padding: 6px 10px;
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-muted);
  font-weight: 600;
  line-height: 1.2;
}

body:not([data-ui-template="san"]) #sub ul li > a{
  display:block;
  margin: -6px -10px;
  padding: 6px 10px;
  color: var(--ui-accent);
  text-decoration: none;
  font-weight: 600;
}

body:not([data-ui-template="san"]) #sub ul li > a:hover{
  text-decoration: underline;
}

body:not([data-ui-template="san"]) #sub ul li > a:visited{
  color: var(--ui-accent);
}

body:not([data-ui-template="san"]) #sub p.cent{
  margin: 10px 0;
  padding: 0;
  text-align: left;
}

/* Main template layout (float-based) → progressive enhancement with CSS Grid. */
@supports (display: grid){
  @media (min-width: 900px){
    body:not([data-ui-template="san"]) #wrapper{
      display: grid;
      grid-template-columns: 342px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    body:not([data-ui-template="san"]) #sub{
      grid-column: 1;
      grid-row: 1;
      width: auto;
      margin: 0;
    }

    body:not([data-ui-template="san"]) #main{
      grid-column: 2;
      grid-row: 1;
      width: auto;
      min-width: 0;
    }

    body:not([data-ui-template="san"]) #mainContent{
      margin-left: 0;
    }
  }
}

/* Main template footer: improve readability and remove centered legacy look. */
body:not([data-ui-template="san"]) ul.foot{
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 12px 18px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.6;
}

body:not([data-ui-template="san"]) ul.foot *{
  line-height: inherit;
}

body:not([data-ui-template="san"]) ul.foot li{
  margin: 8px 0;
  text-align: left;
  font-size: 13px;
}

body:not([data-ui-template="san"]) ul.foot a{
  color: var(--ui-accent);
  text-decoration: none;
}

body:not([data-ui-template="san"]) ul.foot a:hover{
  text-decoration: underline;
}

@media (min-width: 720px){
  body:not([data-ui-template="san"]) #sub{
    padding: 12px 14px 16px;
  }
}

@media (min-width: 720px){
  body:not([data-ui-template="san"]) #allwrap .head{
    padding: 14px 16px;
    margin: 12px 0 12px;
  }

  body:not([data-ui-template="san"]) #allwrap .head h1{
    font-size: 22px;
  }

  body:not([data-ui-template="san"]) #allwrap .head p.toplogo img{
    max-height: 56px;
  }

  body:not([data-ui-template="san"]) #allwrap .head p.tit{
    font-size: 13px;
  }
}

/* Visible focus (covers legacy san.css pages too). */
:focus-visible{
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Skip link (some templates don't include a11y/perf auto CSS). */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  padding:8px 12px;
  background: var(--ui-surface);
  color: var(--ui-fg);
  border:2px solid var(--ui-accent);
  z-index:9999;
}
.skip-link:focus,
.skip-link:focus-visible{
  left:8px;
  top:8px;
}

/* Improve readability in main content areas without disturbing global layout. */
#mainContent,
.mada{
  line-height: 1.6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  box-sizing: border-box;
  padding: 0 12px;
}
#mainContent *,
.mada *{
  line-height: inherit;
}
#mainContent p,
#mainContent li,
.mada p,
.mada li{
  line-height: 1.7;
  font-size: 15px;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) p{
  margin: 10px 0;
}

@media (min-width: 720px){
  #mainContent p,
  #mainContent li,
  .mada p,
  .mada li{
    font-size: 16px;
  }
}

#mainContent a,
.mada a{
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
}

/* Main template (non-hub) list normalization:
   - Legacy `css/main.css` turns all `#mainContent ul` into loud yellow "buttons".
   - We keep link-list menus dense (chips), while rendering text lists as normal bullets when supported. */
#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ul:not(.ui-page01-print-list){
  list-style: none;
  margin: 12px 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ul:not(.ui-page01-print-list) > li{
  display:block;
  margin: 0;
  padding: 6px 10px;
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-muted);
  font-weight: 600;
  line-height: 1.2;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ul:not(.ui-page01-print-list) > li > a{
  color: var(--ui-accent);
  text-decoration: none;
  font-weight: 600;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ul:not(.ui-page01-print-list) > li > a:hover{
  text-decoration: underline;
}

/* Menu lists directly under H2: give the list a "card" container for contrast/scanability. */
#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > h2 + ul:not(.ui-page01-print-list){
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: var(--ui-space-3);
  box-shadow: 0 1px 0 var(--ui-shadow);
}

@supports(selector(:has(*))){
  /* Textual lists (contain at least one non-pure-link item) become readable bullet lists. */
  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ul:not(.ui-page01-print-list):has(> li:not(:has(> a:only-child))){
    display:block;
    list-style: disc;
    padding: 0 0 0 1.25em;
    margin: 10px 0 14px;
  }

  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ul:not(.ui-page01-print-list):has(> li:not(:has(> a:only-child))) > li{
    display: list-item;
    margin: 6px 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--ui-fg);
    font-weight: normal;
    line-height: 1.7;
  }

  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ul:not(.ui-page01-print-list):has(> li:not(:has(> a:only-child))) a{
    text-decoration: underline;
  }

  /* H2-adjacent lists are usually "menus" (multiple links per item); keep them as chips for discoverability. */
  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > h2 + ul:not(.ui-page01-print-list):has(
    > li:not(:has(> a:only-child))
  ){
    display:flex;
    flex-wrap:wrap;
    gap: var(--ui-space-2);
    list-style:none;
    margin: 12px 0 16px;
  }

  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > h2 + ul:not(.ui-page01-print-list):has(
    > li:not(:has(> a:only-child))
  ) > li{
    display:block;
    margin: 0;
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-accent-soft);
    border: 1px solid var(--ui-border-strong);
    border-radius: 999px;
    color: var(--ui-fg);
    font-weight: 600;
    line-height: 1.2;
  }

  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > h2 + ul:not(.ui-page01-print-list):has(
    > li:not(:has(> a:only-child))
  ) > li > a{
    font-weight: 700;
    text-decoration: none;
  }

  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > h2 + ul:not(.ui-page01-print-list):has(
    > li:not(:has(> a:only-child))
  ) > li > a:hover{
    text-decoration: underline;
  }
}

/* Legacy image blue borders (main.css) look dated; use a subtle neutral border. */
#mainContent:not([data-ui-template="san"]) img{
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  max-width: 100%;
  height: auto;
}

/* Main template (non-hub) content headings: modernize legacy left/right borders. */
#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) h2{
  margin: 26px 0 14px;
  line-height: 1.25;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ui-fg);
  border: none;
  border-left: 6px solid var(--ui-accent);
  border-radius: 0;
  padding: 2px 0 2px 12px;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) h2 a{
  color: inherit;
  text-decoration: none;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) h2 a:hover{
  text-decoration: underline;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) h3{
  margin: 18px 0 10px;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ui-fg);
  border: none;
  border-left: 3px solid var(--ui-border);
  border-radius: 0;
  padding: 0 0 0 12px;
}

@media (min-width: 720px){
  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) h2{
    font-size: 22px;
  }

  #mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) h3{
    font-size: 19px;
  }
}

/* Non-hub breadcrumbs: match hub styling for consistency. */
#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ol:not(.bene){
  list-style: none;
  padding: 0;
  margin: 8px 0 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--ui-muted);
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ol:not(.bene) > li{
  margin: 0;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ol:not(.bene) > li + li:before{
  content: "›";
  margin: 0 6px 0 2px;
  color: var(--ui-muted-2);
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ol:not(.bene) a{
  color: var(--ui-muted);
  text-decoration: none;
}

#mainContent:not([data-ui="hub"]):not([data-ui-template="san"]) > ol:not(.bene) a:hover{
  text-decoration: underline;
}

/* Prev/next navigation (often `ol.bene`): show as clear buttons instead of "/" separated breadcrumbs. */
#mainContent:not([data-ui-template="san"]) > ol.bene{
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  font-size: 13px;
  line-height: 1.3;
}

#mainContent:not([data-ui-template="san"]) > ol.bene > li{
  margin: 0;
  display:block;
  font-weight: normal;
  /* Hide legacy wrapper characters like "【" and "】" that appear as text nodes. */
  font-size: 0;
  line-height: 0;
}

@supports not (gap: 12px){
  #mainContent:not([data-ui-template="san"]) > ol.bene > li{
    margin: 0 12px 12px 0;
  }
}

#mainContent:not([data-ui-template="san"]) > ol.bene > li + li:before{
  content: "";
  display: none;
}

#mainContent:not([data-ui-template="san"]) > ol.bene a{
  display:inline-block;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}

#mainContent:not([data-ui-template="san"]) > ol.bene a:hover{
  text-decoration: underline;
}

/* san.css template: modernize typography/spacing without editing san.css directly. */
#mainContent[data-ui-template="san"] a:hover{
  background-color: transparent;
}

#mainContent[data-ui-template="san"] h2{
  margin: 26px 0 14px;
  line-height: 1.25;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ui-fg);
  background: transparent;
  border: none;
  border-left: 6px solid var(--ui-accent);
  border-radius: 0;
  padding: 2px 0 2px 12px;
  text-align: left;
}

#mainContent[data-ui-template="san"] h3{
  margin: 18px 0 10px;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ui-fg);
  background: transparent;
  border: none;
  border-left: 3px solid var(--ui-border);
  border-radius: 0;
  padding: 0 0 0 12px;
  text-align: left;
}

#mainContent[data-ui-template="san"] p{
  margin: 10px 0;
}

#mainContent[data-ui-template="san"] p.koukoku{
  margin: 0;
}

#mainContent[data-ui-template="san"] table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

#mainContent[data-ui-template="san"] th,
#mainContent[data-ui-template="san"] td{
  border: 1px solid var(--ui-border);
  padding: 8px 10px;
  text-align: left;
}

#mainContent[data-ui-template="san"] th{
  background: var(--ui-surface-subtle);
  color: var(--ui-fg);
  font-weight: 700;
}

@media (min-width: 720px){
  #mainContent[data-ui-template="san"] h2{
    font-size: 22px;
  }

  #mainContent[data-ui-template="san"] h3{
    font-size: 19px;
  }
}

body[data-ui-template="san"] a:hover{
  background-color: transparent;
}

body[data-ui-template="san"] .top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap: 10px;
  height: auto;
  margin: 12px 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-left: 6px solid var(--ui-accent);
  background: var(--ui-surface);
  border-radius: var(--ui-radius);
}

body[data-ui-template="san"] .top h1{
  margin: 0;
  padding: 0;
  float: none;
  flex: 1 1 260px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ui-fg);
}

body[data-ui-template="san"] .top p{
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

body[data-ui-template="san"] .top p img{
  margin: 0;
  max-width: 120px;
  height: auto;
  vertical-align: middle;
}

body[data-ui-template="san"] .top p.toplogo{
  flex: 0 0 auto;
  margin-left: auto;
}

body[data-ui-template="san"] .top p.toplogo img{
  display:block;
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 48px;
}

body[data-ui-template="san"] .top p.tit{
  flex: 1 1 100%;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ui-muted);
}

body[data-ui-template="san"] .top p.tit a{
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

body[data-ui-template="san"] .top p.tit a:hover{
  text-decoration: underline;
}

body[data-ui-template="san"] .faq-breadcrumb{
  margin: 8px 0 12px;
  padding: 6px 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.4;
}

body[data-ui-template="san"] .faq-breadcrumb a{
  color: var(--ui-link);
  text-decoration: none;
  font-weight: 600;
}

body[data-ui-template="san"] .faq-breadcrumb a:hover{
  text-decoration: underline;
}

body[data-ui-template="san"] .faq-breadcrumb [aria-current="page"]{
  color: var(--ui-fg);
  font-weight: 600;
}

body[data-ui-template="san"] .faq-top-link{
  color: var(--ui-link);
  text-decoration: none;
  font-weight: 600;
}

body[data-ui-template="san"] .faq-top-link:hover{
  text-decoration: underline;
}

body[data-ui-template="san"] ul.hemenu,
body[data-ui-template="san"] ul.hemenu2{
  clear: both;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
}

body[data-ui-template="san"] ul.hemenu li,
body[data-ui-template="san"] ul.hemenu2 li{
  float: none;
  display:block;
  margin: 0;
  padding: 6px 10px;
  position: relative;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

body[data-ui-template="san"] ul.hemenu a,
body[data-ui-template="san"] ul.hemenu2 a{
  color: var(--ui-accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 8px 0;
}

body[data-ui-template="san"] ul.hemenu a:hover,
body[data-ui-template="san"] ul.hemenu2 a:hover{
  text-decoration: underline;
}

/* Make the whole pill clickable (some legacy markup places separators like "/" after <a>). */
body[data-ui-template="san"] ul.hemenu li > a::after,
body[data-ui-template="san"] ul.hemenu2 li > a::after{
  content: "";
  position: absolute;
  inset: 0;
}

body[data-ui-template="san"] .submenu{
  box-sizing: border-box;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  padding: 8px 10px;
}

body[data-ui-template="san"] .submenu h2{
  margin: 14px 0 8px;
  padding: 0 0 0 10px;
  color: var(--ui-fg);
  background: transparent;
  border: none;
  border-left: 4px solid var(--ui-border);
  text-align: left;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
}

body[data-ui-template="san"] .submenu ul{
  margin: 0;
  padding: 0;
}

body[data-ui-template="san"] .submenu li{
  margin: 2px 0;
  padding: 0;
  list-style: none;
  color: var(--ui-fg);
  font-weight: 600;
}

body[data-ui-template="san"] .submenu a{
  color: var(--ui-accent);
  text-decoration: none;
  font-weight: 600;
  display: block;
  padding: 6px 10px;
  border-radius: calc(var(--ui-radius) - 4px);
  min-height: 0;
  line-height: 1.25;
  box-sizing: border-box;
}

body[data-ui-template="san"] .submenu a:hover{
  background: var(--ui-surface-muted);
  text-decoration: underline;
}

@media (max-width: 720px), (pointer: coarse){
  body[data-ui-template="san"] .submenu a{
    padding: 10px 10px;
    min-height: 44px;
  }
}

body[data-ui-template="san"] .submenu p{
  margin: 10px 0;
}

@media (min-width: 720px){
  body[data-ui-template="san"] .top h1{
    font-size: 22px;
  }
}

body[data-ui-template="san"] .al{
  margin-bottom: 0;
  padding-bottom: 24px;
}

#mainContent[data-ui-template="san"] ol.super0{
  margin: 12px 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  width: auto;
  list-style-position: inside;
}

#mainContent[data-ui-template="san"] ol.super0 > li{
  margin: 6px 0;
}

#mainContent[data-ui-template="san"] ol#super{
  margin: 12px 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  list-style: none;
}

#mainContent[data-ui-template="san"] ol#super > li{
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  position: relative;
}

#mainContent[data-ui-template="san"] ol#super > li > a{
  font-weight: 700;
  color: var(--ui-accent);
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
}

#mainContent[data-ui-template="san"] ol#super > li > a:hover{
  text-decoration: underline;
}

/* Expand click/tap target to the full card when <li> has a single primary link. */
#mainContent[data-ui-template="san"] ol#super > li > a::after{
  content: "";
  position: absolute;
  inset: 0;
}

/* FAQ lists: restore markers with readable spacing. */
#mainContent[data-ui-template="san"][data-ui-section="faq"] ul,
#mainContent[data-ui-template="san"][data-ui-section="faq"] ol{
  margin: 10px 0 14px;
  padding-left: 22px;
  list-style-position: inside;
}

#mainContent[data-ui-template="san"][data-ui-section="faq"] ul{
  list-style: disc;
}

#mainContent[data-ui-template="san"][data-ui-section="faq"] ol{
  list-style: decimal;
}

#mainContent[data-ui-template="san"][data-ui-section="faq"] li{
  margin: 6px 0;
}

#mainContent[data-ui-template="san"][data-ui-section="faq"] ol#super{
  list-style: decimal;
  padding-left: 24px;
}

/* Progressive enhancement base (for Phase 2 IA transformations). */
details{
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  padding: 10px 12px;
  margin: 10px 0;
}
details > summary{
  cursor: pointer;
  font-weight: bold;
  line-height: 1.4;
}
details[open]{
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Phase 4: print tips (no-JS) */
#mainContent .ui-print-tips{
  margin: 10px 0 14px;
}
#mainContent .ui-print-tips-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
#mainContent .ui-print-tips-summary::after{
  content: "＋";
  color: var(--ui-muted);
  font-weight: 800;
}
#mainContent details[open] > .ui-print-tips-summary::after{
  content: "−";
}

/* Grade hub: nested unit lists become expandable per grade. */
#mainContent .ui-grade-item{
  display:block;
  margin: 10px 0;
  background: transparent;
  border: none;
}

#mainContent .ui-grade-details{
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  padding: 10px 12px;
}

#mainContent .ui-grade-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

#mainContent .ui-grade-title{
  font-weight: bold;
  line-height: 1.4;
}

#mainContent .ui-grade-link{
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-accent);
  text-decoration: none;
  line-height: 1.2;
}

#mainContent .ui-grade-link:hover{
  filter: brightness(0.98);
}

/* Override legacy mobile rule: div#mainContent ul ul { display:none; } */
#mainContent .ui-grade-item details ul{
  display:block;
}

/* Inside expandable areas, make nested lists readable (avoid legacy "button grid" look). */
#mainContent .ui-grade-details ul{
  border: none;
  padding: 8px 0 0;
  background: transparent;
}
#mainContent .ui-grade-details ul li{
  display:block;
  margin: 6px 0;
  background: transparent;
  border: none;
}

/* Generic nested menu: expandable subsections (Phase 3). */
#mainContent .ui-nested-item{
  display:block;
  margin: 10px 0;
  background: transparent;
  border: none;
}

#mainContent .ui-nested-details{
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  padding: 10px 12px;
}

#mainContent .ui-nested-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

#mainContent .ui-nested-title{
  font-weight: bold;
  line-height: 1.4;
}

#mainContent .ui-nested-link{
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-accent);
  text-decoration: none;
  line-height: 1.2;
}

#mainContent .ui-nested-link:hover{
  filter: brightness(0.98);
}

/* Override legacy mobile rule: div#mainContent ul ul { display:none; } */
#mainContent .ui-nested-item details ul{
  display:block;
}

#mainContent .ui-nested-details ul{
  border: none;
  padding: 8px 0 0;
  background: transparent;
}

#mainContent .ui-nested-details ul li{
  display:block;
  margin: 6px 0;
  background: transparent;
  border: none;
}

/* Hub UI (Phase 4): modern menus on key pages only.
   Activated by `data-ui="hub"` on #mainContent via analytics/apply_hub_ui_enhancements.py. */
#mainContent[data-ui="hub"]{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

#mainContent[data-ui="hub"] .ui-hub-subnav{
  list-style: none;
  margin: 12px 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

#mainContent[data-ui="hub"] .ui-hub-subnav > li{
  display:block;
  margin: 0;
  background: transparent;
  border: none;
}

#mainContent[data-ui="hub"] .ui-hub-subnav > li > a{
  display:inline-block;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-accent);
  text-decoration: none;
  line-height: 1.2;
}

@media (max-width: 640px){
  #mainContent[data-ui="hub"] .ui-hub-subnav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  #mainContent[data-ui="hub"] .ui-hub-subnav > li{
    flex: 0 0 auto;
  }
}

#mainContent[data-ui="hub"] .ui-hub-menu-filter{
  margin: 12px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

#mainContent[data-ui="hub"] .ui-hub-menu-filter-label{
  display:block;
  margin: 0 0 6px;
  font-weight: 700;
  line-height: 1.3;
}

#mainContent[data-ui="hub"] .ui-hub-menu-filter-row{
  display:flex;
  align-items:center;
  gap: 8px;
}

#mainContent[data-ui="hub"] .ui-hub-menu-filter-input{
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-fg);
  font-size: 16px;
  line-height: 1.2;
}

#mainContent[data-ui="hub"] .ui-hub-menu-filter-clear{
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
  color: var(--ui-fg);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

#mainContent[data-ui="hub"] .ui-hub-menu-filter-clear:hover{
  filter: brightness(0.98);
}

#mainContent[data-ui="hub"] .ui-hub-menu-filter-meta{
  margin: 6px 0 0;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ui-muted);
}

#mainContent[data-ui="hub"] .ui-hub-menu-filter-count{
  font-weight: 700;
  color: var(--ui-fg);
}

#mainContent[data-ui="hub"] [hidden]{
  display: none !important;
}

@media print{
  #mainContent[data-ui="hub"] .ui-hub-menu-filter{
    display:none;
  }
}

#mainContent[data-ui="hub"] .ui-hub-menu{
  list-style: none;
  margin: 12px 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

@media (max-width: 640px){
  #mainContent[data-ui="hub"] .ui-hub-menu{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

#mainContent[data-ui="hub"] .ui-hub-menu > li{
  display:block;
  margin: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 10px 12px;
}

#mainContent[data-ui="hub"] .ui-hub-menu > li:not(.ui-nested-item):not(.ui-grade-item){
  cursor: pointer;
}

#mainContent[data-ui="hub"] .ui-hub-menu > li:not(.ui-nested-item):not(.ui-grade-item):focus-within{
  border-color: var(--ui-border-strong);
  box-shadow: 0 0 0 3px var(--ui-focus);
}

#mainContent[data-ui="hub"] .ui-hub-menu > li:hover{
  box-shadow: 0 1px 2px var(--ui-shadow);
}

#mainContent[data-ui="hub"] .ui-hub-menu > li > a{
  color: var(--ui-fg);
  text-decoration: none;
  font-weight: 600;
}

/* Badge-like secondary links (e.g., @24 / @12). */
#mainContent[data-ui="hub"] .ui-hub-menu > li > a + a{
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

/* Page-level filter widget (hub pages). */
#mainContent[data-ui="hub"] .ui-page-filter{
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

#mainContent[data-ui="hub"] .ui-page-filter-label{
  display:block;
  font-weight: 700;
  margin: 0 0 6px;
}

#mainContent[data-ui="hub"] .ui-page-filter-controls{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#mainContent[data-ui="hub"] .ui-page-filter-input{
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 540px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-bg);
  color: var(--ui-fg);
}

#mainContent[data-ui="hub"] .ui-page-filter-clear{
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-bg);
  color: var(--ui-fg);
  cursor: pointer;
}

#mainContent[data-ui="hub"] .ui-page-filter-status{
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ui-muted);
}

/* Avoid double-carding: nested/details based items already have their own card. */
#mainContent[data-ui="hub"] .ui-hub-menu > li.ui-nested-item,
#mainContent[data-ui="hub"] .ui-hub-menu > li.ui-grade-item{
  border: none;
  background: transparent;
  padding: 0;
}

/* Hub readability (Phase 6): undo legacy "button grid" for non-menu content lists. */
#mainContent[data-ui="hub"] > ol{
  list-style: none;
  padding: 0;
  margin: 8px 0 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--ui-muted);
}

#mainContent[data-ui="hub"] > ol > li{
  margin: 0;
}

#mainContent[data-ui="hub"] > ol > li + li:before{
  content: "›";
  margin: 0 6px 0 2px;
  color: var(--ui-muted-2);
}

#mainContent[data-ui="hub"] > ol a{
  color: var(--ui-muted);
  text-decoration: none;
}

#mainContent[data-ui="hub"] > ol a:hover{
  text-decoration: underline;
}

#mainContent[data-ui="hub"] h2{
  margin: 26px 0 14px;
  line-height: 1.25;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ui-fg);
  border: none;
  border-left: 6px solid var(--ui-accent);
  border-radius: 0;
  padding: 2px 0 2px 12px;
}

#mainContent[data-ui="hub"] h2 a{
  color: inherit;
  text-decoration: none;
}

#mainContent[data-ui="hub"] h2 a:hover{
  text-decoration: underline;
}

#mainContent[data-ui="hub"] h3{
  margin: 18px 0 10px;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ui-fg);
  border: none;
  border-left: 3px solid var(--ui-border);
  border-radius: 0;
  padding: 0 0 0 12px;
}

@media (min-width: 720px){
  #mainContent[data-ui="hub"] h2{
    font-size: 22px;
  }

  #mainContent[data-ui="hub"] h3{
    font-size: 19px;
  }
}

#mainContent[data-ui="hub"] h3 + details.ui-section-details{
  margin-top: 0;
}

#mainContent[data-ui="hub"] .ui-section-details{
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  padding: 0;
  margin: 10px 0 16px;
}

#mainContent[data-ui="hub"] .ui-section-summary{
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.35;
}

#mainContent[data-ui="hub"] .ui-section-summary::-webkit-details-marker{
  display: none;
}

#mainContent[data-ui="hub"] .ui-section-summary::after{
  content: "開く";
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 8px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-muted);
}

#mainContent[data-ui="hub"] details[open] > .ui-section-summary::after{
  content: "閉じる";
}

#mainContent[data-ui="hub"] .ui-section-details > ul.ui-hub-menu{
  margin: 0;
  padding: 0 12px 12px;
}

#mainContent[data-ui="hub"] p{
  margin: 10px 0;
}

#mainContent[data-ui="hub"] ul:not(.ui-hub-menu):not(.ui-hub-subnav){
  border: none;
  padding: 0 0 0 1.25em;
  margin: 10px 0;
  background: transparent;
  list-style: disc;
}

#mainContent[data-ui="hub"] ul:not(.ui-hub-menu):not(.ui-hub-subnav) > li{
  display: list-item;
  margin: 6px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* page01 content:auto intro: override legacy "button grid" styles inside injected guidance block. */
#mainContent .ui-hub-intro{
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted);
}

#mainContent .ui-hub-intro h3{
  margin: 16px 0 10px;
}

#mainContent .ui-hub-intro p{
  margin: 8px 0;
  font-size: 15px;
  line-height: 1.7;
}

#mainContent .ui-hub-intro p.ui-hub-intro-compact{
  margin: 8px 0 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ui-muted);
}

#mainContent .ui-hub-intro ul{
  border: none;
  padding: 0 0 0 1.25em;
  margin: 10px 0 14px;
  background: transparent;
  list-style: disc;
}

#mainContent .ui-hub-intro ul > li{
  display: list-item;
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.7;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

#mainContent .ui-hub-intro ul a{
  padding: 0;
}

/* Hub intro: collapse long guidance by default (details/summary). */
#mainContent .ui-hub-intro details.ui-hub-intro-details{
  margin: 10px 0 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: 0 1px 0 var(--ui-shadow);
}

#mainContent .ui-hub-intro details.ui-hub-intro-details > summary.ui-hub-intro-summary{
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 800;
  color: var(--ui-fg);
}

#mainContent .ui-hub-intro details.ui-hub-intro-details > summary.ui-hub-intro-summary::-webkit-details-marker{
  display: none;
}

#mainContent .ui-hub-intro details.ui-hub-intro-details > summary.ui-hub-intro-summary::before{
  content: "▸";
  display: inline-block;
  width: 1.1em;
  color: var(--ui-muted);
}

#mainContent .ui-hub-intro details.ui-hub-intro-details[open] > summary.ui-hub-intro-summary::before{
  content: "▾";
}

#mainContent .ui-hub-intro .ui-hub-intro-details-body{
  padding: 0 12px 12px;
}

#mainContent .ui-hub-intro .ui-hub-intro-details-body > :first-child{
  margin-top: 8px;
}

@media (min-width: 720px){
  #mainContent .ui-hub-intro{
    padding: 14px 16px;
  }

  #mainContent .ui-hub-intro p,
  #mainContent .ui-hub-intro ul > li{
    font-size: 16px;
  }
}

/* page01 print-list (P001...) UI: make links tap-friendly without altering other lists. */
#mainContent ul.ui-page01-print-list{
  list-style: none;
  margin: 12px 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

@media (max-width: 420px){
  #mainContent ul.ui-page01-print-list{
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  }
}

#mainContent ul.ui-page01-print-list > li{
  display:block;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

#mainContent ul.ui-page01-print-list > li > a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-fg);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}

#mainContent ul.ui-page01-print-list > li > a:visited{
  color: var(--ui-fg);
}

#mainContent ul.ui-page01-print-list > li > a:hover{
  box-shadow: 0 1px 2px var(--ui-shadow);
}

/* page01 (and similar templates) prev/next nav (ol.bene): modern buttons + disabled state. */
#mainContent ol.bene{
  list-style: none;
  margin: 12px 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}

#mainContent ol.bene li{
  display:block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  flex: 1 1 260px;
  /* Hide legacy wrapper characters like "【" and "】" that appear as text nodes. */
  font-size: 0;
  line-height: 0;
}

@supports not (gap: 12px){
  #mainContent ol.bene li{
    margin: 0 12px 12px 0;
  }
}

#mainContent ol.bene li + li:before{
  content: "";
  margin: 0;
}

#mainContent ol.bene a,
#mainContent ol.bene .ui-nav-disabled{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  align-content: center;
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

#mainContent ol.bene a:visited{
  color: var(--ui-fg);
}

#mainContent ol.bene a:hover{
  box-shadow: 0 1px 2px var(--ui-shadow);
}

#mainContent ol.bene a > span{
  display:block;
  flex: 0 0 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-muted);
  margin-top: 2px;
}

#mainContent ol.bene .ui-nav-disabled{
  color: var(--ui-muted);
  background: var(--ui-surface-muted);
  border-style: dashed;
}