/* =========================================================
  Ensemble Portal — style.css (FULL REPLACEMENT / 2026 STABLE)
  - Tokens → Themes → Base → Layout → Components → Pages
  - Header / nav gap fixes
  - Auth / request entry UI refined
  - Keep existing class names as much as possible
========================================================= */

/* =========================================================
  0) Reset & Base
========================================================= */
*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  scroll-behavior:smooth;
}

/* 団内アンケート */
.survey-page{max-width:900px;margin:0 auto}.survey-page__heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px}.survey-page h2{margin:.15rem 0 .4rem}.survey-page h3{margin:0 0 12px}.survey-section{margin:26px 0}.survey-card,.survey-question-row,.survey-result{background:var(--surface,#fff);border:1px solid var(--border,#ddd);border-radius:14px;padding:18px;margin:10px 0}.survey-card{display:flex;align-items:center;justify-content:space-between;gap:18px}.survey-card h4{margin:8px 0}.survey-card p{margin:6px 0}.survey-status{display:inline-block;border-radius:999px;background:var(--primary-soft,#eee);padding:3px 8px;font-size:.8rem;font-weight:700}.survey-status--sub{margin-left:5px;background:#f3eeee}.survey-form{max-width:720px}.survey-form .form-row{margin:0 0 18px}.survey-form label{font-weight:700}.survey-form input[type=text],.survey-form input[type=datetime-local],.survey-form textarea,.survey-form select{box-sizing:border-box;width:100%;margin-top:6px}.survey-form ul{list-style:none;margin:8px 0;padding:0}.survey-form li{margin:5px 0}.form-help{color:var(--muted,#666);font-size:.9rem;margin:5px 0}.survey-rule{margin:30px 0;border:0;border-top:1px solid var(--border,#ddd)}.survey-question-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px}.survey-question-row p{margin:4px 0 0}.survey-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.survey-actions form{margin:0}.btn-small{padding:5px 9px;font-size:.85rem}.btn-danger{background:#a63b3b!important;color:#fff!important}.survey-next-step{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:18px;background:var(--surface,#fff);border:1px solid var(--border,#ddd);border-radius:14px}.survey-next-step h3{width:100%;margin:0}.survey-next-step p{margin:0}.survey-answer-page{max-width:760px}.survey-description{margin:14px 0}.survey-anonymous-note{padding:12px 14px;background:#fff7e9;border-radius:10px}.survey-answer-question{margin:18px 0;padding:18px;border:1px solid var(--border,#ddd);border-radius:14px}.survey-answer-question legend{padding:0 4px;font-weight:700}.survey-answer-question label{display:block;margin:9px 0}.survey-answer-question input[type=text],.survey-answer-question input[type=date],.survey-answer-question textarea{box-sizing:border-box;width:100%;margin-top:5px}.survey-rating{display:flex;gap:12px}.survey-rating label{display:inline-block}.required{margin-left:7px;color:#b33131;font-size:.78rem}.survey-free-text{padding-left:20px}.survey-free-text li{margin:10px 0;padding:9px;background:#fafafa;border-radius:8px}
@media (max-width:640px){.survey-page__heading,.survey-card,.survey-question-row{display:block}.survey-page__heading>.btn,.survey-card>.btn{display:inline-block;margin-top:12px}.survey-actions{margin-top:10px}.survey-next-step{display:block}.survey-next-step .btn,.survey-next-step form{display:block;width:100%;box-sizing:border-box;margin:9px 0}.survey-next-step form .btn{margin:0}.survey-rating{justify-content:space-between;gap:5px}}

/* ===== Kobara concierge ===== */
.kobara-concierge{position:fixed;right:22px;bottom:22px;z-index:80;font-family:inherit}
.kobara-concierge__launcher{display:flex;align-items:center;gap:8px;min-height:58px;padding:5px 14px 5px 6px;border:1px solid #20304b;border-radius:999px;background:#fffdf8;color:#102342;box-shadow:0 10px 28px rgba(26,39,65,.22);font:inherit;font-size:.88rem;font-weight:900;cursor:pointer}
.kobara-concierge__launcher:hover{transform:translateY(-1px);box-shadow:0 13px 30px rgba(26,39,65,.28)}
.kobara-concierge__launcher img{display:block;width:46px;height:46px;object-fit:cover;object-position:center 25%;border-radius:50%;background:#f2e3bf}
.kobara-concierge__panel{position:absolute;right:0;bottom:68px;width:min(368px,calc(100vw - 28px));overflow:hidden;border:1px solid rgba(108,84,39,.2);border-radius:22px;background:#fffdf9;box-shadow:0 18px 46px rgba(26,39,65,.27)}
.kobara-concierge__head{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid rgba(108,84,39,.14);background:linear-gradient(135deg,#fff4dc,#f5ead5)}
.kobara-concierge__portrait{width:58px;height:58px;object-fit:cover;object-position:center 24%;border-radius:50%;background:#e9d9b5}
.kobara-concierge__eyebrow{margin:0 0 2px;color:#9a6600;font-size:.68rem;font-weight:900;letter-spacing:.08em}.kobara-concierge__head h2{margin:0;color:#102342;font-size:1.05rem}
.kobara-concierge__close{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#42516b;font-size:1.45rem;line-height:1;cursor:pointer}.kobara-concierge__close:hover{background:rgba(255,255,255,.75)}
.kobara-concierge__messages{display:flex;flex-direction:column;gap:9px;max-height:310px;min-height:124px;padding:14px;overflow-y:auto;background:#fffcf7}
.kobara-concierge__message{max-width:88%;padding:10px 12px;border-radius:15px;font-size:.88rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.kobara-concierge__message--assistant{align-self:flex-start;background:#f1ece2;color:#152948;border-bottom-left-radius:4px}.kobara-concierge__message--user{align-self:flex-end;background:#213759;color:#fff;border-bottom-right-radius:4px}
.kobara-concierge__hint{margin:0;padding:0 14px 10px;color:#6d7684;font-size:.76rem;line-height:1.45}
.kobara-concierge__form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px 12px;border-top:1px solid rgba(108,84,39,.12)}
.kobara-concierge__form textarea{width:100%;min-height:42px;box-sizing:border-box;resize:none;border:1px solid rgba(108,84,39,.24);border-radius:12px;padding:9px 10px;background:#fff;color:#102342;font:inherit;font-size:.86rem}.kobara-concierge__form textarea:focus{outline:2px solid rgba(169,120,25,.28);border-color:#a67819}.kobara-concierge__form button{align-self:end;min-height:42px;padding:0 12px;border:0;border-radius:12px;background:#193252;color:#fff;font:inherit;font-size:.84rem;font-weight:900;cursor:pointer}.kobara-concierge__form button:disabled{opacity:.58;cursor:wait}
.kobara-concierge__feedback{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 12px 12px;border-top:1px solid rgba(108,84,39,.12);background:#fff9ed;color:#5f503a;font-size:.76rem}.kobara-concierge__feedback button{border:1px solid rgba(136,91,9,.25);border-radius:999px;padding:5px 8px;background:#fff;color:#644704;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer}.kobara-concierge__feedback .kobara-concierge__not-helpful{border-color:rgba(83,95,113,.2);color:#536071}.kobara-concierge__feedback button:disabled{opacity:.62;cursor:default}.kobara-concierge__thanks{color:#1f6a42;font-weight:800}
@media(max-width:760px){.kobara-concierge{right:12px;bottom:12px}.kobara-concierge__launcher{min-height:52px;padding:4px 11px 4px 5px;font-size:.8rem}.kobara-concierge__launcher img{width:42px;height:42px}.kobara-concierge__panel{bottom:60px;width:min(368px,calc(100vw - 24px));border-radius:18px}.kobara-concierge__messages{max-height:42vh}.kobara-concierge__head{padding:11px 12px}.kobara-concierge__portrait{width:50px;height:50px}.kobara-concierge__form{padding:9px 10px 10px}.kobara-concierge__feedback{padding:9px 10px 10px}}

body{
  overflow-x:hidden;
  background: var(--page-bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
               "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.55;
}

img{
  max-width:100%;
  height:auto;
}

a{
  color: var(--primary);
  text-decoration:none;
}

a:hover{
  color: var(--primary-strong);
}

h1, h2, h3{
  color: var(--heading);
  margin:.6rem 0 1rem;
}

h2{
  font-weight: 900;
  letter-spacing:.02em;
}

:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 10px;
}

/* =========================================================
  1) Tokens (base)
========================================================= */
:root{
  /* surfaces */
  --page-bg: #f6f7fb;
  --surface:#ffffff;
  --surface-2:#f3f4f6;

  /* text */
  --ink:#111827;
  --ink-muted:#6b7280;
  --heading:#0f172a;

  /* borders / shadows */
  --border:#e5e7eb;
  --shadow-sm: 0 1px 0 rgba(15,23,42,.05);
  --shadow-md: 0 10px 26px rgba(15,23,42,.10);
  --shadow-lg: 0 22px 54px rgba(15,23,42,.14);

  /* brand (default) */
  --primary:#4f46e5;
  --primary-strong:#3730a3;
  --accent:#10b981;
  --accent-2:#06b6d4;

  /* derived */
  --ring:#a5b4fc;
  --chip:#eef2ff;
  --chip-hov:#e0e7ff;

  /* header/nav/footer */
  --header-bg:#eef2ff;
  --nav-bg:#eef2ff;
  --footer-bg:#f3f4f6;

  /* buttons */
  --btn-bg: var(--primary);
  --btn-bg-hov: var(--primary-strong);
  --btn-fg:#fff;

  --btn-success-bg:#16a34a;
  --btn-success-hov:#15803d;
  --btn-success-fg:#fff;

  --btn-danger-bg:#dc2626;
  --btn-danger-hov:#b91c1c;
  --btn-danger-fg:#fff;

  /* form */
  --field-bg:#fff;
  --field-fg: var(--ink);
}

/* If color-mix is supported, soften via tokens */
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
  body{
    --page-bg: color-mix(in srgb, var(--primary) 3%, #ffffff);

    --chip:     color-mix(in srgb, var(--primary) 10%, var(--surface));
    --chip-hov: color-mix(in srgb, var(--primary) 16%, var(--surface));
    --ring:     color-mix(in srgb, var(--primary) 45%, #ffffff);

    --header-bg: color-mix(in srgb, var(--primary) 12%, var(--page-bg));
    --nav-bg:    color-mix(in srgb, var(--primary) 10%, var(--surface));
    --footer-bg: color-mix(in srgb, var(--primary) 6%,  var(--surface));
  }
}

/* color-mix 非対応ブラウザ用 */
@supports not (color: color-mix(in srgb, #000 10%, #fff)) {
  body{
    --page-bg:#f6f7fb;
    --chip:#eef2ff;
    --chip-hov:#e0e7ff;
    --ring:#a5b4fc;
    --header-bg:#eef2ff;
    --nav-bg:#eef2ff;
    --footer-bg:#f3f4f6;
  }
}

/* =========================================================
  2) Themes (body[data-theme]) — single source of truth
========================================================= */
body[data-theme="relax"]{
  --primary:#4f46e5;
  --primary-strong:#3730a3;
  --accent:#10b981;
  --accent-2:#06b6d4;
  --heading:#0f172a;
  --ring:#a5b4fc;
}

body[data-theme="positive"]{
  --primary:#ef4444;
  --primary-strong:#b91c1c;
  --accent:#14b8a6;
  --accent-2:#f59e0b;
  --heading:#7f1d1d;
  --ring:#fecaca;
  --page-bg:#fff7ed;
  --surface:#ffffff;
  --surface-2:#fff1e6;
  --border:#f1e2d6;
}

body[data-theme="luxury"]{
  --primary:#0f172a;
  --primary-strong:#020617;
  --accent:#d4af37;
  --accent-2:#0ea5e9;
  --heading:#0b1220;
  --ring:#94a3b8;
  --page-bg:#faf7f2;
  --surface:#ffffff;
  --surface-2:#f4efe7;
  --border:#e7dfd5;
  --chip:#f7f2e6;
  --chip-hov:#f1e8d6;
  --header-bg:#f4efe7;
  --nav-bg:#ffffff;
  --footer-bg:#f4efe7;
}

body[data-theme="sweet"]{
  --primary:#db2777;
  --primary-strong:#9d174d;
  --accent:#8b5cf6;
  --accent-2:#06b6d4;
  --heading:#831843;
  --ring:#fbcfe8;
  --page-bg:#fff1f2;
  --surface:#ffffff;
  --surface-2:#ffe4e6;
  --border:#f8cdd3;
  --chip:#ffe4e6;
  --chip-hov:#fecdd3;
}

body[data-theme="sustainable"]{
  --primary:#166534;
  --primary-strong:#14532d;
  --accent:#a16207;
  --accent-2:#0ea5e9;
  --heading:#14532d;
  --ring:#86efac;
  --page-bg:#f6fbf6;
  --surface:#ffffff;
  --surface-2:#edf7ed;
  --border:#dbe8db;
  --chip:#e7f6e7;
  --chip-hov:#d9f0d9;
}

body[data-theme="cool"]{
  --primary:#1d4ed8;
  --primary-strong:#1e40af;
  --accent:#06b6d4;
  --accent-2:#64748b;
  --heading:#0f172a;
  --ring:#93c5fd;
  --page-bg:#eff6ff;
  --surface:#ffffff;
  --surface-2:#eaf2ff;
  --border:#dbe7ff;
  --chip:#e0f2fe;
  --chip-hov:#bae6fd;
}

/* =========================================================
  3) Layout
========================================================= */
main, .container, .site-main{
  max-width:1040px;
  margin: 1.2rem auto;
  padding-inline: 16px;
}

.portal-page-guide{
  display:flex;
  justify-content:flex-end;
  margin:0 0 .35rem;
}
.portal-page-guide__link{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:3px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
}
.portal-page-guide__link:hover{
  border-color:var(--primary);
  color:var(--primary-strong);
  background:var(--surface);
}

.page h2, .site-main h2{
  position:relative;
  margin-bottom:.75rem;
}

.page h2::after, .site-main h2::after{
  content:"";
  display:block;
  height:2px;
  width:64px;
  margin-top:.5rem;
  border-radius:999px;
  background: var(--chip-hov);
}

/* =========================================================
  4) Header / Navigation / Footer
========================================================= */
.site-header{
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding: .9rem 0;
  margin: 0;
  text-align:center;
  position:relative;
}

.site-header .brand{
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 34px);
  color: var(--heading);
  margin: 0;
  letter-spacing:.01em;
}

.site-header .brand a{
  color: inherit;
}

.site-header .brand a:hover{
  color: var(--primary-strong);
}

/* Header language control: compact, labelled and independent from navigation. */
.language-switcher{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:.55rem;
  position:absolute;
  top:.85rem;
  right:clamp(1rem, 4vw, 4rem);
  margin:0;
  padding:.34rem .45rem .34rem .7rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  color:var(--ink-muted);
  font-size:.82rem;
  font-weight:800;
}
.language-switcher select{
  min-height:32px;
  padding:.2rem 1.8rem .2rem .45rem;
  border:0;
  border-radius:999px;
  background:var(--chip);
  color:var(--heading);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.language-switcher select:focus{outline:2px solid var(--ring);outline-offset:2px}
@media (max-width:760px){
  .site-header{padding:.9rem 6.5rem .75rem .75rem}
  .site-header .brand{font-size:clamp(20px,6.4vw,28px)}
  .language-switcher{
    position:absolute;
    top:.55rem;
    right:.55rem;
    margin:0;
    gap:0;
    padding:.14rem .22rem;
    font-size:.68rem;
  }
  .language-switcher label{display:none}
  .language-switcher select{min-height:26px;padding:.1rem 1.35rem .1rem .38rem;font-size:.7rem}
}

.navbar{
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap: .6rem;
  padding: .85rem 1rem 1.05rem;
  margin: 0;
}

.navbar form{
  display:inline-flex;
  align-items:center;
  margin:0;
}

footer{
  background: var(--footer-bg);
  padding: 1rem;
  text-align:center;
  border-top: 1px solid var(--border);
}

/* =========================================================
  5) Navigation Buttons (existing class)
========================================================= */
.nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 40px;
  padding: .50rem .95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 55%, #0000);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
  transition: background-color .15s, transform .05s, box-shadow .15s, border-color .15s, color .15s;
  text-decoration:none;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.nav-button:hover{
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.nav-button:active{
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
}

.nav-button--disabled{
  pointer-events:none;
  opacity:.55;
}

.nav-button--sub{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--heading);
}

.nav-button--sub:hover{
  background: var(--chip);
}

.nav-button--accent{
  background: color-mix(in srgb, var(--primary) 18%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--primary) 55%, #ffffff);
  color: var(--primary-strong);
  font-weight: 900;
}

.nav-button--accent:hover,
.nav-button--accent:focus{
  background: color-mix(in srgb, var(--primary) 26%, #ffffff);
  border-color: var(--primary);
  color: var(--primary-strong);
}

/* =========================================================
  6) Buttons (generic)
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .4rem;
  padding: .52rem 1.02rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--heading);
  font-weight: 900;
  line-height: 1;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color .15s, transform .02s, box-shadow .15s, border-color .15s;
  white-space: nowrap;
}

.btn:hover{
  background: var(--chip-hov);
  border-color: var(--chip-hov);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active{
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

a.btn, a.btn:visited{
  color: inherit;
}

.btn-primary{
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-primary:hover{
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

.btn-success, .btn-save{
  background: var(--btn-success-bg);
  color: var(--btn-success-fg);
  border-color: color-mix(in srgb, #000 8%, transparent);
}

.btn-success:hover, .btn-save:hover{
  background: var(--btn-success-hov);
}

.btn-danger{
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
  border-color: color-mix(in srgb, #000 8%, transparent);
}

.btn-danger:hover{
  background: var(--btn-danger-hov);
}

.btn-sm{
  padding: .38rem .72rem;
  font-size: .85rem;
  font-weight: 900;
}

input.btn,
input[type="submit"].btn,
input[type="button"].btn,
button.btn{
  width: auto;
}

/* =========================================================
  7) Forms
========================================================= */
input, textarea, select{
  width:100%;
  padding:.58rem .7rem;
  border:1px solid var(--border);
  border-radius:.65rem;
  background: var(--field-bg);
  color: var(--field-fg);
  font: inherit;
  line-height: 1.4;
}

textarea{
  min-height: 7.5rem;
}

input[type="checkbox"], input[type="radio"]{
  width:auto;
  height:auto;
  display:inline-block;
  margin:0;
  accent-color: var(--primary);
}

select{
  appearance:none;
  background-color: #fff;
  color: var(--ink);
  border:1px solid var(--border);
  border-radius:.65rem;
  padding:.58rem 2.2rem .58rem .7rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23111827' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .62rem center;
  background-size:1rem auto;
}

select:focus{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

select option{
  background:#fff;
  color:#111827;
}

select::-ms-expand{
  display:none;
}

.inline{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}

.inline-form{
  display:inline;
  margin:0;
}

/* =========================================================
  8) Tables
========================================================= */
table{
  width:100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.styled-table th,
.styled-table td{
  padding: .62rem .82rem;
  border: 1px solid var(--border);
}

th{
  background: var(--chip);
  text-align:left;
  font-weight: 900;
  color: var(--heading);
}

tr:nth-child(even) td{
  background: var(--surface-2);
}

tbody tr:hover td{
  background: var(--chip);
}

tr:target td{
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

/* =========================================================
  9) Messages (Django messages)
========================================================= */
.messages{
  list-style:none;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.messages .info{
  color: var(--primary);
}

.messages .success{
  color: var(--btn-success-hov);
}

.messages .warning{
  color: #b45309;
}

.messages .error, .messages .danger{
  color: var(--btn-danger-hov);
}

/* =========================================================
  10) Utilities
========================================================= */
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:1rem; }
.mb-1{ margin-bottom:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:1rem; }

.muted{
  color: var(--ink-muted);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================================================
  11) Badges
========================================================= */
.badge{
  display:inline-flex;
  align-items:center;
  padding: .22rem .55rem;
  border-radius: 10px;
  font-weight: 900;
  font-size: .85rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* =========================================================
  12) MyPage sections
========================================================= */
.mypage-section{
  overflow-x:auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0;
  box-shadow: var(--shadow-sm);
}

.mypage-section > h2{
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.mypage-section > h3{
  margin: 10px 0 8px;
  color: var(--heading);
}

.mypage-section table{
  margin-top: 10px;
}

.section-toolbar,
.toolbar.section-toolbar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

/* Supporter Card */
.supporter-card{
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 6%, var(--surface)) 0%,
    var(--surface) 100%
  );
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
}

/* Login page: compact hierarchy and secondary action cards */
.auth-page--login{
  max-width: 760px;
}

.auth-page--login .auth-submit .sl-btn{
  width: 100%;
}

.auth-link-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.auth-link-card{
  display: flex;
  min-height: 156px;
  padding: 18px;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.auth-link-card h2{
  margin: 0 0 7px;
  color: var(--heading);
  font-size: 1rem;
  line-height: 1.45;
}

.auth-link-card p{
  margin: 0;
  color: var(--ink-muted);
  font-size: .9rem;
  line-height: 1.7;
}

.auth-link-card a{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--primary-strong);
  font-weight: 700;
  text-decoration: none;
}

.auth-link-card a:hover{
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 820px){
  .auth-link-grid{
    grid-template-columns: 1fr;
  }

  .auth-link-card{
    min-height: 0;
  }
}

.mypage-section--supporter{
  background: var(--surface-2);
  border-color: var(--border);
}

.supporter-card__badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip);
  font-weight: 900;
  font-size: .85rem;
  margin-bottom: 10px;
}

.supporter-card__badge--sub{
  background: var(--surface-2);
}

.supporter-card__title{
  margin: 0 0 6px;
  font-weight: 900;
  color: var(--heading);
}

.supporter-card__desc{
  margin: 0 0 12px;
  color: var(--ink-muted);
  line-height: 1.7;
}

.supporter-card__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.supporter-card__note{
  margin: 14px 0;
  color: var(--ink-muted);
  font-size: .9rem;
  line-height: 1.7;
}

.supporter-status-table{
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.supporter-status-table th,
.supporter-status-table td{
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.supporter-status-table tr:last-child th,
.supporter-status-table tr:last-child td{
  border-bottom: 0;
}

.supporter-status-table th{
  width: 34%;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: .9rem;
  font-weight: 800;
}

.supporter-status-table td{
  color: var(--heading);
  font-weight: 700;
}

.supporter-status-badge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 900;
}

.supporter-status-badge.is-active{
  color: var(--primary-strong);
  background: var(--chip);
}

.supporter-status-badge.is-canceling{
  color: var(--heading);
  background: var(--surface-2);
}

.supporter-guide{
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.supporter-guide summary{
  padding: 11px 13px;
  color: var(--heading);
  font-weight: 800;
  cursor: pointer;
}

.supporter-guide[open] summary{
  border-bottom: 1px solid var(--border);
}

.supporter-guide ol{
  margin: 0;
  padding: 12px 16px 14px 36px;
  color: var(--ink-muted);
  line-height: 1.75;
}

.supporter-guide li + li{
  margin-top: 5px;
}

@media (max-width: 560px){
  .supporter-card{
    padding: 14px;
  }

  .supporter-status-table th,
  .supporter-status-table td{
    padding: 10px;
  }

  .supporter-status-table th{
    width: 40%;
  }
}

/* Organization selection and public organization search */
.organization-picker-page{display:grid;gap:20px}
.organization-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.organization-picker-head h1,.organization-picker-head p{margin:0}
.organization-picker-head p{margin-top:8px;color:var(--ink-muted)}
.organization-picker-actions,.organization-search__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.organization-search{display:grid;gap:8px;padding:16px;margin:18px 0;background:var(--surface-2);border:1px solid var(--border);border-radius:18px}
.organization-search label{font-weight:800}
.organization-search input[type="search"]{flex:1 1 360px;min-width:0}
.organization-picker-list{display:grid;gap:16px}
.organization-picker-card{display:grid;grid-template-columns:180px minmax(0,1fr) 190px;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md)}
.organization-picker-card.is-favorite{border-color:#e5c75f}
.organization-picker-card__media{min-height:160px;padding:16px;display:flex;align-items:center;justify-content:center;background:var(--chip)}
.organization-picker-card__media img{width:100%;height:130px;object-fit:contain;border-radius:14px;background:rgba(255,255,255,.78)}
.organization-picker-card__media span{font-size:2.6rem;font-weight:900}
.organization-picker-card__body{padding:18px 20px}
.organization-picker-card__title-row{display:flex;justify-content:space-between;gap:12px}
.organization-picker-card__title-row h2,.organization-picker-card__role,.organization-picker-card__description{margin:0}
.organization-picker-card__role,.organization-picker-card__description.is-muted{color:var(--ink-muted)}
.organization-picker-card__description{margin-top:14px;line-height:1.75}
.organization-picker-card__badges{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.organization-picker-card__details{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.organization-picker-card__details div{padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.organization-picker-card__details strong{margin-right:8px;color:var(--primary-strong)}
.organization-picker-card__actions{padding:18px;display:flex;flex-direction:column;justify-content:center;gap:10px;border-left:1px solid var(--border)}
.organization-picker-card__actions form,.organization-picker-card__actions .btn{width:100%;box-sizing:border-box;text-align:center}
.org-request-grid{grid-template-columns:1fr}
.org-request-card{flex-direction:row}
.org-request-card__media{width:230px;flex:0 0 230px;padding:18px}
.org-request-card__actions{width:190px;flex:0 0 190px;padding:18px;display:flex;align-items:center}
.org-request-card__badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.org-request-card__status.is-promoted{color:#854d0e;background:#fef3c7;border-color:#f4d88b}

@media (max-width:780px){
  .organization-picker-card{grid-template-columns:110px minmax(0,1fr)}
  .organization-picker-card__media{min-height:130px}
  .organization-picker-card__media img{height:96px}
  .organization-picker-card__actions{grid-column:1/-1;flex-direction:row;border-left:0;border-top:1px solid var(--border)}
  .org-request-card{flex-direction:column}
  .org-request-card__media,.org-request-card__actions{width:auto;flex-basis:auto}
}

@media (max-width:520px){
  .organization-picker-card{grid-template-columns:1fr}
  .organization-picker-card__media{min-height:0}
  .organization-picker-card__title-row,.organization-picker-card__actions{flex-direction:column}
}

/* Compact organization switching and discovery cards */
.organization-picker-card{grid-template-columns:140px minmax(0,1fr) 190px}
.organization-picker-card__media{min-height:124px;padding:12px}
.organization-picker-card__media img{height:104px}

.org-request-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.org-request-card{position:relative;flex-direction:column;min-height:0}
.org-request-card__media{width:auto;flex:0 0 auto;padding:14px 14px 0}
.org-request-card__logo,.org-request-card__placeholder{aspect-ratio:16/9;object-fit:contain}
.org-request-card__body{padding:14px;gap:10px}
.org-request-card__desc{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
.org-request-card__info-item p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.org-request-card__actions{width:auto;flex:0 0 auto;padding:0 14px 14px;display:block}
.org-request-card__actions .sl-btn{position:static}
.org-request-card__actions .sl-btn::after{content:"";position:absolute;inset:0}

@media (max-width:1100px){
  .org-request-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:850px){
  .org-request-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:780px){
  .organization-picker-card{grid-template-columns:100px minmax(0,1fr)}
  .organization-picker-card__media{min-height:110px}
  .organization-picker-card__media img{height:86px}
}

@media (max-width:580px){
  .org-request-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .org-request-card__header{gap:6px}
  .org-request-card__header h2{font-size:1rem}
  .org-request-card__body{padding:12px}
  .org-request-card__actions{padding:0 12px 12px}
}

@media (max-width:380px){
  .org-request-grid{grid-template-columns:1fr}
}

/* =========================================================
  13) Choices Grid
========================================================= */
.choices-grid:not(input):not(label){
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:.55rem;
}

.choices-grid:not(input):not(label) > *{
  margin:0;
  padding:0;
  background:transparent;
  border:0;
}

.choices-grid:not(input):not(label) label{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.55rem;
  width:100%;
  min-height: 40px;
  padding: .48rem .62rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  background: var(--chip);
  cursor:pointer;
  user-select:none;
}

.choices-grid label:hover{
  background: var(--chip-hov);
}

.choices-grid input[type="checkbox"],
.choices-grid input[type="radio"]{
  margin:0;
}

@media (max-width:480px){
  .choices-grid:not(input):not(label){
    grid-template-columns: 1fr;
  }
}

.score-picker{
  display:grid;
  gap:.65rem;
  min-width:0;
}

.score-picker__tbd{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  width:fit-content;
  font-weight:700;
  cursor:pointer;
}

.score-picker__tbd input{
  margin:0;
}

.score-picker__tbd-note{
  margin:.1rem 0 .25rem;
}

.score-picker__controls{
  display:grid;
  gap:.6rem;
  min-width:0;
}

.score-picker__controls.is-disabled{
  opacity:.55;
}

.score-picker__search-label{
  font-weight:700;
}

.score-picker__search{
  box-sizing:border-box;
  width:100%;
  min-height:44px;
  padding:.65rem .8rem;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:var(--surface);
  color:var(--ink);
  font:inherit;
}

.score-picker__search:focus{
  outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset:1px;
}

.score-picker__selected{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  min-height:30px;
}

.score-picker__selected-count{
  font-weight:700;
  color:var(--ink-muted);
}

.score-picker__chip{
  padding:.28rem .55rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--chip);
  color:var(--ink);
  font:inherit;
  cursor:pointer;
}

.score-picker__chip:hover{
  background:var(--chip-hov);
}

.score-picker__list{
  max-height:300px;
  overflow-y:auto;
  padding:.2rem .35rem .2rem .1rem;
  scrollbar-gutter:stable;
}

.score-picker__list .choices-grid:not(input):not(label){
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.score-picker__empty{
  margin:0;
  padding:.75rem;
  border:1px dashed var(--border);
  border-radius:.65rem;
  color:var(--ink-muted);
  text-align:center;
}

@media (max-width:760px){
  .score-picker__list .choices-grid:not(input):not(label){
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:480px){
  .score-picker__list .choices-grid:not(input):not(label){
    grid-template-columns:1fr;
  }
}

/* =========================================================
  14) Calendar (includes/calendar.html)
========================================================= */
.calendar-wrap, .page-schedule{
  overflow-x: hidden;
}

.calendar-table{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.calendar-table thead th,
.calendar-th{
  text-align:center;
  font-weight: 900;
  padding: .6em .4em;
  background: var(--chip);
  border-bottom: 1px solid var(--border);
}

.calendar-table th,
.calendar-table td{
  padding: 0;
  border: 1px solid var(--border);
  vertical-align: top;
}

.calendar-td{
  background: var(--surface);
}

.calendar-td.is-empty{
  background: var(--surface-2);
}

.calendar-td.is-today{
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.calendar-cell{
  position: relative;
  height: 130px;
  padding: 6px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

.calendar-day-number{
  position:absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-muted);
  line-height: 1;
  pointer-events:none;
}

.calendar-practice-list{
  margin-top: 20px;
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.calendar-practice{
  padding: 4px 6px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  min-width: 0;
}

.practice-place,
.practice-title{
  font-size: .92rem;
  line-height: 1.35;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.calendar-more{
  margin-top:auto;
  align-self:flex-end;
  font-size: .85rem;
  color: var(--primary);
  text-decoration: underline;
  padding: 2px 4px;
}

.calendar-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: .75rem;
  margin: 10px 0 14px;
  font-weight: 900;
  letter-spacing:.02em;
  color: var(--heading);
}

.calendar-header .calendar-nav{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--heading);
  font-weight: 900;
  font-size: .92rem;
  transition: background-color .15s, transform .05s, border-color .15s;
}

.calendar-header .calendar-nav:hover{
  background: var(--chip-hov);
  transform: translateY(-1px);
}

.calendar-header .calendar-month-badge{
  display:inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .34rem .9rem;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.calendar-header .calendar-month-badge .y{
  font-size: .95rem;
  opacity: .75;
  font-weight: 900;
}

.calendar-header .calendar-month-badge .m{
  font-size: 1.25rem;
  font-weight: 900;
}

.page h2.calendar-header::after,
.site-main h2.calendar-header::after{
  content:none !important;
}

.calendar-preference-row{display:flex;justify-content:flex-end;margin:-.25rem 0 .45rem}.calendar-preference-row label{display:flex;align-items:center;gap:.35rem;margin:0;font-size:.84rem;white-space:nowrap}.calendar-preference-row select{height:34px;margin:0}

@media (max-width: 600px){
  .calendar-table{
    display:block;
    border:none;
  }

  .calendar-table thead{
    display:none;
  }

  .calendar-table tbody,
  .calendar-table tr{
    display:block;
    width:100%;
  }

  .calendar-td{
    display:none;
  }

  .calendar-td.has-practice{
    display:block;
    margin-bottom: .8rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }

  .calendar-cell{
    height:auto;
    padding: .7rem .8rem;
    display:grid;
    grid-template-columns: 56px 1fr;
    gap: .7rem;
  }

  .calendar-day-number{
    position: static;
    align-self: start;
    padding: .35rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--chip);
    color: var(--heading);
    font-size: .95rem;
    font-weight: 900;
    text-align:center;
  }

  .calendar-practice-list{
    margin-top: 0;
  }

  .practice-place, .practice-title{
    -webkit-line-clamp: 2;
  }

  .calendar-header{
    flex-wrap:wrap;
    gap:.5rem;
  }

  .calendar-preference-row{display:none}
}

.calendar-day-number{
  font-weight: 700;
  font-size: 1.1rem;
}

.calendar-td.has-practice{
  background: color-mix(in srgb, var(--accent) 6%, white);
}

/* =========================================================
  15) Scores (posts: score_list)
========================================================= */
.score-actions{
  margin-top: .45rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

.parts-list{
  display:flex;
  flex-direction:column;
  gap: .45rem;
}

.part-row{
  padding: .48rem .62rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.part-name{
  font-weight: 900;
  color: var(--heading);
}

.part-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

.score-title{
  line-height: 1.35;
}

.ui-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding: .38rem .78rem;
  font-size: .85rem;
  font-weight: 900;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--heading);
  cursor:pointer;
  appearance:none;
  transition: background-color .15s ease, transform .02s ease;
}

.ui-action:hover{
  background: var(--chip-hov);
}

.ui-action:active{
  transform: translateY(1px);
}

/* =========================================================
  16) Practice List Cards (contact: practice_list)
========================================================= */
.practice-cards{
  display:grid;
  gap: 14px;
}

.practice-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow-md);
}

.practice-card__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--chip);
  border-bottom: 1px solid var(--border);
}

.practice-when{
  min-width:0;
}

.practice-time{
  font-weight: 900;
  color: var(--heading);
  letter-spacing:.02em;
}

.practice-date{
  font-weight: 900;
  color: var(--ink-muted);
  font-size:.92rem;
  margin-top:2px;
}

.practice-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
  align-items:center;
}

.practice-actions .btn{
  width:auto;
  padding: .42rem .75rem;
  font-weight: 900;
}

.practice-card__grid{
  display:grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.practice-block{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items:start;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 12px;
  min-width: 0;
}

.practice-block--wide{
  grid-column: 1 / -1;
}

.practice-label{
  font-size: .82rem;
  font-weight: 900;
  color: var(--ink-muted);
  letter-spacing:.03em;
  line-height: 1.2;
  padding-top: 2px;
}

.practice-value{
  min-width: 0;
  overflow-wrap:anywhere;
  display:grid;
  gap: 6px;
}

.practice-score{
  display:inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--border);
  font-weight: 900;
  font-size: .92rem;
  max-width: 100%;
  overflow-wrap:anywhere;
}

.practice-divider{
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.practice-custom{
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap:anywhere;
}

.atd-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .75rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 700px){
  .atd-panel{
    grid-template-columns: 1fr;
  }
}

.atd-title{
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--heading);
}

.atd-list{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}

.atd-chip{
  display:inline-flex;
  align-items:center;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip);
  font-weight: 900;
  font-size: .85rem;
  line-height: 1;
}

@media (max-width: 640px){
  .practice-card__head{
    padding: 12px 12px;
  }

  .practice-card__grid{
    padding: 12px 12px 14px;
  }

  .practice-block{
    grid-template-columns: 72px 1fr;
  }
}

/* =========================================================
  17) Notice Card (連絡板)
========================================================= */
.notice-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  margin: 14px 0 18px;
}

.notice-card h2{
  margin: 0 0 10px;
}

.notice-card p{
  margin: 0;
  line-height: 1.7;
  color: var(--ink);
}

.notice-card .btn{
  margin-top: 10px;
}

.notice-card--home{
  margin-bottom: 16px;
}

/* =========================================================
  18) Organization tiles (portal)
========================================================= */
.org-tiles{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.org-tile{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background: var(--surface);
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.org-tile:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--chip-hov);
}

.org-logo{
  aspect-ratio: 4 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: var(--chip);
}

.org-logo-img{
  max-width: 86%;
  max-height: 190px;
  width:auto;
  height:auto;
  object-fit: contain;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  box-shadow: 0 10px 18px rgba(15,23,42,.10);
}

.org-logo--placeholder{
  width: 86px;
  height: 86px;
  border-radius: 22px;
  font-size: 40px;
  font-weight: 900;
  color: var(--heading);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  box-shadow: 0 10px 18px rgba(15,23,42,.12);
}

.org-meta{
  padding: 18px 20px 22px;
}

.org-name{
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 6px;
  color: var(--heading);
}

.org-sub{
  font-size: 14px;
  color: var(--ink-muted);
  margin: 4px 0;
}

/* =========================================================
  19) User management / Fees (sticky patterns)
========================================================= */
.table-scroll{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.page-user-management .table-wrap{
  overflow-x:auto;
}

.page-user-management{
  overflow-x: visible;
}

.page-user-management table.styled-table{
  min-width: 1200px;
}

.page-user-management table.styled-table:not(.perm-table) th,
.page-user-management table.styled-table:not(.perm-table) td{
  white-space: nowrap;
  vertical-align: middle;
}

/* =========================================================
  20) Responsive (global)
========================================================= */
@media (max-width: 600px){
  .navbar{
    padding: .75rem .8rem .95rem;
  }

  .navbar .nav-button{
    font-size: .9rem;
    padding: .42rem .82rem;
  }
}

/* =========================================================
  21) Auto Dark (theme未指定時のみ)
========================================================= */
@media (prefers-color-scheme: dark){
  body:not([data-theme]){
    --page-bg:#0b1220;
    --surface:#0f172a;
    --surface-2:#111c33;
    --ink:#e5e7eb;
    --ink-muted:#a3a3a3;
    --border:#22304a;
    --heading:#f1f5f9;
    --primary:#93c5fd;
    --primary-strong:#60a5fa;
    --accent:#34d399;
    --accent-2:#22d3ee;
    --chip:#111c33;
    --chip-hov:#172544;
    --ring:#93c5fd;
    --header-bg:#0f172a;
    --nav-bg:#0f172a;
    --footer-bg:#0f172a;
  }
}

/* =========================================================
  22) Footer Ad (fixed)
========================================================= */
.footer-ad{
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 92%, #0000);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.footer-ad__inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.footer-ad__title{
  font-weight: 900;
  color: var(--heading);
  margin-bottom: 2px;
}

.footer-ad__body{
  color: var(--ink-muted);
  line-height: 1.6;
  font-size: .95rem;
}

.footer-ad__cta{
  white-space: nowrap;
}

/* =========================================================
  23) Permissions table (権限テーブル)
========================================================= */
.page-user-management .table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-user-management table.styled-table.perm-table{
  table-layout: fixed;
  width: 100%;
  min-width: 1400px;
}

.page-user-management table.perm-table col.c-user{ width: 320px; }
.page-user-management table.perm-table col.c-role{ width: 140px; }
.page-user-management table.perm-table col.c-part{ width: 140px; }
.page-user-management table.perm-table col.c-position{ width: 220px; }
.page-user-management table.perm-table col.c-order{ width: 110px; }
.page-user-management table.perm-table col.c-attendance-required{ width: 130px; }
.page-user-management table.perm-table col.c-flag{ width: 86px; }

.page-user-management table.styled-table.perm-table th,
.page-user-management table.styled-table.perm-table td{
  white-space: nowrap;
  vertical-align: middle;
}

.page-user-management table.styled-table.perm-table select,
.page-user-management table.styled-table.perm-table input[type="text"],
.page-user-management table.styled-table.perm-table input[type="number"]{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-user-management table.styled-table.perm-table input[type="text"]{
  min-width: 0;
}

.page-user-management table.styled-table.perm-table input[type="number"]{
  text-align: center;
}

.page-user-management table.styled-table.perm-table td input[type="checkbox"]{
  transform: scale(1.05);
}

.page-user-management table.styled-table.perm-table th:first-child,
.page-user-management table.styled-table.perm-table td:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
}

.page-user-management table.styled-table.perm-table thead th:first-child{
  z-index: 5;
  background: var(--chip);
}

.page-user-management table.styled-table.perm-table tbody tr:nth-child(even) td:first-child{
  background: var(--surface-2);
}

.page-user-management table.styled-table.perm-table th:first-child,
.page-user-management table.styled-table.perm-table td:first-child{
  box-shadow: 1px 0 0 var(--border);
}

.page-user-management .table-wrap{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.page-user-management table.styled-table.perm-table{
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
}

.page-user-management table.styled-table.perm-table th:first-child,
.page-user-management table.styled-table.perm-table td:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
}

.page-user-management table.styled-table.perm-table thead th:first-child{
  z-index: 6;
  background: var(--chip);
}

.page-user-management table.styled-table.perm-table tbody tr:nth-child(even) td:first-child{
  background: var(--surface-2);
}

.page-user-management table.styled-table.perm-table th:first-child,
.page-user-management table.styled-table.perm-table td:first-child{
  box-shadow: 1px 0 0 var(--border);
}
/* ---------- Permissions table: sticky header ---------- */
.page-user-management .table-wrap{
  max-height: 72vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.page-user-management table.styled-table.perm-table thead th{
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--chip);
}

.page-user-management table.styled-table.perm-table thead th:first-child{
  left: 0;
  z-index: 7;
}

/* ---------- User cell compact display ---------- */
.perm-user-cell{
  min-width: 0;
  max-width: 320px;
}

.perm-user-main{
  font-weight: 900;
  color: var(--heading);
  line-height: 1.4;
  word-break: break-word;
}

.perm-user-email-wrap{
  margin-top: 4px;
}

.perm-user-email-wrap summary{
  list-style: none;
}

.perm-user-email-wrap summary::-webkit-details-marker{
  display: none;
}

.perm-user-email{
  display: block;
  max-width: 100%;
  color: var(--ink-muted);
  font-size: .92rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.perm-user-email:hover{
  color: var(--primary);
}

.perm-user-email-detail{
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.5;
  white-space: normal;
  word-break: break-all;
  box-shadow: var(--shadow-sm);
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 768px){
  .page-user-management .table-wrap{
    max-height: none;
  }

  .page-user-management table.styled-table.perm-table col.c-user{
    width: 220px;
  }

  .perm-user-cell{
    max-width: 220px;
  }

  .perm-user-main{
    font-size: .95rem;
  }

  .perm-user-email{
    font-size: .82rem;
  }

  .page-user-management table.styled-table.perm-table th,
  .page-user-management table.styled-table.perm-table td{
    padding: .5rem .55rem;
  }
}
.perm-user-sub{
  margin-top: 2px;
  font-size: .82rem;
  line-height: 1.35;
}

/* =========================================================
  24) Auth / Entry / Public CTA
========================================================= */

/* shared button style for login / request cards */
.sl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 44px;
  padding: .68rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--heading);
  font-weight: 900;
  font-size: .96rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease, box-shadow .15s ease;
  white-space: nowrap;
}

.sl-btn:hover{
  background: var(--chip-hov);
  border-color: var(--primary);
  color: var(--primary-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.sl-btn:active{
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.sl-btn--primary{
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.sl-btn--primary:hover{
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: #ffffff;
}

.sl-btn--secondary{
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  border-color: color-mix(in srgb, var(--primary) 42%, #ffffff);
  color: var(--primary-strong);
}

.sl-btn--secondary:hover{
  background: color-mix(in srgb, var(--primary) 18%, #ffffff);
  border-color: var(--primary);
  color: var(--primary-strong);
}

/* auth wrapper */
.auth-page{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 56px;
  display: grid;
  gap: 22px;
}

/* card surfaces */
.auth-main-card,
.entry-guide-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.auth-main-card{
  position: relative;
  overflow: hidden;
}

.auth-main-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.entry-guide-card{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 6%, var(--surface)) 0%,
      var(--surface) 100%
    );
}

/* headings / lead */
.auth-header{
  margin-bottom: 22px;
}

.auth-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 10px;
  padding: .28rem .68rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--primary-strong);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1;
}

.auth-title{
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 4vw, 2.35rem);
  font-weight: 900;
  line-height: 1.18;
  color: var(--heading);
}

.page-title.auth-title{
  margin-top: 0;
}

.auth-lead{
  margin: 0;
  max-width: 58ch;
  color: var(--ink-muted);
  line-height: 1.9;
  font-size: 1rem;
}

/* form */
.login-form{
  display: grid;
  gap: 18px;
}

.login-form .form-group{
  margin: 0;
}

.login-form label{
  display: inline-block;
  margin: 0 0 8px;
  font-size: .95rem;
  font-weight: 900;
  color: var(--heading);
}

.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"]{
  width: 100%;
  min-height: 52px;
  padding: .78rem .92rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--field-fg);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.login-form input[type="text"]:focus,
.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus{
  border-color: var(--primary);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent),
    inset 0 1px 2px rgba(15,23,42,.03);
  outline: none;
}

.auth-submit{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 4px;
}

.auth-submit .sl-btn{
  min-width: 140px;
}

/* error */
.form-error{
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, #dc2626 28%, #ffffff);
  border-radius: 14px;
  background: color-mix(in srgb, #dc2626 7%, #ffffff);
  color: #b91c1c;
  font-weight: 700;
  line-height: 1.7;
}

/* footer links */
.login-footer{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.login-footer p{
  margin: 0;
  color: var(--ink);
  line-height: 1.85;
}

.redirect-info{
  color: var(--ink-muted);
}

.forgot-password a,
.login-footer a{
  font-weight: 700;
}

/* entry guide */
.entry-guide-header{
  margin-bottom: 18px;
}

.entry-guide-title{
  margin: 0 0 10px;
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  font-weight: 900;
  line-height: 1.3;
  color: var(--heading);
}

.entry-guide-text{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.85;
}

.entry-choice-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.entry-choice-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.entry-choice-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

.entry-choice-card--highlight{
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  box-shadow: 0 12px 28px rgba(15,23,42,.09);
}

.entry-choice-title{
  margin: 0;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--heading);
}

.entry-choice-text{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.85;
  flex-grow: 1;
}

.entry-choice-card .sl-btn{
  align-self: flex-start;
}

.navbar.navbar--main{
  position: relative;
}

.navbar.navbar--main .nav-button{
  min-height: 40px;
}

@media (max-width: 820px){
  .auth-page{
    padding: 22px 12px 44px;
    gap: 16px;
  }

  .auth-main-card,
  .entry-guide-card{
    padding: 20px;
    border-radius: 18px;
  }

  .entry-choice-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .entry-choice-card{
    padding: 18px;
    border-radius: 16px;
  }

  .auth-submit .sl-btn,
  .entry-choice-card .sl-btn{
    width: 100%;
  }
}

@media (max-width: 560px){
  .auth-title{
    font-size: 1.8rem;
  }

  .auth-lead,
  .entry-guide-text,
  .entry-choice-text,
  .login-footer p{
    font-size: .95rem;
  }

  .login-form input[type="text"],
  .login-form input[type="email"],
  .login-form input[type="password"]{
    min-height: 48px;
    border-radius: 12px;
  }

  .auth-main-card,
  .entry-guide-card{
    padding: 16px;
    border-radius: 16px;
  }
    .password-toggle{
    height: 34px;
    min-width: 60px;
    padding: 0 10px;
    font-size: .84rem;
  }
}

.password-field{
  position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"]{
  padding-right: 88px;
}

.password-toggle{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 64px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary-strong);
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.password-toggle:hover{
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  border-color: var(--primary);
}

.password-toggle:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

/* =========================================================
  25) Start Page / Entry Tiles
========================================================= */
.start-page{
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 20px 64px;
  display: grid;
  gap: 22px;
}

.start-intro{
  max-width: 760px;
  padding: 4px 0 2px;
  text-align: left;
}

.start-kicker{
  margin: 0 0 8px;
  color: var(--primary);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .05em;
}

.start-title{
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--heading);
}

.start-lead{
  max-width: 52ch;
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.85;
  font-size: 1rem;
}

.start-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.start-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
  padding: 28px 28px 24px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
  background: var(--surface);
  box-shadow: 0 16px 34px rgba(15,23,42,.06);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.start-card::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 72%, #ffffff),
    color-mix(in srgb, var(--accent) 68%, #ffffff)
  );
}

.start-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 42px rgba(15,23,42,.09);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}

.start-card--highlight{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 4%, var(--surface)) 0%,
    var(--surface) 100%
  );
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.start-card-badge{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  padding: .4rem .82rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  color: var(--primary-strong);
  font-size: .8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
}

.start-card-title{
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--heading);
}

.start-card-text{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.9;
  font-size: .98rem;
}

.start-card-points{
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.start-card-points li{
  position: relative;
  margin: 0;
  padding-left: 1.45rem;
  color: var(--ink);
  line-height: 1.75;
  font-weight: 700;
}

.start-card-points li::before{
  content:"";
  position: absolute;
  left: 0;
  top: .56em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}

.start-card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.start-card-actions .sl-btn{
  min-width: 150px;
}

/* 入口ページ内ではボタンを少しだけ上質に見せる */
.start-page .sl-btn{
  min-height: 46px;
  padding: .76rem 1.18rem;
  border-radius: 999px;
  font-size: .95rem;
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}

.start-page .sl-btn--primary{
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 72%, var(--accent)) 100%
  );
  border-color: color-mix(in srgb, var(--primary) 62%, #000000);
}

.start-page .sl-btn--primary:hover{
  background: linear-gradient(
    135deg,
    var(--primary-strong) 0%,
    var(--primary) 100%
  );
  border-color: var(--primary-strong);
}

.start-page .sl-btn--secondary{
  background: color-mix(in srgb, var(--primary) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  color: var(--primary-strong);
}

.start-page .sl-btn--secondary:hover{
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
}

@media (max-width: 920px){
  .start-page{
    padding: 28px 14px 48px;
    gap: 18px;
  }

  .start-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .start-card{
    padding: 22px 22px 20px;
    border-radius: 20px;
  }

  .start-card::before{
    border-radius: 20px 20px 0 0;
  }
}

@media (max-width: 640px){
  .start-page{
    padding: 22px 10px 38px;
  }

  .start-kicker{
    font-size: .85rem;
  }

  .start-title{
    font-size: 1.8rem;
    line-height: 1.18;
  }

  .start-lead,
  .start-card-text,
  .start-card-points li{
    font-size: .94rem;
  }

  .start-card{
    padding: 18px 16px 18px;
    border-radius: 18px;
    gap: 14px;
  }

  .start-card::before{
    border-radius: 18px 18px 0 0;
  }

  .start-card-actions{
    flex-direction: column;
  }

  .start-card-actions .sl-btn{
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
  26) Request Menu (join organization)
========================================================= */
.page-request-menu{
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 0 52px;
}

.request-menu-head{
  margin-bottom: 22px;
}

.request-menu-title{
  margin: 0 0 10px;
}

.request-menu-lead{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.8;
  font-size: 1rem;
}

.org-tiles--request{
  margin-top: 0;
}

.org-tile--request{
  cursor: default;
}

.org-tile--request:hover{
  transform: translateY(-4px);
}

.request-tile-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.request-tile-actions .sl-btn{
  width: 100%;
  justify-content: center;
}

.request-empty-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 640px){
  .page-request-menu{
    padding: 20px 0 36px;
  }

  .request-menu-head{
    margin-bottom: 18px;
  }
}
/* =========================================================
  27) Request Member Form
========================================================= */
.page-request-member{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 0 56px;
}

.request-member-shell{
  display: grid;
  gap: 20px;
}

.request-member-org-card{
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 4%, var(--surface)) 0%,
    var(--surface) 100%
  );
  box-shadow: var(--shadow-md);
}

.request-member-org-logo{
  display: flex;
  align-items: center;
  justify-content: center;
}

.request-member-org-logo-img{
  width: 100%;
  max-width: 112px;
  max-height: 112px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  padding: 10px;
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}

.request-member-org-logo-placeholder{
  width: 96px;
  height: 96px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  color: var(--heading);
  font-size: 2rem;
  font-weight: 900;
}

.request-member-org-meta{
  min-width: 0;
}

.request-member-kicker{
  margin: 0 0 6px;
  color: var(--primary);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.request-member-title{
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--heading);
}

.request-member-org-text{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.85;
}

.request-member-form-card{
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.request-member-form-head{
  margin-bottom: 18px;
}

.request-member-form-title{
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--heading);
}

.request-member-form-lead{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.8;
}

.request-member-form{
  display: grid;
  gap: 18px;
}

.request-member-form .form-field{
  margin: 0;
}

.request-member-form label{
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 900;
  color: var(--heading);
}

.request-member-form input[type="text"],
.request-member-form input[type="email"],
.request-member-form input[type="password"],
.request-member-form input[type="number"],
.request-member-form input[type="tel"],
.request-member-form textarea,
.request-member-form select{
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
}

.request-member-form textarea{
  min-height: 140px;
  resize: vertical;
}

.required-mark{
  display: inline-block;
  margin-left: 6px;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, #dc2626 10%, #ffffff);
  color: #b91c1c;
  font-size: .78rem;
  font-weight: 900;
  vertical-align: middle;
}

.optional-mark{
  display: inline-block;
  margin-left: 6px;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: .78rem;
  font-weight: 800;
  vertical-align: middle;
}

.field-help{
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: .92rem;
  line-height: 1.7;
}

.field-error{
  margin-top: 8px;
  color: #b91c1c;
  font-size: .92rem;
  line-height: 1.7;
}

.form-error-list{
  margin: 0;
  padding-left: 1.2rem;
}

.request-member-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

.request-member-actions .sl-btn{
  min-width: 180px;
}

.request-member-profile-hero{
  grid-template-columns: minmax(180px, 240px) 1fr;
  align-items: start;
  padding: 28px;
}

.request-member-profile-hero .request-member-org-logo-img{
  max-width: 200px;
  max-height: 200px;
  aspect-ratio: 1 / 1;
}

.request-member-profile-hero .request-member-org-logo-placeholder{
  width: 150px;
  height: 150px;
}

.request-member-profile-catch{
  max-width: 680px;
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.8;
}

.request-member-profile-story{
  max-width: 760px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.request-member-profile-story h2{
  margin: 0 0 10px;
  color: var(--heading);
  font-size: 1.05rem;
  font-weight: 900;
}

.request-member-profile-story-body{
  color: var(--ink);
  line-height: 1.95;
}

.request-member-profile-story-body p{
  margin: 0 0 1em;
}

.request-member-profile-story-body p:last-child{
  margin-bottom: 0;
}

.request-member-profile-card{
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.request-member-profile-heading{
  margin-bottom: 18px;
}

.request-member-profile-heading h2{
  margin: 0;
  color: var(--heading);
  font-size: 1.35rem;
  font-weight: 900;
}

.request-member-profile-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0;
}

.request-member-profile-item{
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}

.request-member-profile-item--accent{
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

.request-member-profile-item dt{
  margin: 0 0 7px;
  color: var(--primary-strong);
  font-size: .82rem;
  font-weight: 900;
}

.request-member-profile-item dd{
  margin: 0;
  color: var(--ink);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.organization-keyword-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.organization-keyword-list span{
  display: inline-flex;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  color: var(--primary-strong);
  font-size: .85rem;
  font-weight: 800;
}

.request-member-profile-item--wide{
  grid-column: 1 / -1;
}

.organization-location-map{
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.organization-location-map iframe{
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
}

.organization-location-map--compact{
  width: min(100%, 380px);
  margin-top: 0;
}

.organization-location-map--compact iframe{
  height: 160px;
}

.request-member-profile-item--location{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 380px);
  align-items: center;
  gap: 18px;
}

.request-member-message-card{
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--primary) 5%, var(--surface)));
}

.request-member-message-body{
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.95;
}

.request-member-message-body p{
  margin: 0 0 1em;
}

.request-member-message-body p:last-child{
  margin-bottom: 0;
}

#request-form{
  scroll-margin-top: 24px;
}

@media (max-width: 760px){
  .page-request-member{
    padding: 20px 0 40px;
  }

  .request-member-org-card{
    grid-template-columns: 1fr;
    text-align: left;
    padding: 18px;
    border-radius: 20px;
  }

  .request-member-org-logo{
    justify-content: flex-start;
  }

  .request-member-org-logo-img{
    max-width: 88px;
    max-height: 88px;
  }

  .request-member-org-logo-placeholder{
    width: 82px;
    height: 82px;
    font-size: 1.7rem;
  }

  .request-member-form-card{
    padding: 18px;
    border-radius: 20px;
  }

  .request-member-actions{
    flex-direction: column;
  }

  .request-member-actions .sl-btn{
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
  28) Request Tenant Form
========================================================= */
.page-request-tenant{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 0 56px;
}

.request-tenant-shell{
  display: grid;
  gap: 20px;
}

.request-tenant-hero-card{
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 4%, var(--surface)) 0%,
    var(--surface) 100%
  );
  box-shadow: var(--shadow-md);
}

.request-tenant-hero-icon{
  width: 96px;
  height: 96px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  color: var(--heading);
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}

.request-tenant-hero-meta{
  min-width: 0;
}

.request-tenant-kicker{
  margin: 0 0 6px;
  color: var(--primary);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.request-tenant-title{
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--heading);
}

.request-tenant-hero-text{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.85;
}

.request-tenant-form-card{
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.request-tenant-form-head{
  margin-bottom: 18px;
}

.request-tenant-form-title{
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--heading);
}

.request-tenant-form-lead{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.8;
}

.request-tenant-form{
  display: grid;
  gap: 18px;
}

.request-tenant-form .form-field{
  margin: 0;
}

.request-tenant-form label{
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 900;
  color: var(--heading);
}

.request-tenant-form input[type="text"],
.request-tenant-form input[type="email"],
.request-tenant-form input[type="password"],
.request-tenant-form input[type="number"],
.request-tenant-form input[type="tel"],
.request-tenant-form textarea,
.request-tenant-form select{
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
}

.request-tenant-form textarea{
  min-height: 140px;
  resize: vertical;
}

.request-tenant-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

.request-tenant-actions .sl-btn{
  min-width: 180px;
}

@media (max-width: 760px){
  .page-request-tenant{
    padding: 20px 0 40px;
  }

  .request-tenant-hero-card{
    grid-template-columns: 1fr;
    text-align: left;
    padding: 18px;
    border-radius: 20px;
  }

  .request-tenant-hero-icon{
    width: 82px;
    height: 82px;
    font-size: 1.7rem;
  }

  .request-tenant-form-card{
    padding: 18px;
    border-radius: 20px;
  }

  .request-tenant-actions{
    flex-direction: column;
  }

  .request-tenant-actions .sl-btn{
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
  29) Request Sent
========================================================= */
.page-request-sent{
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 0 60px;
}

.request-sent-shell{
  display: grid;
}

.request-sent-card{
  text-align: center;
  padding: 34px 26px 30px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 28px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 4%, var(--surface)) 0%,
    var(--surface) 100%
  );
  box-shadow: var(--shadow-md);
}

.request-sent-icon{
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  color: var(--primary-strong);
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}

.request-sent-kicker{
  margin: 0 0 8px;
  color: var(--primary);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.request-sent-title{
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--heading);
}

.request-sent-text{
  max-width: 38ch;
  margin: 0 auto;
  color: var(--ink);
  line-height: 1.9;
  font-size: 1rem;
}

.request-sent-note{
  max-width: 42ch;
  margin: 18px auto 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: .93rem;
  line-height: 1.75;
}

.request-sent-actions{
  margin-top: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.request-sent-actions .sl-btn{
  min-width: 180px;
}

@media (max-width: 640px){
  .page-request-sent{
    padding: 24px 0 40px;
  }

  .request-sent-card{
    padding: 24px 16px 22px;
    border-radius: 22px;
  }

  .request-sent-icon{
    width: 72px;
    height: 72px;
    font-size: 1.7rem;
  }

  .request-sent-text,
  .request-sent-note{
    font-size: .94rem;
  }

  .request-sent-actions{
    flex-direction: column;
  }

  .request-sent-actions .sl-btn{
    width: 100%;
    min-width: 0;
  }
}

/* =========================================
   request_menu
========================================= */

.page-request-menu {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 56px;
}

.sl-page-head {
    margin-bottom: 28px;
}

.sl-page-head h1 {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    line-height: 1.3;
}

.sl-eyebrow {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0.72;
}

.sl-lead {
    margin: 0;
    max-width: 720px;
    line-height: 1.8;
    opacity: 0.9;
}

.org-request-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.org-request-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.org-request-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

.org-request-card__media {
    padding: 18px 18px 0;
}

.org-request-card__logo,
.org-request-card__placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    display: block;
    object-fit: cover;
    background: var(--chip);
    border: 1px solid var(--border);
}

.org-request-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--heading);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.org-request-card__body {
    flex: 1;
    padding: 18px 18px 12px;
    display: grid;
    gap: 14px;
}

.org-request-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.org-request-card__header h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.45;
}

.org-request-card__status {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.org-request-card__status.is-open {
    background: color-mix(in srgb, #16a34a 10%, #ffffff);
    color: #166534;
    border-color: color-mix(in srgb, #16a34a 22%, #ffffff);
}

.org-request-card__status.is-closed {
    background: var(--surface-2);
    color: var(--ink-muted);
    border-color: var(--border);
}

.org-request-card__desc {
    margin: 0;
    line-height: 1.8;
    color: var(--ink);
}

.org-request-card__desc.is-muted {
    color: var(--ink-muted);
}

.org-request-card__info {
    display: grid;
    gap: 10px;
}

.org-request-card__info-item {
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.org-request-card__info-label {
    display: inline-block;
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--primary-strong);
}

.org-request-card__info-item p {
    margin: 0;
    color: var(--ink);
    line-height: 1.75;
    font-size: 0.95rem;
}

.org-request-card__actions {
    padding: 0 18px 18px;
}

.org-request-card__actions .sl-btn,
.org-request-card__actions .sl-btn--disabled {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.sl-btn--disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.sl-sub-section {
    margin-top: 32px;
}

.sl-sub-card,
.sl-empty-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.sl-sub-card h2,
.sl-empty-card h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
}

.sl-sub-card p,
.sl-empty-card p {
    margin: 0;
    line-height: 1.8;
    color: var(--ink);
}

.sl-sub-card__actions {
    margin-top: 16px;
}

@media (max-width: 640px) {
    .page-request-menu {
        width: min(100% - 24px, 100%);
        padding: 24px 0 44px;
    }

    .org-request-grid {
        grid-template-columns: 1fr;
    }

    .org-request-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .org-request-card__body {
        gap: 12px;
    }
}

/* =========================================
   Public profile preview (org_public_profile_edit)
========================================= */

.org-request-preview-wrap {
  width: 100%;
  overflow: hidden;
}

.page-request-member .org-request-card--preview {
  width: min(100%, 720px);
  max-width: 100%;
  height: auto;
  margin: 0;
}

.page-request-member .org-request-card__media--preview {
  padding: 16px 16px 0;
}

.page-request-member .org-request-card__logo--preview,
.page-request-member .org-request-card__placeholder--preview {
  display: block;
  width: 100%;
  height: 220px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-sizing: border-box;
}

.page-request-member .org-request-card__logo--preview {
  object-fit: contain;
  padding: 12px;
}

.page-request-member .org-request-card__placeholder--preview {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heading);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.page-request-member .org-request-card--preview .org-request-card__body {
  padding: 16px;
}

.page-request-member .org-request-card--preview .org-request-card__actions {
  padding: 0 16px 16px;
}

@media (max-width: 640px) {
  .page-request-member .org-request-card__logo--preview,
  .page-request-member .org-request-card__placeholder--preview {
    height: 160px;
  }
}

/* =========================================
   Logo upload field (org_public_profile_edit)
========================================= */

.request-member-form input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

.request-member-form input[type="file"]:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.request-member-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip);
  color: var(--heading);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.request-member-form input[type="file"]::file-selector-button:hover {
  background: var(--chip-hov);
  border-color: var(--primary);
  color: var(--primary-strong);
}

.logo-current-preview {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.logo-current-preview__img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 6px;
}

.logo-current-preview__meta {
  min-width: 0;
}

.logo-current-preview__title {
  margin: 0 0 4px;
  font-weight: 900;
  color: var(--heading);
}

.logo-current-preview__note {
  margin: 0;
  color: var(--ink-muted);
  font-size: .9rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .logo-current-preview {
    flex-direction: column;
    align-items: flex-start;
  }
}

.practice-layout {
    display: block;
}

.practice-main {
    min-width: 0;
}

.practice-side-ad {
    position: sticky;
    top: 88px;
}

.practice-inline-ad {
    margin: 14px 0 4px;
}

.practice-ad-item {
    display: block;
    padding: 14px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 14px;
    background: #fffdf8;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.practice-ad-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.practice-ad-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.practice-ad-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

.pc-only {
    display: none;
}

.sp-only {
    display: block;
}

@media (min-width: 1100px) {
    .practice-layout--with-ad {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 24px;
        align-items: start;
    }

    .practice-layout--with-ad .practice-main {
        min-width: 0;
    }

    .practice-layout--with-ad .practice-side-ad {
        display: block;
    }

    .practice-layout--with-ad .pc-only {
        display: block;
    }

    .practice-layout--with-ad .sp-only {
        display: none;
    }
}

.practice-toolbar {
    display: flex;
    justify-content: flex-start;
}

.practice-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.practice-page-head .practice-page-title{margin:0}
.practice-page-head__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.practice-tabs-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
.practice-tabs{display:flex;gap:8px;flex-wrap:wrap}
.practice-tabs-row__add{margin-left:auto}
@media(max-width:640px){
  .practice-page-head{align-items:flex-start;flex-direction:column}
  .practice-page-head__actions{width:100%}
  .practice-tabs-row{align-items:flex-start;flex-direction:column}
  .practice-tabs-row__add{margin-left:0}
}

@media (min-width: 1100px) {
    .practice-layout--with-ad ~ .practice-toolbar {
        justify-content: flex-start;
    }
}

/* =========================================================
  30) Global Portal Ads (base.html)
========================================================= */

.portal-layout{
  display: block;
}

.portal-main{
  min-width: 0;
}

.portal-main-inner{
  min-width: 0;
}

.portal-main-inner > *:first-child{
  margin-top: 0 !important;
}

.portal-side-ad{
  display: none;
}

.portal-side-ad__inner{
  display: grid;
  gap: 14px;
}

.portal-footer-wrap{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.portal-footer-wrap--mobile{
  display: block;
}

.portal-footer-ads{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.container.portal-layout{
  max-width: 1180px;
}

@media (min-width: 1100px){
  .portal-layout--with-ad{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
  }

  .portal-layout--with-ad .portal-main{
    min-width: 0;
  }

  .portal-layout--with-ad .portal-side-ad{
    display: block;
    align-self: start;
  }

  .portal-layout--with-ad .portal-side-ad__inner{
    position: sticky;
    top: 88px;
  }
}

@media (min-width: 1100px){
  .portal-footer-ads__item.is-desktop-30{
    display: none;
  }

  .portal-footer-wrap--mobile:has(.portal-footer-ads__item.is-desktop-30):not(:has(.portal-footer-ads__item:not(.is-desktop-30))){
    display: none;
  }
}

/* =========================================================
  31) Portal Ads Card Normalize
========================================================= */

.portal-side-ads{
  display: grid;
  gap: 14px;
}

.portal-side-ads__item,
.portal-footer-ads__item{
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.portal-side-ads__item:hover,
.portal-footer-ads__item:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

.portal-ad-media{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 10px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 4%, var(--surface-2)) 0%,
      var(--surface-2) 100%
    );
  border: 1px solid var(--border);
}

.portal-side-ad .portal-ad-media{
  min-height: 120px;
  aspect-ratio: auto;
}

.portal-footer-ads .portal-ad-media{
  min-height: 110px;
  aspect-ratio: auto;
}

.portal-ad-image{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.portal-ad-content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portal-ad-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  word-break: break-word;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  margin: 0;
}

.portal-ad-title--side,
.portal-ad-title--footer{
  -webkit-line-clamp: 2;
  min-height: calc(1.5em * 2);
}

.portal-ad-body{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.7;
  word-break: break-word;
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin: 0;
}

.portal-ad-body--side{
  -webkit-line-clamp: 4;
  min-height: calc(1.7em * 4);
}

.portal-ad-body--footer{
  -webkit-line-clamp: 3;
  min-height: calc(1.7em * 3);
}

/* =========================================================
  Portal Ads - hide side ad on admin / table-heavy pages
========================================================= */

@media (min-width: 1100px){
  .page-user-management .portal-layout--with-ad{
    display: block;
  }

  .page-user-management .portal-side-ad{
    display: none !important;
  }

  .page-user-management .portal-main{
    min-width: 0;
    width: 100%;
  }
}


/* =========================================================
  Score List Toolbar
========================================================= */

.score-page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 12px 0 12px !important;
}

.score-search-form {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  max-width: 680px !important;
  min-width: 260px !important;
}

.score-search-input {
  flex: 1 !important;
  height: 42px !important;
  max-width: none !important;
  border-radius: 999px 0 0 999px !important;
  border: 1px solid var(--border) !important;
  border-right: 0 !important;
  padding: 0 18px !important;
  background: #fff !important;
}

.score-search-form .btn {
  height: 42px !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 0 18px !important;
  box-shadow: none !important;
}

.score-upload-btn {
  margin-left: auto !important;
  height: 42px !important;
  padding: 0 18px !important;
}

.score-sort-tabs {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 8px 0 16px !important;
}

.score-sort-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.72) !important;
  border-color: var(--border) !important;
  color: var(--heading) !important;
  border: 1px solid var(--border) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.score-sort-tab:hover {
  background: color-mix(in srgb, var(--accent) 14%, #ffffff) !important;
  border-color: var(--accent) !important;
}

.score-sort-tab.is-active {
  background: color-mix(in srgb, var(--accent) 22%, #ffffff) !important;
  border-color: var(--accent) !important;
  color: var(--heading) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
  transform: translateY(1px);
}

@media (max-width: 700px) {
  .score-page-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .score-search-form {
    width: 100% !important;
    max-width: none !important;
　  box-shadow: 0 2px 8px rgba(15,23,42,.06);
  　border-radius: 999px;
  　overflow: hidden;
  }

  .score-upload-btn {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* =========================================================
  Score List Mobile Optimization
========================================================= */

@media (max-width: 700px) {
  .sl-page-title {
    font-size: 1.55rem;
    margin-bottom: 14px;
  }

  .score-page-head {
    gap: 12px !important;
    margin: 10px 0 12px !important;
  }

  .score-search-form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 999px !important;
  }

  .score-search-input {
    min-width: 0 !important;
    height: 42px !important;
    font-size: .92rem !important;
  }

  .score-search-form .btn {
    width: auto !important;
    min-width: 68px !important;
    height: 42px !important;
    padding: 0 14px !important;
  }

  .score-upload-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 42px !important;
    margin-top: 2px !important;
  }

  .score-sort-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 10px 0 14px !important;
  }

  .score-sort-tab {
    width: 100% !important;
    padding: 9px 6px !important;
    font-size: .9rem !important;
    text-align: center !important;
  }

  .score-card {
    border-radius: 16px;
    padding: 14px 13px;
  }

  .score-card__title strong {
    line-height: 1.55;
  }

  .parts-grid {
    grid-template-columns: 1fr !important;
  }

  .part-chip {
    justify-content: center;
    min-height: 42px;
  }
}

.score-title-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score-title-text {
  line-height: 1.5;
}

.score-admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.score-status-btn {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255,255,255,.75);
}

.score-status-btn.is-visible {
  color: #247a45;
  background: #e8f6ee;
}

.score-status-btn.is-hidden {
  color: #a33a3a;
  background: #f8e8e8;
}

/* =========================================================
  32) Main Navigation Refresh
  - PC: main buttons + その他
  - SP: hamburger menu
========================================================= */

.navbar.navbar--main{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .85rem 1rem;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  z-index: 30;
}

.nav-desktop{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.nav-mobile{
  display: none;
}

.nav-button--guide{
  background: color-mix(in srgb, var(--accent) 18%, #ffffff);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  color: var(--heading);
  font-weight: 900;
}

.nav-button--guide:hover{
  background: color-mix(in srgb, var(--accent) 26%, #ffffff);
  border-color: var(--accent);
  color: var(--heading);
}

/* PC その他メニュー */
.nav-more{
  position: relative;
}

.nav-more summary{
  list-style: none;
  cursor: pointer;
}

.nav-more summary::-webkit-details-marker{
  display: none;
}

.nav-more summary::after{
  content: " ▼";
  font-size: .72em;
  opacity: .72;
}

.nav-more[open] summary::after{
  content: " ▲";
}

.nav-more-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 4px;
  z-index: 100;
}

.nav-menu-item{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: .62rem .82rem;
  border-radius: 12px;
  color: var(--heading);
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}

.nav-menu-item:hover{
  background: var(--chip);
  color: var(--primary-strong);
}

.nav-menu-item--guide{
  background: color-mix(in srgb, var(--accent) 14%, #ffffff);
  color: var(--heading);
}

.nav-menu-item--guide:hover{
  background: color-mix(in srgb, var(--accent) 22%, #ffffff);
  color: var(--heading);
}

.nav-menu-item--accent{
  background: color-mix(in srgb, var(--primary) 14%, #ffffff);
  color: var(--primary-strong);
}

.nav-menu-item--accent:hover{
  background: color-mix(in srgb, var(--primary) 22%, #ffffff);
  color: var(--primary-strong);
}

.nav-menu-form{
  margin: 0;
}

.nav-menu-button{
  appearance: none;
}

/* Navigation visibility; mobile drawer layout is defined once below. */
.nav-mobile { display: none !important; }
@media (max-width: 820px) {
  .nav-desktop { display: none !important; }
  .nav-mobile { display: block !important; }
}
/* =========================================================
  33) Organization Settings Hub
========================================================= */
.events-page-title{
  margin:0;
  font-size:1.6rem;
  line-height:1.2;
}
.events-page-heading{
  display:flex;
  gap:.6rem;
  align-items:flex-end;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.event-create-button{min-height:0!important;padding:.44rem .65rem!important;border-color:var(--border)!important;background:transparent!important;font-size:.88rem!important;line-height:1!important;box-shadow:none!important}
.events-venue-footer{display:flex;justify-content:flex-end;margin-top:1rem}
.events-venue-footer .nav-button,.event-card-utility-button{min-height:34px!important;padding:.34rem .65rem!important;border-color:var(--border)!important;background:transparent!important;font-size:.88rem!important;box-shadow:none!important}
.events-page-org{
  margin:0;
  color:var(--ink-muted);
  font-size:1rem;
  font-weight:800;
  line-height:1.45;
  overflow-wrap:anywhere;
}
@media (max-width:820px){
  .page-events .events-page-heading{
    align-items:flex-end;
    gap:.5rem;
  }
  .page-events .events-page-title{
    margin:0;
    font-size:1.55rem;
    line-height:1.3;
  }
  .page-events .events-page-heading{flex-wrap:nowrap;}
  .page-events .events-page-heading .events-page-title{font-size:1.32rem;}
  .page-events .events-page-heading .event-create-button{min-height:0!important;padding:.35rem .6rem!important;font-size:.9rem!important;white-space:nowrap;}
  .page-events .event-card{padding:12px!important;}
  .page-events .event-card-summary{width:100%;}
  .page-events .event-card-title{font-size:1.28rem;margin:0!important;}
  .page-events .event-card-meta{font-size:.86rem;line-height:1.45;margin:.2rem 0!important;}
  .page-events .event-card-description{margin:.3rem 0;font-size:.9rem;}
  .page-events .event-card-description > div{white-space:pre-wrap;margin-top:.35rem;}
  .page-events .event-card-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:.42rem!important;}
  .page-events .event-card-actions .nav-button{width:100%;padding:.52rem .35rem;font-size:.9rem;}
  .page-events .event-card-actions form{display:block!important;min-width:0;}
  .page-events .event-card-actions form .nav-button{width:100%;}
  .page-events .event-slot-summary{min-width:0!important;}
  .page-events .events-page-org{
    font-size:.9rem;
  }
  .page-events > .actions{
    margin:.6rem 0 .8rem!important;
  }
}

/* イベント候補日：複数日カレンダー */
.event-form-heading h1{margin-bottom:.15rem}.event-form-heading p{margin:0 0 .8rem;color:var(--ink-muted)}.page-event-candidates .event-form-heading .candidate-event-title{margin:0;font-size:1.6rem;line-height:1.35;overflow-wrap:anywhere}.page-event-candidates .event-form-heading .candidate-event-title::after{content:"";display:block;width:78px;margin-top:.45rem;border-bottom:3px solid var(--accent)}.candidate-page-title{margin:.65rem 0 .8rem;font-size:1.18rem}.candidate-page-title::after{content:none!important}.candidate-page-title span{color:var(--ink-muted);font-size:.92rem;font-weight:400}
.event-create-candidates{display:grid;gap:.75rem}
.event-candidate-form{display:grid;gap:.75rem}.candidate-calendar-card,.candidate-details-card{padding:14px!important}
.candidate-calendar-head{display:flex;justify-content:center;gap:.7rem;align-items:center}.candidate-details-card h2{margin:0;font-size:1.15rem}.candidate-details-card>p{margin:0;color:var(--ink-muted);font-size:.9rem}
.candidate-week-start-label,.candidate-month-picker{display:flex;align-items:center;gap:.3rem;font-size:.8rem;white-space:nowrap}.candidate-week-start-label select,.candidate-month-picker input{box-sizing:border-box;height:38px;margin:0;max-width:135px}.candidate-month-picker{gap:.25rem}.candidate-month-picker input{width:135px}
.candidate-month-controls{display:flex;gap:.55rem;align-items:center;justify-content:flex-end}.candidate-month-controls button{height:38px;min-width:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:1.4rem;line-height:1;cursor:pointer}
.candidate-calendar-weekdays,.candidate-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.candidate-calendar-weekdays{margin-top:.8rem;text-align:center;font-size:.78rem;color:var(--ink-muted)}
.candidate-calendar-day{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-weight:700}.candidate-calendar-day input{position:absolute;opacity:0;pointer-events:none}.candidate-calendar-day.is-selected{background:var(--primary);color:#fff;border-color:var(--primary)}
.candidate-calendar-footer{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:.7rem}.candidate-selection-summary{margin:0;font-weight:700}.candidate-details{margin-top:.75rem;overflow-x:auto}.candidate-details-empty{margin:0;color:var(--ink-muted)}.candidate-details-table,.event-candidate-table{width:100%;border-collapse:collapse;table-layout:fixed}.candidate-details-table th,.candidate-details-table td,.event-candidate-table th,.event-candidate-table td{padding:.55rem .45rem;border:1px solid var(--border);text-align:left;vertical-align:middle}.candidate-details-table thead th,.event-candidate-table thead th{background:rgba(255,255,255,.34);font-weight:700}.candidate-details-table th:first-child,.event-candidate-table th:first-child{width:21%;white-space:nowrap}.candidate-details-table th:nth-child(2),.event-candidate-table th:nth-child(2){width:33%}.candidate-details-table textarea,.event-candidate-table textarea{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:42px;margin:0;resize:vertical}.candidate-time-options,.event-candidate-time-options{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.candidate-time-options label,.event-candidate-time-options label{display:flex;align-items:center;gap:.15rem;margin:0;white-space:nowrap}.candidate-time-options input[type="time"],.event-candidate-time-options input[type="time"]{width:98px;min-width:0;margin:0}.event-candidate-table-wrap{overflow-x:auto}.event-candidate-date{display:block}.event-candidate-select{display:flex;align-items:center;gap:.12rem;margin:.28rem 0 0;font-size:.78rem;font-weight:400}.event-candidate-select input{width:16px;height:16px}.event-candidate-save-actions{margin-top:.65rem;text-align:right}.event-form-actions{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}
@media(min-width:481px){.event-candidate-table th:first-child{width:20%}.event-candidate-table th:nth-child(2){width:36%}.event-candidate-table tbody th,.event-candidate-table tbody td:nth-child(2){background:var(--chip)}.event-candidate-time-options{flex-wrap:nowrap;gap:.28rem}.event-candidate-time-options input[type="time"]{width:86px}.event-candidate-table th,.event-candidate-table td{padding:.5rem .42rem}}
@media(max-width:480px){.candidate-calendar-card,.candidate-details-card{padding:12px!important}.page-event-candidates .event-form-heading .candidate-event-title{font-size:1.45rem}.candidate-page-title{margin-top:.55rem;font-size:1.1rem}.candidate-page-title span{font-size:.82rem}.candidate-calendar-head{justify-content:center}.candidate-month-controls{justify-content:center;gap:.45rem}.candidate-month-picker input{width:116px}.candidate-week-start-label select{max-width:86px}.candidate-calendar-footer{display:block}.candidate-week-start-label{margin-top:.45rem}.candidate-details-table th,.candidate-details-table td{padding:.45rem .3rem;font-size:.86rem}.candidate-details-table th:first-child{width:30%}.candidate-details-table th:nth-child(2){width:44%}.candidate-time-options{gap:.25rem}.candidate-time-options input[type="time"]{width:112px;min-width:112px}.event-candidate-table{table-layout:auto}.event-candidate-table thead{display:none}.event-candidate-table tbody{display:grid;gap:.65rem}.event-candidate-table tr{display:grid;grid-template-columns:1fr;gap:.45rem;padding:.7rem;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.24)}.event-candidate-table th,.event-candidate-table td{display:block;width:auto!important;border:0;padding:0;font-size:.92rem}.event-candidate-table th{font-size:1rem}.event-candidate-date,.event-candidate-select{display:inline-flex;align-items:center}.event-candidate-select{margin:0 0 0 .55rem}.event-candidate-table td.event-candidate-time-options{display:flex;gap:.42rem}.event-candidate-time-options label{flex:0 0 auto}.event-candidate-time-options input[type="time"]{flex-basis:100%;width:94px}.event-candidate-table textarea{min-height:40px}.event-candidate-save-actions{text-align:stretch}.event-candidate-save-actions .nav-button{width:100%;min-height:44px}.event-form-actions .nav-button{flex:1;text-align:center;padding:.58rem .35rem}.candidate-calendar-day{border-radius:6px;font-size:.88rem}}

/* 選択直後の候補詳細は、スマホでは表ではなく日付ごとの入力カードにする。 */
@media(max-width:480px){
  .candidate-details{overflow:visible}
  .candidate-details-table{display:block;table-layout:auto}
  .candidate-details-table thead{display:none}
  .candidate-details-table tbody{display:grid;gap:.65rem}
  .candidate-details-table tr{display:grid;grid-template-columns:1fr;gap:.5rem;padding:.7rem;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.24)}
  .candidate-details-table th,.candidate-details-table td{display:block;width:auto!important;border:0!important;padding:0!important;font-size:.92rem}
  .candidate-details-table th{font-size:1rem}
  .candidate-details-table td.candidate-time-options{display:flex;gap:.42rem}
  .candidate-details-table textarea{min-height:40px}
}

/* 候補入力後の一覧は、白い隙間を作らず、行ごとの薄い区切りだけを残す。 */
.event-candidate-table{border-collapse:collapse!important;border-spacing:0;background:var(--surface)}
.event-candidate-table tbody th,.event-candidate-table tbody td{background:var(--surface)!important;border:0;border-bottom:1px solid var(--border)}
.event-candidate-table tbody tr:last-child th,.event-candidate-table tbody tr:last-child td{border-bottom:0}

/* 保存後の候補日入力は table を使わず、安定した3列グリッドで表示する。 */
.event-candidate-grid{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.event-candidate-grid__head,.event-candidate-grid__row{display:grid;grid-template-columns:25% 36% minmax(0,1fr)}
.event-candidate-grid__head{background:rgba(255,255,255,.34);font-weight:700}
.event-candidate-grid__head>div{padding:.55rem .45rem}
.event-candidate-grid__row{border-top:1px solid var(--border)}
.event-candidate-grid__row>div{min-width:0;padding:.5rem .42rem}
.event-candidate-grid__date .event-candidate-date{white-space:nowrap}
.event-candidate-grid__note textarea{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:42px;margin:0;resize:vertical}
.event-candidate-grid__time{display:flex;align-items:center;gap:.28rem;flex-wrap:nowrap}
.event-candidate-grid__time label{display:flex;align-items:center;gap:.15rem;margin:0;white-space:nowrap}
.event-candidate-grid__time input[type="time"]{width:110px;min-width:110px;margin:0}
@media(max-width:480px){
  .event-candidate-grid{border:0;border-radius:0;background:transparent;display:grid;gap:.65rem}
  .event-candidate-grid__head{display:none}
  .event-candidate-grid__row{display:grid;grid-template-columns:1fr;gap:.45rem;padding:.7rem;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.24)}
  .event-candidate-grid__row>div{padding:0;background:transparent}
  .event-candidate-grid__date{font-size:1rem}
  .event-candidate-grid__time{gap:.42rem;flex-wrap:wrap}
  .event-candidate-grid__time input[type="time"]{flex-basis:100%;width:94px}
  .event-candidate-grid__note textarea{min-height:40px}
}

/* イベント投票中 */
.event-card-title{overflow-wrap:anywhere}.event-card-footer{display:flex;justify-content:flex-end;margin-top:.7rem;padding-top:.55rem;border-top:1px solid rgba(0,0,0,.10)}.event-card-delete-form{margin:0}.event-card-delete-button{margin:0!important;min-height:32px;padding:.25rem .55rem;font-size:.84rem;white-space:nowrap}.event-card-details{margin:.2rem 0 0}.event-card-details summary{cursor:pointer;font-size:.92rem;font-weight:700}.event-card-details__body{margin-top:.45rem}.event-card-description{white-space:pre-wrap;overflow-wrap:anywhere}.event-card-status{margin:.3rem 0;opacity:.85;font-size:.95rem}.event-final-summary{display:grid;gap:.25rem;margin:.5rem 0 0;padding:.6rem .75rem;border:1px solid rgba(0,0,0,.10);border-radius:12px;background:rgba(255,255,255,.38);font-size:.92rem}.event-card-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:flex-start;margin-top:.65rem}.event-finalize-wrap{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(0,0,0,.10)}.event-finalize-form{display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:end;gap:.7rem;width:100%;padding:.75rem .85rem;border:1px solid rgba(0,0,0,.10);border-radius:12px;background:var(--chip)}.event-finalize-copy{display:grid;gap:.12rem;white-space:nowrap}.event-finalize-copy strong{font-size:1rem}.event-finalize-copy span{color:var(--ink-muted);font-size:.82rem}.event-finalize-select{box-sizing:border-box;min-width:0;width:100%;height:40px;padding:0 .65rem;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit}.event-finalize-submit{min-height:40px!important;padding:.45rem .8rem!important;white-space:nowrap}.event-voting-list{display:grid;gap:.7rem}.event-vote-card{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.75rem .9rem;border:1px dashed rgba(0,0,0,.12);border-radius:12px;background:rgba(255,255,255,.25)}.event-vote-card__content{min-width:0;flex:1}.event-vote-card__title{display:block;overflow-wrap:anywhere}.event-vote-card__note{margin:.28rem 0 0;color:var(--ink-muted);font-size:.92rem}.event-vote-card__note-details{margin:0}.event-vote-card__note-details summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center;cursor:pointer;list-style:none;color:var(--ink-muted)}.event-vote-card__note-details summary::-webkit-details-marker{display:none}.event-vote-card__note-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-vote-card__note-toggle::before{content:"… 続きを表示";color:var(--ink);font-size:.84rem;font-weight:700;white-space:nowrap}.event-vote-card__note-details[open] summary{display:flex;justify-content:flex-start}.event-vote-card__note-details[open] .event-vote-card__note-preview{display:none}.event-vote-card__note-details[open] .event-vote-card__note-toggle::before{content:"備考を閉じる"}.event-vote-card__note-details>div{margin:.34rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.event-vote-card__score,.event-vote-card__venues{margin:.32rem 0 0;opacity:.88;font-size:.92rem}.event-vote-card__score span{margin-left:.45rem;white-space:nowrap}.event-final-venue-action{margin-top:.55rem}.event-final-venue-action .nav-button{min-height:36px;padding:.35rem .65rem;font-size:.88rem}.event-vote-card__choices{display:flex;align-items:center;gap:.7rem;flex:none;padding-top:.05rem}.event-vote-card__choices label{display:flex;align-items:center;gap:.2rem;margin:0;font-size:1.08rem;white-space:nowrap}.event-vote-card__choices input{margin:0}.event-vote-card__state{opacity:.7;font-size:.9rem;white-space:nowrap}.event-voting-save{display:flex;justify-content:flex-end;margin:.85rem 0 0}
.event-start-voting-form{margin:.35rem 0 .5rem}.event-start-voting-form .nav-button{margin:0}
@media(max-width:820px){.event-card-details{margin-top:.35rem}.event-card-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.42rem}.event-card-actions .nav-button,.event-card-actions form .nav-button{width:100%;padding:.52rem .35rem;font-size:.9rem}.event-card-actions form{display:block;min-width:0}}@media(max-width:480px){.event-card-footer{margin-top:.55rem;padding-top:.45rem}.event-card-delete-button{min-height:30px;padding:.22rem .5rem;font-size:.8rem}.event-finalize-form{grid-template-columns:1fr;gap:.5rem;padding:.75rem}.event-finalize-copy{white-space:normal}.event-finalize-select,.event-finalize-submit{width:100%;min-width:0;box-sizing:border-box}.event-vote-card{display:grid;grid-template-columns:1fr;gap:.55rem;padding:.7rem}.event-vote-card__title{font-size:1rem}.event-vote-card__note{font-size:.88rem}.event-vote-card__score{display:flex;gap:.35rem;flex-wrap:wrap}.event-vote-card__score span{margin-left:0}.event-vote-card__choices{justify-content:flex-start;gap:1rem;padding:0}.event-vote-card__choices label{min-width:42px;min-height:38px;justify-content:center;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.35)}.event-vote-card__state{white-space:normal}.event-voting-save .nav-button{width:100%;min-height:44px}}
.event-final-venue-display{display:grid;gap:.2rem;margin-top:.55rem;font-size:.92rem}.event-final-venue-display a{font-weight:700}
@media(max-width:480px){.event-vote-card__venues,.event-final-venue-display{padding:.55rem .6rem;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.38)}.event-final-venue-action{padding-top:.1rem}.event-vote-card__state{padding-top:.15rem;border-top:1px solid var(--border)}}
.organization-settings-page{
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 0 48px;
}

.organization-settings-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.organization-settings-head h1{
  margin: 0 0 8px;
  color: var(--heading);
  font-size: clamp(1.9rem, 3.5vw, 2.55rem);
}

.organization-settings-eyebrow{
  margin: 0 0 6px;
  color: var(--primary);
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.organization-settings-lead{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.8;
}

.organization-settings-summary{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.organization-settings-summary__item{
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.organization-settings-summary__item span{
  display: block;
  margin-bottom: 6px;
  color: var(--ink-muted);
  font-size: .88rem;
  font-weight: 700;
}

.organization-settings-summary__item strong{
  display: block;
  color: var(--heading);
  font-size: 1.15rem;
  line-height: 1.45;
}

.organization-settings-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.organization-settings-card{
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  min-height: 180px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.organization-settings-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

.organization-settings-card--accent{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 7%, var(--surface)) 0%,
    var(--surface) 100%
  );
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.organization-settings-card__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--chip);
  color: var(--primary-strong);
  font-size: .82rem;
  font-weight: 900;
}

.organization-settings-card h2{
  margin: 2px 0 8px;
  font-size: 1.18rem;
  color: var(--heading);
}

.organization-settings-card h2::after{
  content: none !important;
}

.organization-settings-card p{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.75;
  font-size: .94rem;
}

.organization-settings-card__arrow{
  align-self: center;
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 900;
}

.organization-settings-note{
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}

.organization-settings-note h2{
  margin: 0 0 6px;
  font-size: 1rem;
}

.organization-settings-note h2::after{
  content: none !important;
}

.organization-settings-note p{
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.75;
}

@media (max-width: 820px){
  .organization-settings-head{
    flex-direction: column;
  }

  .request-member-profile-hero{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .request-member-profile-hero .request-member-org-logo-img{
    width: 88px;
    height: 88px;
  }

  .request-member-profile-hero .request-member-org-logo-placeholder{
    width: 82px;
    height: 82px;
  }

  .request-member-profile-card{
    padding: 18px;
    border-radius: 20px;
  }

  .request-member-profile-grid{
    grid-template-columns: 1fr;
  }

  .organization-settings-summary,
  .organization-settings-grid{
    grid-template-columns: 1fr;
  }

  .organization-settings-card{
    min-height: 0;
  }
}

@media (max-width: 560px){
  .organization-settings-page{
    padding-top: 12px;
  }

  .organization-settings-card{
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px;
    border-radius: 17px;
  }

  .organization-settings-card__icon{
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .organization-settings-card__arrow{
    display: none;
  }
}

/* Public organization discovery: compact horizontal cards. */
.page-request-menu .org-request-grid{
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-request-menu .org-request-card{
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 170px;
  min-height: 150px;
}

.page-request-menu .org-request-card__media{
  width: auto;
  padding: 14px;
  display: flex;
  align-items: center;
  background: var(--surface-2);
}

.page-request-menu .org-request-card__logo,
.page-request-menu .org-request-card__placeholder{
  width: 100%;
  height: 120px;
  aspect-ratio: auto;
  object-fit: contain;
}

.page-request-menu .org-request-card__body{
  padding: 18px;
  align-content: center;
}

.page-request-menu .org-request-card__desc{
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.page-request-menu .org-request-card__info-item{
  padding: 8px 10px;
}

.page-request-menu .org-request-card__actions{
  width: auto;
  padding: 18px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--border);
}

/* Public organization detail and its separate join action. */
.page-organization-detail{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 0 56px;
  display: grid;
  gap: 20px;
}

.organization-detail-hero{
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--primary) 4%, var(--surface)));
  box-shadow: var(--shadow-md);
}

.organization-detail-logo img,
.organization-detail-logo span{
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.85);
  box-sizing: border-box;
}

.organization-detail-logo img{
  padding: 12px;
}

.organization-detail-logo span{
  color: var(--heading);
  font-size: 2.4rem;
  font-weight: 900;
}

.organization-detail-hero__body h1{
  margin: 0;
  color: var(--heading);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
}

.organization-detail-catch{
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.8;
}

.organization-detail-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.organization-public-url-copy__status{
  align-self: center;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
}

.organization-detail-story{
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.organization-detail-story h2{
  margin: 0 0 12px;
  color: var(--heading);
  font-size: 1.2rem;
}

.organization-detail-story div{
  color: var(--ink);
  line-height: 1.95;
}

.organization-detail-story p{
  margin: 0 0 1em;
}

.organization-detail-story p:last-child{
  margin-bottom: 0;
}

.organization-detail-notebook{
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.organization-detail-index{
  padding: 20px 24px 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}

.organization-detail-index__heading{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.organization-detail-index__heading p{
  margin: 0;
}

.organization-detail-index__heading > p:last-child{
  color: var(--ink-muted);
  font-size: .88rem;
  font-weight: 700;
}

.organization-detail-index__links{
  display: flex;
  align-items: flex-end;
  gap: 5px;
  overflow-x: auto;
  padding: 8px 2px 0;
  border-bottom: 5px solid var(--primary);
  counter-reset: organization-index;
}

.organization-detail-index__links a{
  --index-tab-color: var(--primary);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 0 185px;
  min-height: 45px;
  padding: 10px 18px 9px;
  border: 1px solid color-mix(in srgb, var(--index-tab-color) 72%, #000);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--index-tab-color);
  color: #fff;
  text-decoration: none;
  counter-increment: organization-index;
  box-shadow: inset 0 1px rgba(255,255,255,.25);
  transition: filter .18s ease, min-height .18s ease;
}

.organization-detail-index__links a:nth-child(2){
  --index-tab-color: #bd7f24;
}

.organization-detail-index__links a:nth-child(3){
  --index-tab-color: #637f92;
}

.organization-detail-index__number::before{
  content: counter(organization-index, decimal-leading-zero);
}

.organization-detail-index__number{
  color: rgba(255,255,255,.75);
  font-size: .82rem;
  font-weight: 900;
}

.organization-detail-index__links strong{
  display: block;
}

.organization-detail-index__links strong{
  font-size: .98rem;
  font-weight: 900;
}

.organization-detail-index__links a:hover,
.organization-detail-index__links a:focus-visible{
  filter: brightness(1.12);
  min-height: 50px;
}

.organization-detail-section{
  scroll-margin-top: 24px;
}

.organization-detail-notebook > .organization-detail-section{
  margin: 0;
  padding: 28px 24px;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border);
  box-shadow: none;
}

.organization-detail-notebook > .organization-detail-index + .organization-detail-section{
  border-top: 0;
}

.organization-detail-notebook > .organization-detail-section:nth-of-type(even){
  background: color-mix(in srgb, var(--surface-2) 42%, var(--surface));
}

.organization-detail-section__heading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.organization-detail-index-back{
  flex: 0 0 auto;
  color: var(--primary);
  font-size: .78rem;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.keyword-tag-editor__source input:not([hidden]){
  width: 100%;
}

.keyword-tag-editor__controls{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.keyword-tag-editor__input{
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.keyword-tag-editor__add{
  min-width: 92px;
}

.keyword-tag-editor__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.keyword-tag-editor__list:empty{
  display: none;
}

.keyword-tag-editor__tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 7px 5px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  color: var(--heading);
  font-size: .88rem;
  font-weight: 800;
}

.keyword-tag-editor__remove{
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  color: var(--heading);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.organization-detail-people{
  padding: 0;
}

.organization-detail-notebook > .organization-detail-people{
  padding: 28px 24px;
}

.organization-detail-notebook > .organization-detail-concerts{
  padding: 28px 24px;
}

.organization-detail-people__kicker{
  margin-bottom: 10px;
}

.organization-detail-concerts{
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.organization-detail-concerts__undecided{
  margin: 8px 0 0;
  font-size: 1.05rem;
}

.organization-detail-closed{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-weight: 800;
}

.organization-detail-concerts__grid,
.concert-forms{
  display: grid;
  gap: 16px;
}

.organization-detail-concert-card{
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.organization-detail-concert-card:not(:has(.organization-detail-concert-card__image)){
  grid-template-columns: 1fr;
}

.organization-detail-concert-card__image{
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 12px;
  background: #f6f3ed;
}

.organization-detail-concert-card__body h2{
  margin: 0 0 10px;
}

.organization-detail-concert-card__body h3{
  margin: 14px 0 4px;
  font-size: 1rem;
}

.organization-detail-concert-card__body > h2{
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.organization-detail-concert-info,
.organization-detail-concert-info--schedule{
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
}

.organization-detail-concert-info p{
  margin: 0;
}

.organization-detail-concert-info h3{
  margin: 0 0 6px;
}

.organization-detail-concert-info p + p{
  margin-top: 5px;
}

.organization-detail-concert-info-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.organization-detail-concert-info--schedule{
  margin-bottom: 10px;
}

.organization-detail-concert-info--location{
  margin-top: 10px;
}

.organization-detail-concert-info--location.has-map{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 380px);
  align-items: center;
  gap: 16px;
}

.organization-detail-concert-info--description{
  margin-top: 10px;
}

.organization-detail-concert-card__date{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  font-weight: 800;
}

.organization-detail-concert-card__muted{
  color: var(--ink-muted);
}

.concert-edit-group{
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #e5dccd;
  border-radius: 18px;
}

.concert-form-card{
  padding: 16px;
  border: 1px solid #e5dccd;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}

.concert-form-row{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

.concert-form-row--settings{
  grid-template-columns: 1fr 2fr;
}

.organization-detail-people__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  gap: 14px;
}

.organization-detail-person-card{
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  align-self: start;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface));
}

.organization-detail-person-card__photo{
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 300px;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  margin: 0;
}

.organization-detail-person-card:not(:has(.organization-detail-person-card__photo)){
  grid-template-columns: 1fr;
}

.organization-detail-person-card__title{
  color: #667085;
  font-weight: 700;
  margin: 4px 0 14px;
}

.organization-detail-person-card__comment{
  padding: 14px 16px;
  margin: 16px 0;
  border-left: 3px solid #d9b86c;
  background: #f7f2e8;
  font-weight: 700;
}

.profile-edit-group{
  border: 1px solid #e5dccd;
  border-radius: 18px;
  padding: 22px;
  margin: 28px 0;
}

.instructor-editor-head,
.instructor-form-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.instructor-editor-head{
  margin-bottom: 20px;
}

.instructor-editor-head h2,
.instructor-form-card__head h3{
  margin: 0;
}

.instructor-forms{
  display: grid;
  gap: 18px;
}

.instructor-form-card{
  padding: 20px;
  border: 1px solid #e5dccd;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}

.instructor-remove-new{
  border: 0;
  background: transparent;
  color: #8b2d2d;
  cursor: pointer;
  font-weight: 700;
}

.instructor-delete{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8b2d2d;
  font-weight: 700;
}

.instructor-current-photo{
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.instructor-current-photo img{
  width: auto;
  max-width: 150px;
  max-height: 180px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.instructor-photo-editor{
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #d9dce2;
}

.instructor-photo-editor__input{
  border-bottom: 0 !important;
}

.profile-photo-input{
  display: grid;
  gap: 12px;
}

.profile-photo-input__native{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.profile-photo-input__chooser{
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
  cursor: pointer;
}

.profile-photo-input__native:focus-visible + .profile-photo-input__chooser{
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 2px;
}

.profile-photo-input__choose-label{
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
}

.profile-photo-input__filename{
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-photo-input__clear{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: #8b2d2d;
  font-size: .9rem;
  cursor: pointer;
}

.organization-detail-preview{
  display: grid;
  gap: 24px;
}

.public-profile-header{
  grid-template-columns: 88px 1fr;
  padding: 16px 18px;
}

.public-profile-header .request-member-org-logo-img,
.public-profile-header .request-member-org-logo-placeholder{
  max-width: 80px;
  width: 80px;
  height: 80px;
}

@media (max-width: 760px){
  .public-profile-header{
    grid-template-columns: 1fr;
  }

  .public-profile-header .request-member-org-logo{
    justify-content: flex-start;
  }
}

.public-profile-editor-card{
  padding: 20px;
}

.public-profile-edit-form{
  gap: 8px;
}

.public-profile-edit-form > .form-field{
  padding: 14px 16px;
  border: 1px solid #e5dccd;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 95%, var(--primary) 5%);
}

.public-profile-edit-form .form-field label{
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}

.public-profile-edit-form .form-field.inline label{
  display: inline;
  margin-bottom: 0;
}

.public-profile-edit-form .field-help{
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #526071;
  font-size: .86rem;
  line-height: 1.5;
}

.public-profile-edit-form .optional-mark{
  display: none;
}

.public-profile-edit-form .instructor-form-card .form-field,
.public-profile-edit-form .concert-form-card .form-field{
  padding: 9px 0;
  border-bottom: 1px solid #d9dce2;
}

.public-profile-edit-form .instructor-form-card .form-field:last-of-type,
.public-profile-edit-form .concert-form-card .form-field:last-of-type{
  border-bottom: 0;
}

.public-profile-edit-form input:not([type="checkbox"]):not([type="file"]),
.public-profile-edit-form select,
.public-profile-edit-form textarea{
  background: #fff;
}

.public-profile-edit-form .profile-edit-group{
  margin: 16px 0;
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 97%, var(--primary) 3%);
}

.public-profile-edit-form [hidden]{
  display: none !important;
}

.instructor-form-settings{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

.public-profile-edit-form .instructor-form-card{
  padding: 16px;
}

@media (max-width: 700px){
  .instructor-editor-head,
  .instructor-form-card__head{
    align-items: flex-start;
    flex-direction: column;
  }

  .instructor-editor-head .sl-btn{
    width: 100%;
  }

  .organization-detail-concert-card,
  .concert-form-row,
  .concert-form-row--settings,
  .instructor-form-settings,
  .instructor-photo-editor{
    grid-template-columns: 1fr;
  }

  .request-member-profile-item--location,
  .organization-detail-concert-info--location.has-map{
    grid-template-columns: 1fr;
  }

  .organization-location-map--compact{
    width: 100%;
  }
}

.organization-detail-person-card__role{
  margin: 0 0 5px;
  color: var(--primary-strong);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.organization-detail-person-card h3{
  margin: 0 0 12px;
  color: var(--heading);
  font-size: 1.2rem;
}

.organization-detail-person-card div{
  color: var(--ink);
  line-height: 1.9;
}

.organization-detail-person-card div p{
  margin: 0 0 1em;
}

.organization-detail-person-card div p:last-child{
  margin-bottom: 0;
}

@media (max-width: 760px){
  .page-request-menu .org-request-card{
    grid-template-columns: 105px minmax(0, 1fr);
    min-height: 0;
  }

  .page-request-menu .org-request-card__logo,
  .page-request-menu .org-request-card__placeholder{
    height: 88px;
  }

  .page-request-menu .org-request-card__body{
    padding: 12px;
  }

  .page-request-menu .org-request-card__header{
    flex-direction: row;
  }

  .page-request-menu .org-request-card__actions{
    grid-column: 1 / -1;
    padding: 0 12px 12px;
    border-left: 0;
  }

  .organization-detail-hero{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .organization-detail-logo{
    width: 96px;
  }

  .organization-detail-hero__body h1{
    font-size: 1.7rem;
  }

  .organization-detail-people{
    padding: 18px;
    border-radius: 20px;
  }

  .organization-detail-people__grid{
    grid-template-columns: 1fr;
  }

  .organization-detail-person-card{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .organization-detail-person-card__photo{
    width: auto;
    max-width: min(100%, 220px);
    max-height: 320px;
  }

  .organization-detail-index__heading{
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .organization-detail-index__links{
    margin-inline: -24px;
    padding-inline: 14px;
  }

  .organization-detail-index__links a{
    flex-basis: 155px;
    padding-inline: 12px;
  }

  .organization-detail-section__heading{
    gap: 10px;
  }

  .organization-detail-notebook > .organization-detail-section,
  .organization-detail-notebook > .organization-detail-people,
  .organization-detail-notebook > .organization-detail-concerts{
    padding: 22px 18px;
  }

  .organization-detail-index-back{
    font-size: .7rem;
  }

}
/* ===== Fee management / cashbook ===== */
.fee-page{max-width:1100px}.fee-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}.fee-page-head h1{margin:0}.fee-page .eyebrow{margin:0 0 6px;font-size:.78rem;font-weight:800;letter-spacing:.1em}.fee-actions{display:flex;gap:8px;flex-wrap:wrap}.fee-toolbar,.fee-panel{background:var(--card-bg,#fff);border:1px solid rgba(120,95,55,.18);border-radius:18px;padding:16px;margin-bottom:16px}.fee-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.fee-toolbar label,.fee-entry-grid label{display:grid;gap:6px;font-weight:700}.fee-toolbar select{min-width:130px}.fee-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.fee-section-head h2,.fee-panel h2{margin-top:0}.fee-member-picker{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.fee-member-picker label,.fee-chips button,.fee-preset-list>span{border:1px solid rgba(120,95,55,.2);background:#faf7f1;border-radius:999px;padding:7px 11px}.fee-entry-card{border-top:1px solid rgba(120,95,55,.17);padding:18px 0}.fee-entry-card:first-of-type{border-top:0}.fee-entry-card h2{font-size:1.1rem}.fee-entry-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px}.fee-entry-grid input,.fee-entry-grid select,.fee-entry-card>label input,.fee-inline-form input,.ledger-form input,.ledger-form select{width:100%;box-sizing:border-box}.fee-chips{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:12px 0}.fee-chips button{cursor:pointer;font-weight:700}.fee-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fee-inline-form{display:flex;gap:8px}.fee-preset-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.fee-preset-list>span{display:inline-flex;align-items:center;gap:6px}.fee-preset-list form{display:inline}.fee-preset-list button{border:0;background:transparent;cursor:pointer;font-size:1rem}.fee-category{display:inline-block;border-radius:999px;padding:4px 8px;white-space:nowrap;font-size:.78rem;background:#eee}.fee-category--payer{background:#e8f3ed}.fee-category--exempt{background:#eee}.fee-category--payee{background:#f8ead8}.fee-cell{display:grid;gap:2px;min-width:86px}.fee-cell small{font-size:.7rem}.fee-status--pending{color:#9a6200}.fee-status--paid{color:#17643a}.ledger-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.ledger-summary article{padding:16px;border-radius:16px;background:var(--card-bg,#fff);border:1px solid rgba(120,95,55,.18);display:grid;gap:6px}.ledger-summary strong{font-size:1.3rem}.ledger-form p{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:10px}.ledger-form label{font-weight:700}
@media(max-width:760px){.fee-entry-grid,.fee-settings-grid,.ledger-summary{grid-template-columns:1fr}.ledger-form p{grid-template-columns:1fr}.fee-page-head{align-items:flex-start}.fee-actions{width:100%}}

/* Fee management overview */
.fee-page-lead{margin:8px 0 0;color:var(--muted,#667085)}
.fee-workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px}
.fee-workflow__step{display:grid;grid-template-columns:36px 1fr;column-gap:10px;align-items:center;padding:16px;border:1px solid rgba(120,95,55,.2);border-radius:16px;background:var(--card-bg,#fff);color:inherit;text-decoration:none;box-shadow:0 4px 14px rgba(32,24,14,.04)}
.fee-workflow__step>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f1ece3;font-weight:800}
.fee-workflow__step strong{font-size:1rem}.fee-workflow__step small{margin-top:3px;color:var(--muted,#667085)}
.fee-workflow__step:hover{transform:translateY(-1px);border-color:rgba(120,95,55,.4)}
.fee-workflow__step--primary{background:#111a2f;color:#fff;border-color:#111a2f}
.fee-workflow__step--primary>span{background:#fff;color:#111a2f}.fee-workflow__step--primary small{color:#d9dfeb}
.fee-overview{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:10px;margin-bottom:24px}
.fee-overview article{display:grid;gap:5px;padding:14px 16px;border-radius:14px;background:#f5f1ea;border:1px solid rgba(120,95,55,.14)}
.fee-overview span{font-size:.78rem;color:var(--muted,#667085);font-weight:700}.fee-overview strong{font-size:1.05rem}
.fee-overview--pending{background:#fff7e8!important}.fee-overview--pending strong{color:#9a6200}
.fee-overview--paid{background:#edf8f1!important}.fee-overview--paid strong{color:#17643a}
.fee-list-controls{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px}
.fee-list-controls h2{margin:0;font-size:1.25rem}.fee-list-controls p{margin:5px 0 0;color:var(--muted,#667085);font-size:.85rem}
.fee-year-select label{display:grid;gap:5px;font-size:.8rem;font-weight:700}.fee-year-select select{min-width:120px}
.fee-legend{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 10px;font-size:.78rem;color:var(--muted,#667085)}
.fee-legend span{display:flex;align-items:center;gap:5px}.fee-legend i{width:10px;height:10px;border-radius:50%;background:#e4e1dc}
.fee-legend .is-paid{background:#4fa476}.fee-legend .is-pending{background:#d79b35}.fee-legend .is-excused{background:#8993a4}.fee-legend .is-empty{background:#e4e1dc}
.fee-table--matrix{border-collapse:separate;border-spacing:0}.fee-table--matrix th{background:#f4efe5;position:sticky;top:0;z-index:1}
.fee-table--matrix th,.fee-table--matrix td{padding:9px 8px;border-bottom:1px solid rgba(120,95,55,.09);vertical-align:middle}
.fee-table--matrix tbody tr:hover{background:rgba(246,239,226,.62)}
.fee-th--member,.fee-td--member{position:sticky;left:0;z-index:2;background:var(--card-bg,#fff)}
.fee-table--matrix tbody tr:nth-child(even) .fee-td--member{background:#f5f1ea}
.fee-cell{padding:6px 7px;border-radius:9px;background:#f1f1ef;border-left:3px solid #b7b7b2}
.fee-cell strong{font-size:.82rem;white-space:nowrap}.fee-cell small{color:inherit;white-space:nowrap}
.fee-status--paid{background:#edf8f1;border-left-color:#4fa476}.fee-status--pending{background:#fff7e8;border-left-color:#d79b35}.fee-status--excused,.fee-status--exempt{background:#f0f2f5;border-left-color:#8993a4}
.fee-empty{display:inline-block;color:#999;font-size:.72rem;white-space:nowrap}
@media(max-width:760px){.fee-workflow{grid-template-columns:1fr}.fee-overview{grid-template-columns:1fr 1fr}.fee-list-controls{align-items:flex-start;flex-direction:column}.fee-year-select,.fee-year-select select{width:100%}}
.fee-setting-intro{border-left:4px solid #4f6f91}.fee-setting-intro p{margin-bottom:0}
.fee-category-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:16px 0}
.fee-category-editor>label{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,1fr);align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(120,95,55,.14);border-radius:12px;background:#faf8f4}
.fee-category-editor>label>span{display:grid;gap:2px}.fee-category-editor small{color:var(--muted,#667085)}.fee-category-editor select{width:100%}
@media(max-width:760px){.fee-category-editor{grid-template-columns:1fr}.fee-category-editor>label{grid-template-columns:1fr}.fee-category-editor select{width:100%}}
.fee-schedule-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.fee-schedule-options>label{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid rgba(120,95,55,.18);border-radius:14px;background:#faf8f4;cursor:pointer}.fee-schedule-options input{margin-top:4px}.fee-schedule-options span{display:grid;gap:4px}.fee-schedule-options small{color:var(--muted,#667085);line-height:1.5}.fee-custom-dates{margin-top:20px;padding-top:18px;border-top:1px solid rgba(120,95,55,.16)}
.mypage-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}.mypage-section-head h2{margin-bottom:4px}.mypage-section-head p{margin:0}.mypage-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(120,95,55,.14);border:1px solid rgba(120,95,55,.14);border-radius:14px;overflow:hidden;margin:16px 0}.mypage-profile-grid>div{background:var(--card-bg,#fff);padding:12px 14px}.mypage-profile-grid dt{font-size:.78rem;color:var(--muted,#667085);font-weight:700}.mypage-profile-grid dd{margin:4px 0 0;font-weight:700}.mypage-permissions h3{font-size:1rem;margin-bottom:8px}.mypage-permissions>div{display:flex;gap:7px;flex-wrap:wrap}.mypage-permissions span{padding:5px 9px;border-radius:999px;background:#f1ece3;font-size:.8rem}
@media(max-width:760px){.fee-schedule-options,.mypage-profile-grid{grid-template-columns:1fr}.fee-inline-form{flex-direction:column}}
.fee-cell-link {
  color: inherit;
  display: block;
  min-width: 7rem;
  padding: .35rem;
  text-decoration: none;
}

.fee-cell-link:hover,
.fee-cell-link:focus-visible {
  background: rgba(90, 116, 139, .1);
  border-radius: .5rem;
  outline: 2px solid rgba(90, 116, 139, .35);
}

.fee-cell-action {
  color: #315d82;
  display: block;
  font-size: .78rem;
  font-weight: 700;
  margin-top: .2rem;
}

.fee-period-browser,
.fee-current-period {
  background: #fff;
  border: 1px solid var(--border, #e4ded3);
  border-radius: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}

.fee-period-selectors,
.fee-period-navigation,
.fee-period-cards,
.fee-quick-register {
  align-items: center;
  display: flex;
  gap: .75rem;
}

.fee-period-selectors { justify-content: flex-end; }
.fee-period-selectors label { font-weight: 700; }
.fee-period-selectors select { display: block; margin-top: .25rem; }

.fee-period-navigation {
  justify-content: center;
  margin: 1rem auto;
}
.fee-period-navigation--compact { margin: .35rem auto .55rem; }
.fee-period-navigation--compact .fee-period-arrow { height: 2rem; width: 2rem; font-size: 1.35rem; }
.fee-period-navigation--compact > div { min-width: 13rem; }
.fee-period-navigation--compact strong { font-size: 1rem; margin-top: 0; }
.fee-period-navigation--compact small { font-size: .72rem; }

.fee-period-navigation > div { min-width: 15rem; text-align: center; }
.fee-period-navigation small,
.fee-period-navigation strong { display: block; }
.fee-period-navigation strong { font-size: 1.2rem; margin-top: .2rem; }

.fee-period-arrow {
  align-items: center;
  border: 1px solid #c9c1b5;
  border-radius: 50%;
  color: inherit;
  display: inline-flex;
  font-size: 1.8rem;
  height: 2.6rem;
  justify-content: center;
  text-decoration: none;
  width: 2.6rem;
}
.fee-period-arrow.is-disabled { opacity: .25; }

.fee-period-cards { align-items: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fee-period-card {
  border: 1px solid #ded7cc;
  border-radius: .8rem;
  color: inherit;
  padding: .85rem;
  text-decoration: none;
}
.fee-period-card.is-current { border: 2px solid #405c78; background: #f4f7fa; }
.fee-period-card > strong { display: block; margin-bottom: .65rem; }
.fee-period-card dl { display: grid; gap: .35rem; grid-template-columns: 1fr 1fr; margin: 0; }
.fee-period-card dl div { background: #f7f4ee; border-radius: .4rem; padding: .35rem .5rem; }
.fee-period-card dt { color: #667085; font-size: .75rem; }
.fee-period-card dd { font-size: 1.05rem; font-weight: 700; margin: 0; }
.fee-period-cards--compact .fee-period-card { padding: .55rem .7rem; }
.fee-period-cards--compact .fee-period-card > strong { margin-bottom: .35rem; }
.fee-period-cards--compact .fee-period-card dl { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.fee-period-cards--compact .fee-period-card dl div { align-items: baseline; background: transparent; display: flex; gap: .25rem; padding: 0; }
.fee-period-cards--compact .fee-period-card dt { font-size: .7rem; }
.fee-period-cards--compact .fee-period-card dd { font-size: .9rem; }

.fee-entry-list { display: grid; gap: .55rem; }
.fee-entry-row {
  align-items: end;
  background: #faf8f4;
  border: 1px solid #e4ded3;
  border-radius: .75rem;
  box-sizing: border-box;
  display: grid;
  gap: .55rem;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(9rem, 1fr) minmax(8rem, 1fr) minmax(10rem, 1.2fr) minmax(10rem, 1.2fr) auto;
  padding: .65rem;
  width: 100%;
}
.fee-entry-row label { font-size: .72rem; font-weight: 700; margin: 0; }
.fee-entry-row input, .fee-entry-row select { margin-top: .2rem; min-width: 0; width: 100%; }
.fee-entry-row__member { align-self: center; display: flex; flex-direction: column; gap: .25rem; }
.fee-entry-row__comment { min-width: 0; }
.fee-entry-row__actions { display: flex; gap: .35rem; }
.notice-target-preview { background: #fff; border: 1px solid #ded7cc; border-radius: .65rem; padding: .75rem; }
.notice-target-preview p { margin: 0 0 .4rem; }
.notice-target-preview ul { margin: 0 0 .7rem; max-height: 12rem; overflow: auto; padding-left: 1.4rem; }
.notice-target-preview .help-text { color: #666; font-size: .85rem; margin: .4rem 0 0; }

.fee-table--period { min-width: 850px; }
.fee-table--period .fee-member-name { min-width: 9rem; white-space: nowrap; }
.fee-row-actions { min-width: 12rem; }
.fee-status-label { border-radius: 999px; display: inline-block; padding: .3rem .55rem; white-space: nowrap; }
.fee-status--paid { background: #e4f3ea; }
.fee-status--pending { background: #fff0cf; }
.fee-status--excused, .fee-status--exempt { background: #e9edf2; }
.fee-status--unentered { background: #f1efeb; color: #777; }

@media (max-width: 760px) {
  .fee-period-selectors { justify-content: flex-start; }
  .fee-period-cards { grid-template-columns: 1fr; }
  .fee-period-navigation > div { min-width: 0; flex: 1; }
  .fee-entry-row { grid-template-columns: 1fr 1fr; }
  .fee-entry-row__member, .fee-entry-row__comment, .fee-entry-row__actions { grid-column: 1 / -1; }
}

@media (min-width: 761px) and (max-width: 1200px) {
  .fee-entry-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fee-entry-row__member, .fee-entry-row__actions { grid-column: auto; }
}

/* ===== Video library ===== */
.video-page,.form-card{max-width:1180px;margin:18px auto;padding:0 18px}
.video-page-head{margin-bottom:8px}
.video-page-head h2,.form-card h2{margin:0 0 3px}
.video-actions,.video-page-tools,.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.video-page-head .muted{margin:0;font-size:.92rem;line-height:1.5}
.video-page-title{display:flex;align-items:center;gap:10px}
.video-page-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.video-page-title__icon{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--chip);color:var(--primary-strong);font-size:.88rem;line-height:1;padding-left:2px}
.video-page-add--mobile{display:none}
.video-page-tools{margin:0 0 10px}
.video-filter{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;gap:8px;align-items:center;padding:0;border:0;background:transparent;margin-bottom:14px}
.video-filter input,.video-filter select,.video-form input,.video-form select,.video-form textarea,.category-add input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.video-filter__keyword{position:relative;min-width:0}.video-filter__search-icon{position:absolute;z-index:1;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-muted);font-size:1.35rem;line-height:1;pointer-events:none}.video-filter__keyword input{padding-left:42px}
.video-filter .btn{min-height:42px;white-space:nowrap}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.video-card{display:flex;flex-direction:column;height:100%;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-md);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.video-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--primary) 24%,var(--border))}
.video-player{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.video-player__button{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#111;cursor:pointer;overflow:hidden}
.video-player__thumb{display:block;width:100%;height:100%;object-fit:cover}
.video-player__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.22))}
.video-player__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:68px;height:48px;border-radius:14px;background:#ff0033;color:#fff;font-size:23px;line-height:1;padding-left:3px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card-body{display:flex;flex:1;flex-direction:column;gap:10px;padding:17px 18px 18px;min-height:150px}
.video-card-body h3{margin:0;font-size:1.08rem;line-height:1.5}
.video-category{display:inline-flex;align-items:center;max-width:100%;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--chip);color:var(--primary-strong);font-size:.8rem;font-weight:800;line-height:1.3}
.video-description{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;margin:0;color:var(--ink-muted);font-size:.93rem;line-height:1.7}
.video-card-actions{display:flex;justify-content:flex-end;margin-top:auto;padding-top:2px}
.video-edit-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:5px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--heading);font-size:.84rem;font-weight:800}
.video-edit-link:hover{background:var(--chip);border-color:var(--primary);color:var(--primary-strong)}
.empty-card{padding:34px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.category-list{margin-top:24px}.category-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 0;border-bottom:1px solid var(--border)}
.btn-danger{margin-top:22px}.muted{color:var(--ink-muted)}
.video-page-footer{display:flex;justify-content:flex-end;margin-top:18px}
@media(max-width:760px){.video-page-head{display:block}.video-actions{margin-top:14px}.video-filter{grid-template-columns:1fr;padding:12px}.video-filter .btn{width:100%}.video-grid{grid-template-columns:1fr;gap:16px}.video-card{border-radius:17px}.video-card-body{padding:14px 15px 16px;min-height:0}.video-player__play{width:60px;height:43px;font-size:20px;border-radius:12px}.category-row{align-items:flex-start}.video-page,.form-card{margin-top:22px;padding:0 12px}}

/* Video visibility management */
.video-visibility-tabs{display:flex;gap:4px;margin:0}
.video-visibility-tab{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:28px;padding:3px 9px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--heading);font-size:.75rem;font-weight:800;line-height:1;text-decoration:none}
.video-visibility-tab:hover{background:var(--chip);border-color:var(--primary)}
.video-visibility-tab.is-active{background:var(--chip);border-color:color-mix(in srgb,var(--primary) 55%,var(--border));color:var(--primary-strong)}
.video-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:24px}
.video-card-meta:empty{display:none}
.video-status{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid var(--border);border-radius:999px;font-size:.8rem;font-weight:800;line-height:1.3}
.video-status--hidden{background:var(--surface-2);color:var(--ink-muted)}
.video-card--hidden .video-player__thumb{filter:saturate(.72) brightness(.92)}
@media(max-width:760px){.video-visibility-tabs{width:auto}.video-visibility-tab{flex:0 0 auto}}

/* Video category management */
.video-category-page{max-width:900px}
.video-category-page__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.video-category-page__head h2{margin:0}
.video-category-page__head .btn{flex:0 0 auto}
.category-add{margin:0;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)}
.category-add__fields{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:14px}
.category-add__field{min-width:0}.category-add__field>label{display:block;margin:0 0 6px;font-weight:800}
.category-add__field--order>p{margin:6px 0 0;color:var(--ink-muted);font-size:.8rem;line-height:1.45}
.category-add__footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:15px;border-top:1px solid var(--border)}
.category-add__active{display:flex;align-items:center;gap:14px;min-width:0;cursor:pointer}
.category-add__active-copy{display:grid;gap:3px;min-width:0}.category-add__active-copy strong{color:var(--heading)}.category-add__active-copy span{color:var(--ink-muted);font-size:.83rem;line-height:1.45}
.category-add__active .video-toggle{flex:0 0 auto}
.category-add__active .video-toggle>input:not(:checked) + .video-toggle__track .video-toggle__state{font-size:0}
.category-add__active .video-toggle>input:not(:checked) + .video-toggle__track .video-toggle__state::after{content:"OFF";font-size:.8rem}
.category-list{margin-top:26px}.category-list h3{margin:0 0 8px;font-size:1.02rem}
.category-row{padding:12px 0}.category-row__main{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}.category-row__main strong{overflow-wrap:anywhere}.category-row__main>span:not(.category-row__status){color:var(--ink-muted);font-size:.84rem}
.category-row__status{display:inline-flex;align-items:center;min-height:26px;padding:3px 9px;border:1px solid #b9dfc4;border-radius:999px;background:#e7f6eb;color:#188347;font-size:.76rem;font-weight:800;line-height:1}.category-row__status.is-stopped{border-color:#d8dadd;background:#f0f1f2;color:#626a73}
.category-list__empty{margin:0;padding:15px 0;color:var(--ink-muted);border-top:1px solid var(--border)}
@media(max-width:760px){.video-category-page{margin-top:16px;padding:0 10px}.video-category-page__head{gap:8px;margin-bottom:12px}.video-category-page__head h2{font-size:1.4rem;line-height:1.3;white-space:nowrap}.video-category-page__head .btn{min-height:34px;padding:5px 10px;font-size:.78rem;white-space:nowrap}.category-add{padding:14px;border-radius:16px}.category-add__fields{grid-template-columns:1fr;gap:10px}.category-add__field--order>p{margin-top:5px}.category-add__footer{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px;padding-top:12px}.category-add__active{width:100%;align-items:center;justify-content:space-between;gap:10px}.category-add__active-copy{flex:1}.category-add__active-copy span{font-size:.78rem}.category-add__footer>.btn{justify-self:end;min-height:34px;padding:5px 10px;font-size:.78rem;white-space:nowrap}.category-list{margin-top:20px}.category-row{align-items:center}.category-row__main{gap:7px}.category-row form{flex:0 0 auto}.category-row .btn{min-height:34px;padding:5px 10px;font-size:.78rem;white-space:nowrap}}

/* ===== Portal empty state ===== */
.portal-empty-state{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:132px;
  margin:14px 0 0;
  padding:20px 24px;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.portal-empty-state__icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:16px;
  background:var(--chip);
  color:var(--primary-strong);
  font-size:1.75rem;
  font-weight:800;
  line-height:1;
}
.portal-empty-state__body{min-width:0}
.portal-empty-state__body h3{
  margin:0 0 5px;
  color:var(--heading);
  font-size:1.05rem;
  line-height:1.45;
}
.portal-empty-state__body p{
  margin:0;
  color:var(--ink-muted);
  font-size:.92rem;
  line-height:1.65;
}
.portal-empty-state__action{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  white-space:nowrap;
}
@media(max-width:760px){
  .portal-empty-state{
    grid-template-columns:auto minmax(0,1fr);
    gap:12px;
    min-height:0;
    padding:16px;
    border-radius:16px;
  }
  .portal-empty-state__icon{
    width:44px;
    height:44px;
    border-radius:13px;
    font-size:1.45rem;
  }
  .portal-empty-state__action{
    grid-column:1 / -1;
    justify-content:stretch;
  }
  .portal-empty-state__action .btn{width:100%}
}

/* ===== Score library refresh ===== */
.score-library{max-width:1180px;margin:18px auto 32px;padding:0 18px}
.score-library__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.score-library__head .sl-page-title{margin:0 0 3px}
.score-library__head .muted{margin:0;font-size:.92rem;line-height:1.5}
.score-library__tools{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.score-library .score-search-form{display:flex!important;align-items:center!important;flex:1!important;max-width:none!important;min-width:0!important;margin:0!important}
.score-library .score-search-input{flex:1!important;min-width:0!important;height:42px!important;max-width:none!important;border-radius:12px 0 0 12px!important;border:1px solid var(--border)!important;border-right:0!important;padding:0 14px!important;background:var(--surface)!important}
.score-library .score-search-form .btn{height:42px!important;border-radius:0 12px 12px 0!important;padding:0 16px!important;box-shadow:none!important;white-space:nowrap}
.score-library .score-search-clear{margin-left:8px!important;border-radius:12px!important;border:1px solid var(--border)!important}
.score-library .score-sort-tabs{display:flex!important;gap:6px!important;flex-wrap:nowrap!important;margin:0!important;white-space:nowrap}
.score-library .score-sort-tab{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:40px;padding:7px 12px!important;border:1px solid var(--border)!important;border-radius:999px!important;background:var(--surface)!important;color:var(--heading)!important;font-size:.86rem;font-weight:800!important;line-height:1!important;text-decoration:none!important}
.score-library .score-sort-tab:hover{background:var(--chip)!important;border-color:var(--primary)!important}
.score-library .score-sort-tab.is-active{background:var(--chip)!important;border-color:color-mix(in srgb,var(--primary) 55%,var(--border))!important;color:var(--primary-strong)!important;box-shadow:none!important;transform:none}
.score-library__list{display:grid;gap:14px}
.score-library-card{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}
.score-library-card__head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 70%,var(--surface))}
.score-library-card__title{display:flex;align-items:center;gap:10px;min-width:0}
.score-library-card__icon{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--chip);color:var(--primary-strong);font-size:1.1rem}
.score-library-card__title h2{min-width:0;margin:0;color:var(--heading);font-size:1.06rem;line-height:1.45}
.score-library-card__admin{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.score-library .score-status-btn{min-height:32px;padding:5px 10px;border:1px solid var(--border);border-radius:999px;font-size:.8rem;font-weight:800}
.score-manage-link{display:inline-flex;align-items:center;justify-content:center;min-height:32px;box-sizing:border-box;padding:5px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--heading);font:inherit;font-size:.8rem;font-weight:800;line-height:1;text-decoration:none;cursor:pointer}
.score-manage-link:hover{background:var(--chip);border-color:var(--primary);color:var(--primary-strong)}
.score-manage-link--danger{color:#9b3434}
.score-manage-link--danger:hover{background:#fff3f3;border-color:#e3aaaa;color:#8b2525}
.score-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:14px 17px 17px}
.score-part{display:flex;align-items:stretch;min-width:0;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);overflow:hidden}
.score-part__download{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;flex:1;padding:10px 11px;color:var(--heading);text-decoration:none}
.score-part__download:hover{background:var(--chip);color:var(--primary-strong)}
.score-part__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:.9rem}
.score-part__dl{flex:0 0 auto;color:var(--primary-strong);font-size:.78rem;font-weight:900}
.score-part__delete-form{display:flex!important;border-left:1px solid var(--border)}
.score-part__delete{width:38px;padding:0;border:0;background:transparent;color:#a04a4a;font-size:.72rem;font-weight:800;cursor:pointer}
.score-part__delete:hover{background:#fff0f0;color:#842e2e}
.score-parts__empty{grid-column:1/-1;padding:6px 2px;color:var(--ink-muted);font-size:.9rem}
@media(max-width:900px){
  .score-library__tools{align-items:stretch;flex-direction:column}
  .score-library .score-sort-tabs{width:100%}
  .score-library .score-sort-tab{flex:1}
  .score-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .score-library{margin-top:22px;padding:0 12px}
  .score-library__head{align-items:flex-start}
  .score-library__head .score-upload-btn{width:auto!important;margin:0!important}
  .score-library .score-search-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important}
  .score-library .score-search-clear{grid-column:1/-1;width:100%;margin:7px 0 0!important;border-radius:12px!important}
  .score-library-card__head{align-items:flex-start;flex-direction:column;padding:14px}
  .score-library-card__admin{justify-content:flex-start}
  .score-parts{grid-template-columns:1fr;padding:12px 14px 14px}
}
@media(max-width:480px){
  .score-library__head{display:block}
  .score-library__head .score-upload-btn{margin-top:10px!important;width:100%!important}
  .score-library .score-sort-tab{padding:7px 5px!important;font-size:.8rem}
}

.score-visibility-tabs{display:flex;gap:7px;margin:0 0 10px}.score-visibility-tab{display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:38px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--heading);font-size:.88rem;font-weight:800;text-decoration:none}.score-visibility-tab:hover{background:var(--chip);border-color:var(--primary)}.score-visibility-tab.is-active{background:var(--chip);border-color:color-mix(in srgb,var(--primary) 55%,var(--border));color:var(--primary-strong)}.score-library-card__title{flex:1;min-width:0}.score-title-wrap{display:flex;align-items:center;min-width:0;max-width:100%}.score-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}.score-title-more{flex:0 0 auto;margin-left:4px;padding:2px 7px;border:0;border-radius:999px;background:transparent;color:var(--primary-strong);font:inherit;font-weight:900;cursor:pointer}.score-title-more:hover{background:var(--chip)}.score-title-wrap.is-expanded{align-items:flex-start;flex-wrap:wrap}.score-title-wrap.is-expanded .score-title-text{overflow:visible;white-space:normal;word-break:break-word;flex-basis:100%}.score-title-wrap.is-expanded .score-title-more{margin:5px 0 0}@media(max-width:760px){.score-visibility-tabs{margin-bottom:10px}.score-visibility-tab{flex:1}}

/* 楽譜一覧の管理導線 */
.score-visibility-row{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.score-visibility-row .score-visibility-tabs{margin:0}
.score-library__actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.score-action-btn{min-height:36px!important;height:36px!important;padding:0 13px!important;font-size:.88rem!important;white-space:nowrap}
@media(max-width:760px){
  .score-library{margin-top:14px}
  .score-visibility-row{display:block;margin-bottom:10px}
  .score-visibility-row .score-visibility-tabs{margin-bottom:8px}
  .score-library__actions{display:grid;grid-template-columns:1fr;gap:6px;margin:0}
  .score-action-btn{width:100%;justify-content:center;min-height:36px!important;height:36px!important;padding:0 10px!important}
}


/* ===== Score title toggle fix ===== */
.score-title-wrap{position:relative;flex:1;min-width:0}
.score-title-text{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:clip}
.score-title-more{display:none;flex:0 0 auto;margin-left:6px;padding:3px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--primary-strong);font:inherit;font-size:.82rem;font-weight:900;line-height:1.2;cursor:pointer}
.score-title-wrap.is-truncated .score-title-more{display:inline-flex;align-items:center;justify-content:center}
.score-title-wrap.is-truncated .score-title-text{position:relative}
.score-title-wrap.is-truncated .score-title-text::after{content:"…";position:absolute;right:0;top:0;padding-left:8px;background:linear-gradient(90deg,transparent,var(--surface-2) 42%)}
.score-title-wrap.is-expanded{display:flex;align-items:flex-start;flex-wrap:wrap}
.score-title-wrap.is-expanded .score-title-text{flex:1 0 100%;max-width:100%;overflow:visible;white-space:normal;text-overflow:clip;word-break:break-word}
.score-title-wrap.is-expanded .score-title-text::after{display:none}
.score-title-wrap.is-expanded .score-title-more{display:inline-flex;margin:6px 0 0 auto;padding:5px 10px}


/* ===== Score title open / close ===== */
.score-title-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}
.score-title-text{
  display:block;
  min-width:0;
  margin:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.score-title-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:30px;
  padding:4px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--primary-strong);
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
.score-title-toggle:hover{
  background:var(--chip);
  border-color:var(--primary);
}
.score-title-wrap.is-expanded{
  align-items:start;
}
.score-title-wrap.is-expanded .score-title-text{
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
  word-break:break-word;
  line-height:1.55;
}
.score-title-wrap.is-expanded .score-title-toggle{
  align-self:start;
}
@media(max-width:760px){
  .score-title-wrap{
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
  }
  .score-title-toggle{
    padding:4px 7px;
    font-size:.75rem;
  }
}

/* ===== Score title toggle final ===== */
.score-title-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;flex:1!important;min-width:0!important;max-width:100%!important}
.score-title-wrap .score-title-text{display:block!important;min-width:0!important;max-width:100%!important;margin:0!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}
.score-title-wrap .score-title-text::after{display:none!important;content:none!important}
.score-title-wrap .score-title-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:30px!important;margin:0!important;padding:4px 9px!important;border:1px solid var(--border)!important;border-radius:999px!important;background:var(--surface)!important;color:var(--primary-strong)!important;font:inherit!important;font-size:.78rem!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important;cursor:pointer!important}
.score-title-wrap.is-expanded{align-items:start!important}
.score-title-wrap.is-expanded .score-title-text{overflow:visible!important;white-space:normal!important;text-overflow:clip!important;word-break:break-word!important;line-height:1.55!important}
.score-title-wrap.is-expanded .score-title-toggle{align-self:start!important}


/* ===== Score title final polish ===== */
.score-title-wrap:not(.is-expanded) .score-title-text{
  text-overflow:clip!important;
}


/* ===== Public video publishing ===== */
.video-public-badge{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border));border-radius:999px;background:var(--chip);color:var(--primary-strong);font-size:.78rem;font-weight:800;line-height:1.3}
.organization-detail-videos__lead{margin:0 0 16px;color:var(--ink-muted);line-height:1.7}
.organization-detail-videos__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.organization-detail-video-card{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}
.organization-detail-video-card__player{position:relative;aspect-ratio:16/9;background:#111}
.organization-detail-video-card__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.organization-detail-video-card__body{display:flex;flex-direction:column;gap:9px;padding:15px 16px 17px}
.organization-detail-video-card__body h3{margin:0;font-size:1.05rem;line-height:1.5}
.organization-detail-video-card__body p{margin:0;color:var(--ink-muted);line-height:1.7}
@media(max-width:760px){.organization-detail-videos__grid{grid-template-columns:1fr;gap:16px}.organization-detail-video-card{border-radius:16px}}

/* ===== Video form visibility settings ===== */
.video-form form > p:has(input[type="checkbox"]){
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:18px;
  row-gap:6px;
  margin:14px 0;
  padding:16px 18px;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-2);
}
.video-form form > p:has(input[type="checkbox"]) > label{
  grid-column:1;
  margin:0;
  color:var(--heading);
  font-weight:800;
  line-height:1.45;
}
.video-form form > p:has(input[type="checkbox"]) > input[type="checkbox"]{
  grid-column:2;
  grid-row:1;
  appearance:none;
  -webkit-appearance:none;
  width:48px;
  height:28px;
  margin:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  cursor:pointer;
  position:relative;
  transition:background .18s ease,border-color .18s ease;
}
.video-form form > p:has(input[type="checkbox"]) > input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--ink-muted);
  transition:transform .18s ease,background .18s ease;
}
.video-form form > p:has(input[type="checkbox"]) > input[type="checkbox"]:checked{
  border-color:var(--primary);
  background:var(--chip);
}
.video-form form > p:has(input[type="checkbox"]) > input[type="checkbox"]:checked::after{
  transform:translateX(20px);
  background:var(--primary-strong);
}
.video-form form > p:has(input[type="checkbox"]) > input[type="checkbox"]:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent);
  outline-offset:3px;
}
.video-form form > p:has(input[type="checkbox"]) > .helptext{
  grid-column:1 / -1;
  margin:0;
  color:var(--ink-muted);
  font-size:.88rem;
  line-height:1.6;
}
@media(max-width:760px){
  .video-form form > p:has(input[type="checkbox"]){padding:14px 15px;column-gap:12px}
}


/* ===== Video form toggle status clarity ===== */
.video-form form > p:has(input[type="checkbox"]){display:none!important}
.video-setting-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin:14px 0;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);transition:border-color .18s ease,background .18s ease}
.video-setting-card.is-on{border-color:color-mix(in srgb,var(--primary) 42%,var(--border));background:color-mix(in srgb,var(--chip) 42%,var(--surface-2))}
.video-setting-card__copy{min-width:0}
.video-setting-card__copy>label{display:block;margin:0 0 5px;color:var(--heading);font-weight:900;line-height:1.4}
.video-setting-card__copy>p{margin:0;color:var(--ink-muted);font-size:.88rem;line-height:1.6}
.video-setting-card__control{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:300px}
.video-toggle{display:inline-flex;align-items:center;cursor:pointer}
.video-toggle>input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.video-toggle__track{position:relative;display:block;width:108px;height:42px;box-sizing:border-box;border:1px solid #8b9097;border-radius:999px;background:#777d84;color:#fff;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.video-toggle__state{position:absolute;z-index:2;top:50%;right:16px;transform:translateY(-50%);font-size:.8rem;font-weight:900;line-height:1;letter-spacing:.02em;pointer-events:none}
.video-toggle__thumb{position:absolute;z-index:3;top:4px;left:4px;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.2);transition:transform .18s ease}
.video-toggle>input:checked + .video-toggle__track{border-color:#277fd8;background:#2787e5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.video-toggle>input:checked + .video-toggle__track .video-toggle__state{left:18px;right:auto}
.video-toggle>input:checked + .video-toggle__track .video-toggle__thumb{transform:translateX(66px)}
.video-toggle>input:focus-visible + .video-toggle__track{outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent);outline-offset:3px}
.video-setting-status{display:inline-flex;align-items:center;justify-content:center;min-width:142px;min-height:36px;padding:6px 13px;box-sizing:border-box;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink-muted);font-size:.8rem;font-weight:900;white-space:nowrap}
.video-setting-status.is-on{border-color:#b9dfc4;background:#e7f6eb;color:#188347}
.video-setting-status.is-off{border-color:#d8dadd;background:#f0f1f2;color:#626a73}
.video-field-errors .errorlist{margin:7px 0 0;padding-left:20px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:760px){
  .video-setting-card{grid-template-columns:1fr;gap:12px;padding:14px 15px}
  .video-setting-card__control{justify-content:space-between;min-width:0;width:100%;gap:10px}
  .video-toggle__track{width:104px}
  .video-toggle>input:checked + .video-toggle__track .video-toggle__thumb{transform:translateX(62px)}
  .video-setting-status{min-width:132px}
}


/* ===== Video form footer safety layout ===== */
.video-form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.video-form-footer__primary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.video-form-delete{margin:0 0 0 auto}
@media(max-width:760px){
  .video-form-footer{align-items:flex-end;gap:16px}
  .video-form-footer__primary{gap:8px}
  .video-form-delete{margin-left:auto}
}


/* ===== Video form footer final alignment ===== */
.video-form-footer .btn,
.video-form-footer .btn-danger,
.video-form-footer__primary .btn{
  margin-top:0!important;
  margin-bottom:0!important;
}
.video-form-footer,
.video-form-footer__primary,
.video-form-delete{
  align-items:center!important;
}
.video-form-delete{
  display:flex;
}
@media(max-width:760px){
  .video-form-footer{align-items:center!important;}
}


/* ===== Video mobile polish 2026-09-21 ===== */
@media(max-width:760px){
  /* List: get users to the videos faster. */
  .video-page{
    margin-top:16px;
    padding:0 10px;
  }
  .video-page-head{margin-bottom:9px;}
  .video-page-head h2{
    margin:0 0 4px;
    font-size:1.45rem;
    line-height:1.25;
  }
  .video-page-head .muted{
    margin:0;
    font-size:.86rem;
    line-height:1.55;
  }
  .video-page-title-row{
    gap:8px;
  }
  .video-page-add--mobile{
    display:inline-flex;
    flex:0 0 auto;
    min-height:34px;
    padding:5px 10px;
    font-size:.78rem;
    white-space:nowrap;
  }
  .video-page-add--desktop{display:none}
  .video-page-tools{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    margin:0 0 12px;
  }
  .video-page-tools .btn{
    min-height:34px;
    padding:5px 10px;
    font-size:.78rem;
    white-space:nowrap;
  }
  .video-visibility-tabs{
    gap:4px;
    margin:0;
  }
  .video-visibility-tab{
    min-width:0;
    min-height:28px;
    padding:3px 8px;
    font-size:.75rem;
  }
  .video-filter{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin-bottom:14px;
    padding:0;
    border:0;
    background:transparent;
  }
  .video-filter__keyword{
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .video-filter__keyword input[type="search"]{
    min-height:42px;
  }
  .video-filter select{
    grid-column:1 / -1;
    grid-row:2;
    min-width:0;
    min-height:42px;
  }
  .video-filter .btn{
    grid-column:2;
    grid-row:1;
    width:auto;
    min-width:70px;
    min-height:42px;
    padding:6px 12px;
  }
  .video-grid{gap:14px}
  .video-card-body{gap:8px;padding:13px 14px 15px}
  .video-card-body h3{font-size:1rem}
  .video-description{font-size:.88rem;line-height:1.6}
  .video-page-footer .btn{
    min-height:34px;
    padding:5px 10px;
    font-size:.78rem;
  }

  /* Edit: compact form while keeping tap targets and state clarity. */
  .form-card.video-form{
    margin-top:16px;
    padding:0 10px;
  }
  .video-form h2{
    margin:0 0 8px;
    font-size:1.45rem;
    line-height:1.3;
  }
  .video-form-intro{
    margin:0 0 14px;
    font-size:.86rem;
    line-height:1.6;
  }
  .video-form form>p{
    margin:0 0 13px;
  }
  .video-form form>p>label{
    margin-bottom:5px;
    font-size:.94rem;
  }
  .video-form input:not([type="checkbox"]),
  .video-form select{
    min-height:44px;
  }
  .video-form textarea{
    min-height:112px;
  }
  .video-setting-card{
    gap:10px;
    margin:10px 0;
    padding:12px 13px;
    border-radius:15px;
  }
  .video-setting-card__copy>label{
    margin-bottom:3px;
    font-size:.96rem;
  }
  .video-setting-card__copy>p{
    font-size:.82rem;
    line-height:1.55;
  }
  .video-setting-card__control{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    justify-content:start;
    gap:9px;
  }
  .video-toggle__track{width:100px;height:40px}
  .video-toggle__thumb{width:30px;height:30px}
  .video-toggle>input:checked + .video-toggle__track .video-toggle__thumb{transform:translateX(60px)}
  .video-setting-status{
    min-width:0;
    width:100%;
    min-height:34px;
    padding:5px 10px;
    font-size:.75rem;
  }
  .video-form-footer{
    gap:10px;
    margin-top:12px;
  }
  .video-form-footer__primary{gap:7px;flex-wrap:nowrap}
  .video-form-footer .btn{
    min-height:38px;
    padding:6px 12px;
  }
  .video-form-delete{flex:0 0 auto}
}

@media(max-width:420px){
  .video-page-tools{
    justify-content:flex-end;
  }
  .video-page-tools .btn{
    flex:0 1 auto;
  }
  .video-form-footer .btn{
    padding-left:11px;
    padding-right:11px;
  }
}

/* =========================================================
  Home mobile readability / compact notice
========================================================= */
.home-notice-empty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}
.home-notice-empty__body{min-width:0;flex:1}
.home-notice-empty__title{margin:0;font-weight:700;color:var(--heading)}
.home-notice-empty__text{margin:2px 0 0;font-size:.9rem}
.home-notice-empty__edit{margin:0!important;white-space:nowrap;flex:0 0 auto}

@media (max-width:600px){
  .calendar-wrap{
    width:100%;
    min-width:0;
  }
  .notice-card--home{
    width:100%;
    box-sizing:border-box;
    margin:8px 0 12px;
    padding:11px 12px 12px;
    border-radius:14px;
  }
  .notice-card--home h3{
    margin:0 0 7px;
    font-size:1rem;
    line-height:1.35;
  }
  .home-notice-empty{
    display:block;
  }
  .home-notice-empty__title{
    font-size:.9rem;
    line-height:1.45;
  }
  .home-notice-empty__text{
    margin-top:2px;
    font-size:.78rem;
    line-height:1.5;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .home-notice-empty__edit{
    display:inline-flex;
    width:auto;
    min-height:34px;
    margin-top:8px!important;
    padding:5px 10px;
    font-size:.78rem;
  }
  .calendar-header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    width:100%;
    gap:5px;
    margin:8px 0 10px;
  }
  .calendar-header .calendar-nav{
    justify-content:center;
    min-height:34px;
    padding:.25rem .42rem;
    font-size:.78rem;
    white-space:nowrap;
  }
  .calendar-header .calendar-month-badge{
    justify-content:center;
    min-width:0;
    padding:.28rem .4rem;
  }
  .calendar-header .calendar-month-badge .y{font-size:.78rem}
  .calendar-header .calendar-month-badge .m{font-size:1.05rem}
  .page-schedule{width:100%;min-width:0}
}

/* Home mobile final compact controls */
@media (max-width:600px){
  .notice-card--home .btn,
  .home-notice-empty__edit{
    min-height:30px;
    padding:3px 9px;
    border-radius:999px;
    font-size:.74rem;
    line-height:1.2;
  }

  .calendar-header{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:4px;
    margin:7px 0 9px;
  }
  .calendar-header .calendar-nav{
    min-height:30px;
    padding:2px 8px;
    border-radius:999px;
    font-size:.72rem;
    line-height:1.2;
  }
  .calendar-header .calendar-month-badge{
    min-height:34px;
    padding:3px 8px;
    border-radius:999px;
    white-space:nowrap;
  }
  .calendar-header .calendar-month-badge .y{font-size:.72rem}
  .calendar-header .calendar-month-badge .m{font-size:.96rem}
}


/* Home: mobile empty state for a month with no practices */
.home-mobile-empty-practices{display:none;}
@media (max-width:600px){
  .home-mobile-empty-practices{
    display:block;
    margin:8px 0 0;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    color:var(--ink-muted);
    font-size:.8rem;
    line-height:1.45;
    text-align:center;
  }
}


/* ===== Practice empty state: mobile compact ===== */
@media(max-width:760px){
  .portal-empty-state--practice{
    grid-template-columns:42px minmax(0,1fr);
    gap:10px 12px;
    padding:14px;
  }
  .portal-empty-state--practice .portal-empty-state__icon{
    width:42px;
    height:42px;
    border-radius:12px;
    font-size:1.35rem;
  }
  .portal-empty-state--practice .portal-empty-state__body h3{
    margin:0;
    font-size:1rem;
    line-height:1.45;
  }
  .portal-empty-state--practice .portal-empty-state__action{
    grid-column:1 / -1;
    margin-top:2px;
  }
  .portal-empty-state--practice .portal-empty-state__action .btn{
    min-height:38px;
    padding:7px 12px;
  }
}

/* ===== Practice empty state: mobile message weight tuning ===== */
@media(max-width:760px){
  .portal-empty-state--practice .portal-empty-state__body h3{
    font-size:.92rem;
    font-weight:600;
    line-height:1.4;
    letter-spacing:0;
  }
}


/* ===== Practice empty state: semantic mobile message ===== */
.portal-empty-state--practice .practice-empty-message{
  margin:0;
  color:var(--ink);
  font-size:1rem;
  font-weight:500;
  line-height:1.5;
}
@media(max-width:760px){
  .portal-empty-state--practice{
    grid-template-columns:36px minmax(0,1fr);
    gap:8px 10px;
  }
  .portal-empty-state--practice .portal-empty-state__icon{
    width:36px;
    height:36px;
    border-radius:10px;
    font-size:1.2rem;
  }
  .portal-empty-state--practice .practice-empty-message{
    font-size:.9rem;
    font-weight:500;
    line-height:1.45;
  }
}


/* ===== Practice page title icon + simplified empty state ===== */
.practice-page-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.practice-page-title__icon{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:11px;
  background:var(--chip);
  color:var(--primary-strong);
  font-size:1.25rem;
  font-weight:800;
  line-height:1;
}
@media(max-width:760px){
  .practice-page-title{
    gap:8px;
  }
  .practice-page-title__icon{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:10px;
    font-size:1.15rem;
  }
  .portal-empty-state--practice{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:14px;
  }
  .portal-empty-state--practice .portal-empty-state__body{
    min-width:0;
    text-align:center;
  }
  .portal-empty-state--practice .practice-empty-message{
    margin:0;
    font-size:.9rem;
    font-weight:500;
    line-height:1.45;
  }
  .portal-empty-state--practice .portal-empty-state__action{
    grid-column:1;
    margin-top:0;
  }
}


/* ===== Practice mobile card / venue management polish ===== */
.practice-place-note{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.practice-place-manage{
  margin:0!important;
  text-decoration:none;
  white-space:nowrap;
}
.atd-mobile-open-label{display:none}

/* Keep the attendance form actions visually separate from the answer card. */
.attendance-response-form__actions{
  margin-top:18px;
}

@media(max-width:760px){
  .practice-place-note{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .practice-place-manage{
    display:inline-flex;
    width:auto!important;
    min-height:34px;
    padding:5px 10px!important;
    font-size:.82rem;
  }

  .practice-card{
    border-radius:16px;
  }
  .practice-card__head{
    align-items:center;
    gap:10px;
    padding:10px 12px;
  }
  .practice-date{font-size:.8rem}
  .practice-time{font-size:.98rem}
  .practice-actions{
    gap:6px!important;
    flex-wrap:nowrap;
  }
  .practice-actions .btn{
    min-height:34px;
    padding:5px 9px;
    font-size:.8rem;
  }
  .practice-actions .btn-danger{margin-top:0}

  .practice-card__grid{
    gap:7px;
    padding:8px 10px 10px;
  }
  .practice-block,
  .practice-block--wide{
    grid-template-columns:1fr;
    gap:5px;
    padding:8px 10px;
    border-radius:12px;
  }
  .practice-label{
    padding:0;
    font-size:.74rem;
    line-height:1.2;
    letter-spacing:.02em;
  }
  .practice-value{
    gap:4px;
    font-size:.9rem;
  }
  .practice-score{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0 0 4px;
    padding:6px 8px;
    border-radius:10px;
    font-size:.86rem;
    line-height:1.45;
  }
  .practice-score:last-child{margin-bottom:0}

  .atd-summary{
    list-style:none;
  }
  .atd-summary::-webkit-details-marker{display:none}
  .atd-row{
    display:grid;
    gap:6px;
  }
  .atd-chips{display:none}
  .atd-counts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    width:100%;
  }
  .atd-counts .badge{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:5px 4px;
    font-size:.76rem;
    white-space:nowrap;
  }
  .atd-mobile-open-label{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:32px;
    box-sizing:border-box;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--primary-strong);
    font-size:.8rem;
    font-weight:800;
  }
  .atd-details[open] .atd-mobile-open-label::after{content:"（閉じる）";margin-left:4px}
  .atd-panel{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:6px;
    padding:8px;
    border-radius:11px;
  }
  .atd-title{font-size:.82rem;margin-bottom:5px}
  .atd-chip{font-size:.78rem;padding:.26rem .5rem}

  .attendance-reminder-box{
    margin-top:6px!important;
  }
  .attendance-reminder-box > summary.btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:32px;
    box-sizing:border-box;
    margin:0;
    padding:6px 9px;
    font-size:.8rem;
  }
  .attendance-reminder-box form{
    margin-top:6px!important;
    padding-top:2px;
  }

}

/* =========================================================
  Survey pages
========================================================= */
.survey-page{max-width:980px;margin:0 auto;padding:clamp(4px,1vw,14px) 0 24px}
.survey-page__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 22px;padding:22px 24px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,var(--surface),var(--chip));box-shadow:var(--shadow-sm)}
.survey-page__heading h2{margin:.1rem 0 .45rem}.survey-page .eyebrow{margin:0 0 .3rem;color:var(--primary-strong);font-size:.82rem;font-weight:900;letter-spacing:.08em}
.survey-section{margin:22px 0;padding:22px 24px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.survey-section>h3{margin:0 0 15px;font-size:1.08rem}
.survey-card,.survey-question-row,.survey-result{margin:10px 0;padding:17px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.survey-card{display:flex;align-items:center;justify-content:space-between;gap:18px}.survey-card h4{margin:.55rem 0 .35rem;font-size:1.05rem}.survey-card p{margin:.35rem 0}
.survey-status{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border-radius:999px;background:var(--chip);color:var(--primary-strong);font-size:.78rem;font-weight:900}.survey-status--sub{margin-left:5px;background:#fff3dd;color:#875100}
.survey-form-page{max-width:820px}.survey-form-page>h2{margin:12px 0 18px}.survey-form{max-width:none;padding:22px 24px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.survey-form .form-row{margin:0 0 19px}.survey-form label{font-weight:850}.survey-form input[type=text],.survey-form input[type=datetime-local],.survey-form textarea,.survey-form select{width:100%;margin-top:7px}.survey-form input[type=checkbox],.survey-form input[type=radio]{accent-color:var(--primary)}.survey-form ul{list-style:none;margin:9px 0;padding:0}.survey-form li{margin:7px 0}.survey-form li label{display:flex;align-items:center;gap:7px;font-weight:650}.form-help{margin:6px 0;color:var(--ink-muted);font-size:.88rem}
.survey-rule{margin:28px 0;border:0;border-top:1px solid var(--border)}.survey-section__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.survey-section__heading h3{margin:0 0 5px}.survey-section__heading p{margin:0}.survey-question-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.survey-question-row p{margin:5px 0 0}.survey-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.survey-actions form{margin:0}.btn-small{min-height:32px;padding:5px 9px;font-size:.84rem}.btn-danger{background:var(--btn-danger-bg)!important;color:var(--btn-danger-fg)!important}
.survey-edit-heading{margin-bottom:14px}.survey-edit-heading__actions,.survey-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.survey-edit-heading__actions form,.survey-actions form{margin:0}.survey-edit-heading__actions>.btn,.survey-edit-heading__actions form>.btn,.survey-actions>.btn,.survey-actions form>.btn{box-sizing:border-box;height:36px;min-height:36px}.survey-edit-heading__actions .btn-danger,.survey-actions .btn-danger{margin-top:0}.survey-core-details{margin:0 0 22px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.survey-core-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;cursor:pointer;font-weight:900}.survey-core-details>summary small{color:var(--ink-muted);font-weight:650}.survey-core-details[open]>summary{border-bottom:1px solid var(--border)}.survey-core-form{margin:0;border:0;border-radius:0;box-shadow:none}.survey-next-step{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 22px;border:1px solid color-mix(in srgb,var(--primary) 32%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--primary) 7%,var(--surface))}.survey-next-step>div{margin-right:auto}.survey-next-step h3{margin:0 0 5px}.survey-next-step p{margin:0}
.survey-target-form .survey-target-options{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.survey-target-exclusions{margin:0 0 20px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.survey-target-exclusions summary{padding:13px 15px;cursor:pointer;font-weight:800}.survey-target-exclusions .form-row{margin:0;padding:0 15px 15px}.survey-preview-note{margin:0 0 16px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--primary) 36%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));font-weight:700}.survey-preview-page input:disabled,.survey-preview-page textarea:disabled{opacity:1;color:var(--ink);background:var(--surface-2);cursor:default}
.survey-question-type-guide{margin:0 0 19px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--primary) 6%,var(--surface))}.survey-question-type-guide strong{display:block;margin-bottom:5px}.survey-question-type-guide p{margin:0;color:var(--ink-muted)}.survey-question-type-guide p[hidden]{display:none}
.survey-answer-page{max-width:820px}.survey-description{margin:14px 0;padding:14px 16px;border-left:4px solid var(--primary);border-radius:0 12px 12px 0;background:var(--surface)}.survey-anonymous-note{padding:13px 15px;border:1px solid #ecd8ad;border-radius:12px;background:#fff8e8;color:#694d13}.survey-answer-form{padding:4px 0}.survey-answer-question{margin:16px 0;padding:19px 20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.survey-answer-question legend{padding:0 6px;color:var(--heading);font-weight:900}.survey-answer-question label{display:flex;align-items:center;gap:8px;margin:10px 0}.survey-answer-question input[type=text],.survey-answer-question input[type=date],.survey-answer-question textarea{width:100%;margin-top:6px}.survey-rating{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:440px}.survey-rating label{justify-content:center;margin:0;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.required{margin-left:7px;color:var(--btn-danger-bg);font-size:.76rem}.survey-free-text{padding-left:0;list-style:none}.survey-free-text li{margin:10px 0;padding:11px 12px;border-radius:10px;background:var(--surface-2)}
@media(max-width:640px){.survey-page{padding-top:0}.survey-page__heading,.survey-card,.survey-question-row{display:block;padding:17px}.survey-page__heading>.btn,.survey-card>.btn,.survey-section__heading>.btn{display:inline-flex;margin-top:13px}.survey-section,.survey-form{padding:16px}.survey-section__heading{display:block}.survey-edit-heading__actions,.survey-actions{margin-top:11px}.survey-core-details>summary{display:block;padding:16px}.survey-core-details>summary small{display:block;margin-top:4px}.survey-next-step{display:block;padding:17px}.survey-next-step .btn,.survey-next-step form{display:flex;width:100%;box-sizing:border-box;justify-content:center;margin:10px 0}.survey-next-step form .btn{margin:0}.survey-rating{gap:5px}.survey-rating label{padding:7px 2px}.survey-answer-question{padding:16px 14px}}

/* =========================================================
   Mobile notebook navigation v6
   - compact app header
   - side drawer navigation
   - OneNote-inspired section tab without ruled-paper styling
========================================================= */
.practice-inline-guide{display:none}

@media (max-width:820px){
  /* Header: brand + language + hamburger on one compact row. */
  .site-header{
    min-height:64px;
    padding:0 118px 0 16px;
    display:flex;
    align-items:center;
    text-align:left;
  }
  .site-header .brand{
    width:100%;
    font-size:clamp(18px,5.3vw,23px);
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .language-switcher{
    top:50%;
    right:58px;
    transform:translateY(-50%);
    padding:2px;
    box-shadow:none;
    background:transparent;
    border:0;
  }
  .language-switcher select{
    width:54px;
    min-height:32px;
    padding:2px 4px;
    text-align:center;
    appearance:none;
    background:var(--surface);
    border:1px solid var(--border);
  }

  /* The navbar itself no longer consumes a full row. */
  .navbar.navbar--main{
    height:0;
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
    overflow:visible;
  }
  /* Compact grouped mobile navigation. Only this block owns drawer layout. */
  .nav-mobile {
    position: static;
    width: 0;
    height: 0;
  }
  .nav-mobile-summary {
    position: fixed;
    z-index: 1002;
    top: 14px;
    right: 10px;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--heading);
    font-size: 0;
    list-style: none;
    cursor: pointer;
  }
  .nav-mobile-summary::-webkit-details-marker { display: none; }
  .nav-mobile-summary::after { content: "☰"; font-size: 26px; font-weight: 500; line-height: 1; }
  .nav-mobile[open] .nav-mobile-summary {
    z-index: 1003;
    right: auto;
    left: min(calc(82vw - 48px), 262px);
    width: 36px;
  }
  .nav-mobile[open] .nav-mobile-summary::after { content: "×"; font-size: 30px; }
  .nav-mobile-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .nav-mobile-overlay {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 20, 28, .42);
    box-shadow: none;
    cursor: pointer;
    appearance: none;
  }
  .nav-mobile-overlay:hover, .nav-mobile-overlay:active {
    background: rgba(15, 20, 28, .42);
    box-shadow: none;
    transform: none;
  }
  .nav-mobile-menu {
    position: fixed;
    z-index: 1002;
    inset: 0 auto 0 0;
    box-sizing: border-box;
    width: min(82vw, 310px);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0 12px max(14px, env(safe-area-inset-bottom));
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    box-shadow: 12px 0 34px rgba(28, 31, 36, .18);
  }
  .nav-mobile:not([open]) .nav-mobile-menu,
  .nav-mobile:not([open]) .nav-mobile-overlay { display: none; }
  .nav-mobile-menu__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 38px 0 6px;
    background: var(--surface);
  }
  .nav-mobile-menu__heading { margin: 0; font-size: .98rem; font-weight: 800; color: var(--heading); }
  .nav-mobile-group { margin: 0 0 10px; padding: 0; min-width: 0; }
  .nav-mobile-group:last-child { margin-bottom: 0; }
  .nav-mobile-group__title {
    margin: 0;
    padding: 2px 6px 4px;
    color: var(--ink-muted);
    font-size: .71rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .03em;
  }
  .nav-mobile-group__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; }
  .nav-mobile-menu .nav-menu-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: 8px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--heading);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    text-decoration: none;
  }
  .nav-mobile-menu .nav-menu-item:hover { background: var(--chip); color: var(--heading); }
  .nav-mobile-menu .nav-menu-item[aria-current="page"] {
    background: var(--chip);
    box-shadow: inset 3px 0 0 var(--primary);
  }
  .nav-mobile-menu .nav-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
  .nav-mobile-menu .nav-menu-form {
    display: block;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html.portal-mobile-menu-open, body.portal-mobile-menu-open { overflow: hidden; }
  body.portal-mobile-menu-open .navbar.navbar--main { z-index: 5000; }

  /* Content starts immediately after the app header. */
  main, .container, .site-main{margin-top:0;padding-inline:0}
  .portal-main-inner{padding-top:0}
  .practice-notebook-page .portal-page-guide{display:none}
  .practice-notebook-page .page-section--narrow{
    width:100%;
    max-width:none;
    margin:0;
    padding:18px 14px 28px;
    background:var(--surface);
  }

  /* OneNote-inspired section tab: no ruled-paper imitation. */
  .practice-notebook-page .practice-page-head{
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    margin:0 0 0;
    border-bottom:2px solid color-mix(in srgb,var(--primary) 45%,var(--border));
  }
  .practice-notebook-page .practice-page-title{
    position:relative;
    top:2px;
    display:flex;
    width:auto;
    margin:0 !important;
    padding:10px 16px 9px;
    gap:7px;
    border:1px solid color-mix(in srgb,var(--primary) 42%,var(--border));
    border-bottom:2px solid var(--surface);
    border-radius:10px 10px 0 0;
    background:color-mix(in srgb,var(--primary) 10%,var(--surface));
    font-size:1.15rem;
    line-height:1.15;
  }
  .practice-notebook-page .practice-page-title__icon{
    width:auto;height:auto;flex:0 0 auto;
    padding:0;border-radius:0;background:transparent;
    font-size:1rem;
  }
  .practice-inline-guide{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:5px 2px 7px;
    color:var(--muted);
    font-size:.78rem;
    font-weight:700;
    text-decoration:none;
  }

  /* Secondary tabs read like notebook section selectors, not pill buttons. */
  .practice-notebook-page .practice-tabs-row{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0 0 14px;
    padding:8px 0 6px;
    border-bottom:1px solid var(--border);
  }
  .practice-notebook-page .practice-tabs{display:flex;gap:2px;flex-wrap:nowrap;min-width:0}
  .practice-notebook-page .practice-tabs .btn{
    min-height:34px;
    padding:5px 10px;
    border:0;
    border-radius:6px;
    box-shadow:none;
    background:transparent;
    font-size:.82rem;
    white-space:nowrap;
  }
  .practice-notebook-page .practice-tabs .btn-soft{
    background:var(--chip);
    color:var(--heading);
  }
  .practice-notebook-page .practice-tabs-row__add{
    width:36px;height:36px;min-width:36px;min-height:36px;
    margin-left:auto;padding:0;
    display:grid;place-items:center;
    border-radius:50%;
    font-size:0;
  }
  .practice-notebook-page .practice-tabs-row__add::after{content:"＋";font-size:1.25rem;line-height:1}
}

/* =========================================================
   Mobile practice header v7
   - keep PC v6 layout
   - plain page title on mobile
   - hamburger belongs to the global header
   - local, no-API help disclosure
========================================================= */
.practice-page-help{display:none}

@media (max-width:820px){
  /* Plain page heading: no index-tab treatment. */
  .practice-notebook-page .practice-page-head{
    display:block;
    margin:0;
    border:0;
  }
  .practice-notebook-page .practice-page-title{
    position:static;
    display:block;
    margin:0 !important;
    padding:2px 0 9px;
    border:0;
    border-radius:0;
    background:transparent;
    font-size:1.28rem;
    line-height:1.25;
  }
  .practice-notebook-page .practice-page-title__icon,
  .practice-inline-guide{display:none !important}

  /* Keep the good compact tabs; make Add self-explanatory. */
  .practice-notebook-page .practice-tabs-row{
    margin:0;
    padding:0 0 9px;
  }
  .practice-notebook-page .practice-tabs-row__add{
    width:auto;
    height:34px;
    min-width:0;
    min-height:34px;
    padding:5px 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:6px;
    background:transparent;
    box-shadow:none;
    font-size:0;
    color:var(--primary-strong);
  }
  .practice-notebook-page .practice-tabs-row__add::after{
    content:"＋ 追加";
    font-size:.8rem;
    font-weight:800;
    line-height:1;
  }

  /* Free static help: expands in place, no page transition or API call. */
  .practice-page-help{
    display:block;
    margin:0 0 14px;
    border-bottom:1px solid var(--border);
  }
  .practice-page-help > summary{
    list-style:none;
    cursor:pointer;
    padding:8px 0 10px;
    color:var(--muted);
    font-size:.8rem;
    font-weight:750;
  }
  .practice-page-help > summary::-webkit-details-marker{display:none}
  .practice-page-help > summary::before{content:"？ ";font-weight:900}
  .practice-page-help > summary::after{content:"⌄";margin-left:5px}
  .practice-page-help[open] > summary::after{content:"⌃"}
  .practice-page-help__body{
    margin:0 0 10px;
    padding:10px 12px;
    border-radius:8px;
    background:var(--surface-2);
    color:var(--ink-muted);
    font-size:.82rem;
    line-height:1.65;
  }
  .practice-page-help__body p{margin:0 0 6px}
  .practice-page-help__body p:last-child{margin-bottom:0}
}


/* =========================================================
   Practice navigation/help correction v8
   - remove legacy external guide on practice page on all sizes
   - keep local help available on PC and mobile
   - make mobile drawer a real off-canvas sheet
========================================================= */
.practice-notebook-page .portal-page-guide{
  display:none !important;
}
.practice-notebook-page .practice-page-help{
  display:block;
  margin:10px 0 16px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.practice-notebook-page .practice-page-help > summary{
  list-style:none;
  cursor:pointer;
  padding:9px 2px;
  color:var(--muted);
  font-size:.84rem;
  font-weight:750;
}
.practice-notebook-page .practice-page-help > summary::-webkit-details-marker{display:none}
.practice-notebook-page .practice-page-help > summary::before{content:"？ ";font-weight:900}
.practice-notebook-page .practice-page-help > summary::after{content:"⌄";margin-left:5px}
.practice-notebook-page .practice-page-help[open] > summary::after{content:"⌃"}
.practice-notebook-page .practice-page-help__body{
  margin:0 0 10px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--ink-muted);
  font-size:.84rem;
  line-height:1.65;
}
.practice-notebook-page .practice-page-help__body p{margin:0 0 6px}
.practice-notebook-page .practice-page-help__body p:last-child{margin-bottom:0}

@media (max-width:820px){
  .practice-notebook-page .practice-page-help{
    margin:0 0 14px;
    border-top:0;
  }
}