/* =========================================================
  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;
}

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;
}

.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;
}

.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);
}

.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 var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
}

.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: 10px 0 0;
  color: var(--ink-muted);
  font-size: .9rem;
}

/* =========================================================
  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;
  }
}

/* =========================================================
  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;
}

@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;
  }
}

/* =========================================================
  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-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;
}

@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;
}

@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%;
  }
}