/* ===================================================
       RESET
       =================================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ===================================================
       APPLE JAPAN DESIGN TOKENS (利用者側)
       =================================================== */
    :root {
      --apple-text-primary:    #1d1d1f;
      --apple-text-secondary:  #6e6e73;
      --apple-text-on-dark:    #f5f5f7;
      --apple-bg:              #ffffff;
      --apple-section-bg:      #f5f5f7;
      --apple-hero-bg:         #000000;
      --apple-blue:            #0071e3;
      --apple-link-blue:       #0066cc;
      --apple-nav-bg:          rgba(0,0,0,0.8);
      --apple-font:
        "SF Pro JP","SF Pro Display","SF Pro Icons",
        "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",
        メイリオ,Meiryo,"ＭＳ Ｐゴシック",
        "Helvetica Neue",Helvetica,Arial,sans-serif;
      --apple-max-width:       1260px;
      --apple-card-shadow:     rgba(0,0,0,0.22) 3px 5px 30px 0px;
    }

    /* ===================================================
       SMARTHR DESIGN TOKENS (管理者側)
       =================================================== */
    @font-face { font-family: AdjustedYuGothic; font-weight:400; src:local("Yu Gothic Medium"); }
    @font-face { font-family: AdjustedYuGothic; font-weight:700; src:local("Yu Gothic Bold"); }

    :root {
      --shr-font: AdjustedYuGothic,"Yu Gothic",YuGothic,"Hiragino Sans",sans-serif;
      --shr-primary:       #0077c7;
      --shr-text:          #23221e;
      --shr-text-sub:      #706d65;
      --shr-bg:            #f8f7f6;
      --shr-surface:       #ffffff;
      --shr-table-header:  #edebe8;
      --shr-border:        #d6d3d0;
      --shr-danger:        #e01e5a;
      --shr-warning:       #ffcc17;
      --shr-success:       #00c4a7;
    }

    /* ===================================================
       GLOBAL
       =================================================== */
    body { min-height:100vh; overflow-x:hidden; }
    [x-cloak] { display:none !important; }

    /* ===================================================
       MODE TOGGLE BAR
       =================================================== */
    .mode-bar {
      position: fixed; top:0; left:0; right:0;
      z-index: 9999;
      height: 40px;
      background: #111;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 24px;
      gap: 12px;
    }
    .mode-bar span {
      color: #888; font-size:12px;
      font-family: -apple-system,sans-serif;
    }
    .mode-toggle {
      display: flex;
      background: #2a2a2a;
      border: 1px solid #444;
      border-radius: 20px;
      padding: 3px;
      cursor: pointer;
    }
    .mt-opt {
      padding: 4px 14px;
      border-radius: 16px;
      font-size: 12px;
      font-family: -apple-system,sans-serif;
      color: #888;
      transition: all 0.2s;
      white-space: nowrap;
      cursor: pointer;
    }
    .mt-opt.user  { background: #0071e3; color:#fff; }
    .mt-opt.admin { background: #0077c7; color:#fff; }

    /* ===================================================
       APPLE WORLD
       =================================================== */
    .apple-world {
      padding-top: 0;
      font-family: var(--apple-font);
      color: var(--apple-text-primary);
      background: var(--apple-bg);
    }

    /* Apple Nav */
    .apple-nav {
      position: sticky; top:0; z-index:1000;
      height: 44px;
      background: rgba(0,0,0,0.8);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      display: flex; align-items: center; justify-content: center;
    }
    .apple-nav-inner {
      max-width: var(--apple-max-width);
      width: 100%;
      display: flex; align-items:center; justify-content:space-between;
      padding: 0 22px;
    }
    .apple-nav-logo {
      text-decoration: none; cursor:pointer;
      display:flex; align-items:center;
    }
    .apple-nav-logo img {
      height: 26px; width: auto; display:block;
    }
    .apple-nav-links {
      display:flex; align-items:center; gap:22px; list-style:none;
    }
    .apple-nav-links a {
      color: rgba(255,255,255,0.75);
      text-decoration:none; font-size:12px; cursor:pointer;
      transition: color 0.15s;
    }
    .apple-nav-links a:hover,
    .apple-nav-links a.active { color:#fff; }
    .apple-nav-cta {
      background: var(--apple-blue); color:#fff;
      border:none; border-radius:980px;
      padding: 5px 14px; font-size:12px; cursor:pointer;
      transition: opacity 0.15s;
    }
    .apple-nav-cta:hover { opacity:0.85; }

    /* Apple Pages */
    .apple-page { display:none; }
    .apple-page.active {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 40px); /* subtract mode-bar */
    }
    .apple-page.active > footer { margin-top: auto; }

    /* Apple Buttons */
    .apple-btn-primary {
      background: var(--apple-blue); color:#fff;
      border:none; border-radius:980px;
      padding: 10px 26px; font-size:17px;
      font-family: var(--apple-font); font-weight:400;
      letter-spacing:-0.357px; cursor:pointer;
      text-decoration:none; display:inline-block;
      transition: opacity 0.15s;
    }
    .apple-btn-primary:hover { opacity:0.85; }
    .apple-btn-primary.sm { padding:6px 16px; font-size:13px; white-space:nowrap; }

    .apple-btn-outline {
      background: transparent; color:#2997ff;
      border: 1px solid #2997ff; border-radius:980px;
      padding: 10px 26px; font-size:17px;
      font-family: var(--apple-font); font-weight:400;
      letter-spacing:-0.357px; cursor:pointer;
      text-decoration:none; display:inline-block;
      transition: opacity 0.15s;
    }
    .apple-btn-outline:hover { opacity:0.75; }
    .apple-btn-outline.sm { padding:6px 16px; font-size:13px; }

    .apple-btn-outline-blue {
      background: transparent; color: var(--apple-blue);
      border: 1.5px solid var(--apple-blue); border-radius:980px;
      padding: 10px 26px; font-size:17px;
      font-family: var(--apple-font); font-weight:400;
      letter-spacing:-0.357px; cursor:pointer;
      text-decoration:none; display:inline-block;
      transition: background .15s, color .15s;
      white-space:nowrap;
    }
    .apple-btn-outline-blue:hover { background:var(--apple-blue); color:#fff; }
    .apple-btn-outline-blue.sm { padding:6px 16px; font-size:13px; }

    /* Apple Sections */
    .apple-section { padding: 80px 22px; }
    .apple-section-white { background: var(--apple-bg); }
    .apple-section-gray  { background: var(--apple-section-bg); }
    .apple-section-inner {
      max-width: var(--apple-max-width); margin:0 auto;
    }
    .apple-section-title {
      font-size:40px; font-weight:600;
      line-height:1.10; color: var(--apple-text-primary);
      text-align:center; margin-bottom:8px;
    }
    .apple-section-subtitle {
      font-size:21px; font-weight:400;
      color: var(--apple-text-secondary);
      text-align:center; margin-bottom:48px;
    }

    /* ===================================================
       SCREEN 1: HERO
       =================================================== */
    .apple-hero {
      background: var(--apple-hero-bg);
      min-height: calc(100vh - 84px);
      display:flex; align-items:center; justify-content:center;
      text-align:center; padding:80px 22px;
    }
    .hero-facility-img {
      width: calc(100% + 44px);
      margin: 40px -22px 40px;
      height: 440px;
      object-fit: cover;
      object-position: center 30%;
      display: block;
      border-radius: 14px;
    }
    .apple-hero-eyebrow {
      color: var(--apple-blue);
      font-size:17px; letter-spacing:-0.357px; margin-bottom:12px;
    }
    .apple-hero-title {
      font-size:64px; font-weight:700;
      line-height:1.0; letter-spacing:-1px;
      color: var(--apple-text-on-dark);
      margin-bottom:16px;
    }
    .apple-hero-sub {
      font-size:24px; font-weight:400; line-height:1.4;
      color: rgba(245,245,247,0.72);
      margin-bottom:48px;
    }
    .apple-hero-actions {
      display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
      margin-bottom:80px;
    }
    .hero-area-cards {
      display:grid; grid-template-columns:1fr 1fr; gap:20px;
      max-width:760px; margin:0 auto;
    }
    .hero-area-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius:18px;
      padding: 28px 24px;
      text-align:left;
    }
    .hero-area-card-label {
      color: var(--apple-blue);
      font-size:12px; font-weight:600; letter-spacing:0.5px;
      text-transform:uppercase; margin-bottom:8px;
    }
    .hero-area-card-name {
      color:#fff; font-size:20px; font-weight:600;
      margin-bottom:8px;
    }
    .hero-area-card-desc {
      color: rgba(245,245,247,0.55);
      font-size:14px; line-height:1.5;
    }

    /* ===================================================
       SCREEN 2 & 3: SPACE LIST
       =================================================== */
    .space-tabs {
      display:flex; gap:0;
      border-bottom: 1px solid #e0e0e5;
      margin-bottom:32px;
    }
    .space-tab {
      padding: 12px 24px;
      font-size:15px; font-weight:500;
      color: var(--apple-text-secondary);
      border-bottom: 2px solid transparent;
      cursor:pointer; transition: all 0.2s;
      white-space:nowrap;
    }
    .space-tab.active {
      color: var(--apple-blue);
      border-bottom-color: var(--apple-blue);
    }
    .filter-bar {
      display:flex; gap:8px; flex-wrap:wrap;
      margin-bottom:32px;
    }
    .filter-btn {
      padding: 7px 16px;
      border-radius:980px;
      border: 1px solid #d0d0d5;
      background: #fff;
      font-size:14px; color: var(--apple-text-secondary);
      cursor:pointer; transition:all 0.2s;
      font-family: var(--apple-font);
    }
    .filter-btn.active {
      background: var(--apple-text-primary);
      color:#fff; border-color: var(--apple-text-primary);
    }
    .space-grid {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:24px;
    }
    @media(max-width:1023px){
      .space-grid { grid-template-columns: repeat(2, 1fr); gap:18px; }
    }
    @media(max-width:680px){
      .space-grid { grid-template-columns: 1fr; }
    }
    .space-card {
      background:#fff;
      border-radius:18px;
      box-shadow: var(--apple-card-shadow);
      overflow:hidden;
      transition: transform 0.2s;
    }
    .space-card:hover { transform: translateY(-4px); }
    .space-card-img {
      width:100%; height:200px;
      object-fit:cover; display:block;
    }
    .space-card-body { padding:20px; }
    .space-card-top {
      display:flex; justify-content:space-between; align-items:flex-start;
      margin-bottom:6px;
    }
    .space-card-name {
      font-size:17px; font-weight:600;
      color: var(--apple-text-primary);
      line-height:1.3;
    }
    .space-badge {
      background: var(--apple-blue);
      color:#fff; font-size:11px; font-weight:600;
      padding: 3px 10px; border-radius:980px;
      white-space:nowrap; flex-shrink:0; margin-left:8px;
    }
    .space-badge.outdoor { background:#34c759; }
    .space-card-area {
      font-size:13px; color: var(--apple-text-secondary);
      margin-bottom:8px;
    }
    .space-card-meta {
      display:flex; align-items:center; gap:12px;
      font-size:13px; color: var(--apple-text-secondary);
      margin-bottom:16px;
    }
    .space-price-badge {
      display:inline-block;
      background: var(--apple-section-bg);
      color: var(--apple-text-primary);
      font-size:14px; font-weight:600;
      padding: 4px 12px; border-radius:980px;
    }
    .space-card-notice {
      background: #fff8ed;
      border: 1px solid #ffe0a0;
      border-radius:10px;
      padding: 10px 14px;
      font-size:12px; color:#8a6500; line-height:1.5;
      margin-bottom:14px;
    }
    .space-card-footer {
      display:flex; justify-content:space-between; align-items:center;
    }

    /* ===================================================
       SCREEN 4 & 5: BOOKING FORM
       =================================================== */
    .booking-layout {
      display:grid;
      grid-template-columns: 1fr 340px;
      gap:40px; align-items:start;
    }
    .booking-stepper {
      display:flex; align-items:center; gap:0;
      margin-bottom:40px;
    }
    .stepper-step {
      display:flex; align-items:center; gap:8px;
      font-size:14px; color: var(--apple-text-secondary);
    }
    .stepper-step.active { color: var(--apple-blue); }
    .stepper-step.done { color: var(--apple-text-secondary); }
    .stepper-num {
      width:28px; height:28px;
      border-radius:50%;
      border: 2px solid currentColor;
      display:flex; align-items:center; justify-content:center;
      font-size:13px; font-weight:600; flex-shrink:0;
    }
    .stepper-step.active .stepper-num {
      background: var(--apple-blue); border-color: var(--apple-blue); color:#fff;
    }
    .stepper-step.done .stepper-num {
      background: var(--apple-text-secondary); color:#fff;
    }
    .stepper-line {
      flex:1; height:1px;
      background: #e0e0e5;
      margin: 0 12px;
    }

    .booking-section-title {
      font-size:24px; font-weight:600;
      color: var(--apple-text-primary);
      margin-bottom:24px;
    }
    .space-gallery { margin-bottom:28px; }
    .space-gallery-main {
      width:100%; border-radius:12px; overflow:hidden; margin-bottom:8px;
      background:#f0f0f0;
    }
    .space-gallery-main-img {
      width:100%; height:280px; object-fit:cover; display:block;
    }
    .space-gallery-thumbs { display:flex; gap:8px; }
    .space-gallery-thumb {
      width:80px; height:60px; object-fit:cover; border-radius:7px;
      cursor:pointer; opacity:0.65; border:2px solid transparent;
      transition:opacity .2s, border-color .2s;
      flex-shrink:0;
    }
    .space-gallery-thumb:hover   { opacity:1; }
    .space-gallery-thumb.active  { opacity:1; border-color:var(--apple-blue); }

    /* Calendar */
    .cal-month-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:16px;
    }
    .cal-month-label {
      font-size:17px; font-weight:600;
      color: var(--apple-text-primary);
    }
    .cal-nav-btn {
      width:32px; height:32px;
      background:none; border:1px solid #d0d0d5;
      border-radius:50%; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      font-size:16px; color: var(--apple-text-secondary);
      transition: all 0.15s;
    }
    .cal-nav-btn:hover { background: var(--apple-section-bg); }
    .cal-grid {
      display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
    }
    .cal-day-label {
      text-align:center; font-size:12px;
      color: var(--apple-text-secondary); padding:8px 0;
    }
    .cal-day {
      aspect-ratio:1; display:flex; align-items:center; justify-content:center;
      font-size:15px; border-radius:50%; cursor:pointer;
      transition:all 0.15s;
    }
    .cal-day:hover { background: var(--apple-section-bg); }
    .cal-day.today {
      color: var(--apple-blue); font-weight:600;
    }
    .cal-day.selected {
      background: var(--apple-blue); color:#fff; font-weight:600;
    }
    .cal-day.booked {
      color: var(--apple-text-secondary);
      text-decoration: line-through; cursor:not-allowed;
      opacity:0.4;
    }
    .cal-day.empty { cursor:default; }
    .cal-day.past  { color:var(--apple-text-secondary); opacity:0.3; cursor:not-allowed; }
    .cal-day.past:hover { background:none; }

    /* Time slots */
    .time-slots {
      display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
      margin-top:24px;
    }
    .time-slot {
      padding: 10px 8px; text-align:center;
      border: 1px solid #d0d0d5; border-radius:10px;
      font-size:14px; cursor:pointer; transition:all 0.15s;
      color: var(--apple-text-primary);
      background:#fff;
    }
    .time-slot:hover { border-color: var(--apple-blue); color: var(--apple-blue); }
    .time-slot.selected {
      background: var(--apple-blue); color:#fff; border-color: var(--apple-blue);
    }
    .time-slot.booked {
      background: var(--apple-section-bg);
      color: var(--apple-text-secondary);
      cursor:not-allowed; opacity:0.5;
    }
    .time-slot.buffer {
      background: #fff8e1;
      color: #b8860b;
      cursor:not-allowed;
      font-size:11px;
      border-color: #ffe082;
    }

    /* All-day badge */
    .allday-badge {
      display:inline-flex; align-items:center; gap:6px;
      background: rgba(0,113,227,0.1);
      color: var(--apple-blue);
      font-size:14px; font-weight:600;
      padding: 8px 16px; border-radius:980px;
      margin-top:16px;
    }

    /* Booking sidebar */
    .booking-sidebar {
      background: var(--apple-section-bg);
      border-radius:18px;
      padding: 28px;
      position: sticky; top:108px;
    }
    .sidebar-title {
      font-size:17px; font-weight:600;
      margin-bottom:20px;
      color: var(--apple-text-primary);
    }
    .sidebar-space-name {
      font-size:15px; font-weight:600;
      color: var(--apple-text-primary); margin-bottom:4px;
    }
    .sidebar-space-area {
      font-size:13px; color: var(--apple-text-secondary);
      margin-bottom:20px;
    }
    .sidebar-row {
      display:flex; justify-content:space-between;
      font-size:14px; padding:10px 0;
      border-bottom:1px solid #e0e0e5;
      color: var(--apple-text-secondary);
    }
    .sidebar-row:last-of-type { border-bottom:none; }
    .sidebar-total {
      display:flex; justify-content:space-between;
      font-size:17px; font-weight:600;
      padding-top:16px; margin-top:4px;
      border-top: 1px solid #d0d0d5;
      color: var(--apple-text-primary);
    }

    /* Purpose input */
    .booking-label {
      display:block; font-size:14px; font-weight:600;
      color: var(--apple-text-primary); margin-bottom:8px;
    }
    .booking-input, .booking-textarea, .booking-select {
      width:100%;
      border: 1px solid #d0d0d5;
      border-radius:12px;
      padding: 12px 16px;
      font-size:15px;
      font-family: var(--apple-font);
      color: var(--apple-text-primary);
      background:#fff;
      transition: border-color 0.15s;
      margin-bottom:20px;
    }
    .booking-input:focus,
    .booking-textarea:focus,
    .booking-select:focus {
      outline:none; border-color: var(--apple-blue);
    }
    .booking-textarea { resize:vertical; min-height:120px; }
    .booking-input.error { border-color:#e74c3c; }

    /* ===================================================
       SCREEN 6: CONSULTATION FORM
       =================================================== */
    .consult-form-wrap {
      max-width:680px; margin:0 auto;
    }
    .form-group { margin-bottom:24px; }
    .form-row {
      display:grid; grid-template-columns:1fr 1fr; gap:16px;
    }

    /* Toast */
    .toast {
      position:fixed; bottom:32px; left:50%; transform:translateX(-50%);
      background:#1d1d1f; color:#fff;
      padding: 14px 28px; border-radius:980px;
      font-size:15px; z-index:9000;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
      animation: toastIn 0.3s ease;
    }
    @keyframes toastIn {
      from { opacity:0; transform:translateX(-50%) translateY(16px); }
      to   { opacity:1; transform:translateX(-50%) translateY(0); }
    }

    /* ===================================================
       SCREEN 7: MY PAGE
       =================================================== */
    .mypage-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:32px;
    }
    .mypage-greeting {
      font-size:28px; font-weight:600;
      color: var(--apple-text-primary);
    }
    .apple-table {
      width:100%; border-collapse:collapse;
      font-size:14px;
    }
    .apple-table th {
      text-align:left; padding:12px 16px;
      background: var(--apple-section-bg);
      color: var(--apple-text-secondary);
      font-weight:500; font-size:13px;
      border-bottom:1px solid #e0e0e5;
    }
    .apple-table td {
      padding:14px 16px;
      border-bottom:1px solid #f0f0f2;
      color: var(--apple-text-primary);
      vertical-align:middle;
    }
    .apple-table tr:last-child td { border-bottom:none; }
    .status-badge {
      display:inline-block;
      padding: 3px 10px; border-radius:980px;
      font-size:12px; font-weight:600;
    }
    .status-pending  { background:#fff5e0; color:#8a5000; }
    .status-approved { background:#e9f9ee; color:#1a7f37; }
    .status-consult  { background:#eef3ff; color:#1a47bc; }
    .status-settled  { background:#e9f9ee; color:#1a7f37; }
    .type-badge {
      display:inline-block;
      padding: 2px 8px; border-radius:4px;
      font-size:11px; font-weight:600;
      background: var(--apple-section-bg);
      color: var(--apple-text-secondary);
    }
    .type-instant { background:rgba(0,113,227,0.1); color:#0055b3; }
    .type-consult  { background:rgba(52,199,89,0.1); color:#1a7f37; }

    /* ===================================================
       SMARTHR WORLD (管理者)
       =================================================== */
    .shr-world {
      padding-top:0;
      font-family: var(--shr-font);
      color: var(--shr-text);
      background: var(--shr-bg);
      min-height:100vh;
    }
    .shr-nav {
      position:sticky; top:0; z-index:1000;
      height:56px;
      background:#fff;
      border-bottom:1px solid var(--shr-border);
      display:flex; align-items:center;
      padding:0 24px;
      gap:24px;
    }
    .shr-nav-logo {
      font-size:16px; font-weight:700;
      color: var(--shr-primary); margin-right:16px;
      letter-spacing:-0.3px;
    }
    .shr-nav-links {
      display:flex; gap:4px; list-style:none;
    }
    .shr-nav-links a {
      padding:6px 14px;
      border-radius:6px;
      font-size:14px;
      color: var(--shr-text-sub);
      text-decoration:none; cursor:pointer;
      transition:all 0.15s;
    }
    .shr-nav-links a:hover { background: var(--shr-bg); color: var(--shr-text); }
    .shr-nav-links a.active { background: var(--shr-bg); color: var(--shr-primary); font-weight:600; }

    .shr-page { display:none; }
    .shr-page.active { display:block; }

    .shr-content { padding:32px 24px; max-width:1320px; margin:0 auto; }
    .shr-page-title {
      font-size:20px; font-weight:700;
      color: var(--shr-text); margin-bottom:24px;
    }

    /* KPI Cards */
    .kpi-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px; margin-bottom:32px;
    }
    .kpi-card {
      background:#fff;
      border:1px solid var(--shr-border);
      border-radius:8px;
      padding:20px 24px;
    }
    .kpi-label {
      font-size:13px; color: var(--shr-text-sub);
      margin-bottom:8px;
    }
    .kpi-value {
      font-size:28px; font-weight:700;
      color: var(--shr-text); line-height:1;
      margin-bottom:4px;
    }
    .kpi-sub {
      font-size:12px; color: var(--shr-text-sub);
    }
    .kpi-accent { border-top:3px solid var(--shr-primary); }
    .kpi-warn   { border-top:3px solid var(--shr-warning); }
    .kpi-danger { border-top:3px solid var(--shr-danger); }
    .kpi-ok     { border-top:3px solid var(--shr-success); }

    /* Occupancy bars */
    .occ-section {
      background:#fff;
      border:1px solid var(--shr-border);
      border-radius:8px;
      padding:24px;
      margin-bottom:32px;
    }
    .occ-title {
      font-size:15px; font-weight:700;
      color: var(--shr-text); margin-bottom:20px;
    }
    .occ-row {
      display:grid; grid-template-columns:180px 1fr 60px;
      align-items:center; gap:12px; margin-bottom:12px;
    }
    .occ-name { font-size:13px; color: var(--shr-text); }
    .occ-bar-wrap {
      height:10px; background: var(--shr-bg);
      border-radius:5px; overflow:hidden;
    }
    .occ-bar {
      height:100%; border-radius:5px;
      background: var(--shr-primary);
      transition: width 0.4s ease;
    }
    .occ-pct { font-size:13px; font-weight:600; color: var(--shr-text); text-align:right; }

    /* SmartHR Tables */
    .shr-card {
      background:#fff;
      border:1px solid var(--shr-border);
      border-radius:8px;
      overflow:hidden;
      margin-bottom:24px;
    }
    .shr-card-header {
      padding:16px 20px;
      border-bottom:1px solid var(--shr-border);
      font-size:15px; font-weight:700; color: var(--shr-text);
    }
    .shr-table {
      width:100%; border-collapse:collapse;
      font-size:13px;
    }
    .shr-table th {
      text-align:left; padding:10px 16px;
      background: var(--shr-table-header);
      color: var(--shr-text-sub);
      font-weight:600; font-size:12px;
      border-bottom:1px solid var(--shr-border);
      white-space:nowrap;
    }
    .shr-table td {
      padding:12px 16px;
      border-bottom:1px solid var(--shr-border);
      color: var(--shr-text);
      vertical-align:middle;
    }
    .shr-table tr:last-child td { border-bottom:none; }
    .shr-table tr:hover td { background:#fafaf9; }

    /* SmartHR Status Badges */
    .shr-badge {
      display:inline-block;
      padding:3px 10px; border-radius:4px;
      font-size:11px; font-weight:700;
      white-space:nowrap;
    }
    .shr-badge-pending   { background:#fff8e1; color:#8a6000; }
    .shr-badge-approved  { background:#e8f5e9; color:#2e7d32; }
    .shr-badge-rejected  { background:#fce4ec; color:#c62828; }
    .shr-badge-consulting{ background:#e3f2fd; color:#1565c0; }
    .shr-badge-quoted    { background:#f3e5f5; color:#6a1b9a; }
    .shr-badge-settled   { background:#e8f5e9; color:#2e7d32; }
    .shr-badge-failed    { background:#fce4ec; color:#c62828; }

    .shr-type-instant { background:rgba(0,119,199,0.1); color:#0055a0; border-radius:4px; padding:2px 8px; font-size:11px; font-weight:700; }
    .shr-type-consult { background:rgba(0,196,167,0.12); color:#00796b; border-radius:4px; padding:2px 8px; font-size:11px; font-weight:700; }

    /* SmartHR Buttons */
    .shr-btn {
      padding:6px 14px; border-radius:6px;
      font-size:13px; font-weight:600;
      cursor:pointer; border:none;
      font-family: var(--shr-font);
      transition:all 0.15s;
    }
    .shr-btn-primary { background: var(--shr-primary); color:#fff; }
    .shr-btn-primary:hover { opacity:0.85; }
    .shr-btn-danger  { background:#fff; color: var(--shr-danger); border:1px solid var(--shr-danger); }
    .shr-btn-danger:hover { background: var(--shr-danger); color:#fff; }
    .shr-btn-outline { background:#fff; color: var(--shr-text); border:1px solid var(--shr-border); }
    .shr-btn-outline:hover { background: var(--shr-bg); }

    /* SmartHR Tabs */
    .shr-tabs {
      display:flex; border-bottom:1px solid var(--shr-border);
      margin-bottom:24px;
    }
    .shr-tab {
      padding:10px 20px; font-size:14px; font-weight:600;
      color: var(--shr-text-sub);
      border-bottom:2px solid transparent;
      cursor:pointer; transition:all 0.2s;
    }
    .shr-tab.active { color: var(--shr-primary); border-bottom-color: var(--shr-primary); }

    .shr-select {
      padding:6px 12px; border-radius:6px;
      border:1px solid var(--shr-border);
      font-size:13px; font-family: var(--shr-font);
      color: var(--shr-text); background:#fff;
      cursor:pointer;
    }

    /* ===================================================
       AMENITY BADGES (付帯設備)
       =================================================== */
    .amenity-badges {
      display:flex; flex-wrap:wrap; gap:6px;
      margin-bottom:14px;
    }
    .amenity-badge {
      background:#f5f5f7;
      color: var(--apple-text-secondary);
      font-size:11px;
      border-radius:20px;
      padding:2px 8px;
      white-space:nowrap;
    }

    /* ===================================================
       EQUIPMENT SELECTION (備品選択 Step 2)
       =================================================== */
    .equip-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
      margin-bottom:24px;
    }
    .equip-card {
      background:#fff;
      border:2px solid #e0e0e5;
      border-radius:16px;
      padding:20px 16px;
      text-align:center;
      transition: border-color 0.15s, box-shadow 0.15s;
      position:relative;
    }
    .equip-card.selected {
      border-color: var(--apple-blue);
      box-shadow: 0 0 0 1px var(--apple-blue);
    }
    .equip-card.soldout {
      opacity:0.45;
      pointer-events:none;
    }
    .equip-soldout-badge {
      position:absolute; top:10px; right:10px;
      background:#8e8e93; color:#fff;
      font-size:10px; font-weight:600;
      padding:2px 8px; border-radius:980px;
    }
    .equip-icon {
      width:48px; height:48px;
      margin:0 auto 10px;
      color: var(--apple-text-secondary);
    }
    .equip-name {
      font-size:14px; font-weight:600;
      color: var(--apple-text-primary);
      margin-bottom:4px;
    }
    .equip-price {
      font-size:13px;
      color: var(--apple-blue);
      margin-bottom:4px;
    }
    .equip-stock {
      font-size:11px;
      color: var(--apple-text-secondary);
      margin-bottom:12px;
    }
    .equip-stock.low { color:#ff6b35; }
    .equip-counter {
      display:flex; align-items:center; justify-content:center; gap:10px;
    }
    .equip-btn {
      width:28px; height:28px;
      border-radius:50%;
      border:1px solid #d0d0d5;
      background:#fff;
      font-size:16px; line-height:1;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      color: var(--apple-text-primary);
      transition:all 0.15s;
    }
    .equip-btn:hover:not(:disabled) { background: var(--apple-section-bg); }
    .equip-btn:disabled { opacity:0.3; cursor:not-allowed; }
    .equip-qty {
      font-size:17px; font-weight:600;
      color: var(--apple-text-primary);
      min-width:20px; text-align:center;
    }

    /* Equipment sidebar rows */
    .equip-summary-item {
      display:flex; justify-content:space-between;
      font-size:13px; padding:6px 0;
      color: var(--apple-text-secondary);
    }
    .sidebar-section-label {
      font-size:12px; font-weight:600;
      color: var(--apple-text-secondary);
      text-transform:uppercase; letter-spacing:0.5px;
      margin:16px 0 8px;
    }
    .sidebar-divider {
      border:none; border-top:1px solid #e0e0e5;
      margin:12px 0;
    }

    /* Confirmation summary box */
    .confirm-box {
      background: var(--apple-section-bg);
      border-radius:16px;
      padding:24px;
      margin-bottom:24px;
    }
    .confirm-box-title {
      font-size:13px; font-weight:700;
      color: var(--apple-text-secondary);
      text-transform:uppercase; letter-spacing:0.5px;
      margin-bottom:12px;
    }
    .confirm-row {
      display:flex; justify-content:space-between;
      font-size:15px; padding:6px 0;
      border-bottom:1px solid #e0e0e5;
      color: var(--apple-text-primary);
    }
    .confirm-row:last-child { border-bottom:none; }
    .confirm-total-row {
      display:flex; justify-content:space-between;
      font-size:18px; font-weight:700;
      padding-top:14px; margin-top:4px;
      border-top:2px solid #d0d0d5;
      color: var(--apple-text-primary);
    }
    .confirm-equip-item {
      display:flex; justify-content:space-between;
      font-size:14px; padding:5px 0;
      color: var(--apple-text-secondary);
    }
    .confirm-equip-item:last-child { margin-bottom:8px; }

    /* ===================================================
       EQUIPMENT ADMIN TABLE
       =================================================== */
    .equip-utilization-bar {
      height:8px; background: var(--shr-bg);
      border-radius:4px; overflow:hidden;
    }
    .equip-utilization-fill {
      height:100%; border-radius:4px;
      background: var(--shr-primary);
      transition: width 0.4s ease;
    }
    .equip-utilization-fill.warn { background: var(--shr-warning); }
    .equip-utilization-fill.full { background: var(--shr-danger); }

    /* ===================================================
       FOOTER
       =================================================== */
    footer {
      background:#1d1d1f; color:rgba(255,255,255,0.4);
      text-align:center; padding:20px; font-size:12px;
    }

    /* ===================================================
       RESPONSIVE
       =================================================== */
    @media (max-width:900px) {
      .booking-layout { grid-template-columns:1fr; }
      .kpi-grid { grid-template-columns:1fr 1fr; }
    }

    @media (max-width:768px) {
      /* Apple nav: リンク非表示・ロゴ+CTAのみ */
      .apple-nav-links { display:none; }
      .apple-nav-inner { padding:0 16px; }
      /* SmartHR nav: コンパクト */
      .shr-nav { padding:0 12px; gap:0; }
      .shr-nav-logo { font-size:13px; white-space:nowrap; flex-shrink:0; margin-right:8px; }
      .shr-nav-links a { font-size:12px; padding:6px 8px; white-space:nowrap; }
    }

    @media (max-width:600px) {
      /* ===== GLOBAL ===== */
      input, select, textarea { font-size:16px !important; } /* iOSズーム防止 */
      html, body    { overflow-x:hidden; max-width:100%; }   /* 横スクロール完全封じ */
      .mode-bar     { display:none; }   /* モバイルでは不要 */
      .apple-world  { padding-top:0; overflow-x:hidden; }
      .apple-nav    { top:0; }
      .apple-page.active { min-height:100vh; overflow-x:hidden; }

      /* Space tabs: 均等幅・パディング削減 */
      .space-tab    { flex:1; text-align:center; padding:10px 6px; font-size:13px; white-space:normal; word-break:keep-all; }

      /* Filter bar: 内部スクロールを確実に封じ込める */
      .filter-bar   { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:4px; width:100%; box-sizing:border-box; }

      /* ===== APPLE WORLD ===== */
      .apple-hero { padding:60px 16px 48px; }
      .apple-hero-title { font-size:30px; line-height:1.2; }
      .apple-hero-sub   { font-size:15px; }
      .hero-facility-img {
        width: calc(100% + 32px);
        margin: 28px -16px 32px;
        height: 220px;
        border-radius: 0;
      }
      .hero-area-cards  { grid-template-columns:1fr; gap:12px; }
      .apple-section    { padding:40px 16px; }
      .apple-section-inner { padding:0; }
      .apple-section-title { font-size:24px; }
      .apple-section-subtitle { font-size:14px; }

      /* Space grid */
      .space-grid       { grid-template-columns:1fr; }
      .filter-bar       { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:4px; }
      .filter-btn       { white-space:nowrap; flex-shrink:0; }

      /* Stepper */
      .booking-stepper  { margin-bottom:28px; }
      .stepper-step     { gap:4px; }
      .stepper-step span{ font-size:10px; }
      .stepper-num      { width:24px; height:24px; font-size:11px; }
      .stepper-line     { margin:0 6px; }

      /* Booking form */
      .booking-section-title { font-size:18px; }
      .booking-sidebar  { margin-top:20px; }
      .time-slots       { grid-template-columns:repeat(3,1fr); gap:6px; }
      .time-slot        { font-size:12px; padding:8px 4px; }
      .form-row         { grid-template-columns:1fr; }

      /* Equipment cart */
      .equip-grid       { grid-template-columns:1fr !important; }

      /* Confirm box */
      .confirm-box      { padding:14px; }
      .confirm-row      { font-size:13px; }
      .confirm-total-row{ font-size:15px; }

      /* Mypage table */
      .apple-table      { font-size:12px; }
      .apple-table th,
      .apple-table td   { padding:8px 8px; }

      /* ===== SMARTHR WORLD ===== */
      .shr-content      { padding:16px 12px; }
      .shr-page-title   { font-size:17px; margin-bottom:16px; }
      .kpi-grid         { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
      .kpi-card         { padding:14px 14px; }
      .kpi-value        { font-size:22px; }
      .kpi-label        { font-size:12px; }

      /* shr-table: カードレイアウト変換 */
      .mob-hide         { display:none !important; }
      .shr-card         { background:transparent; border:none; overflow:visible; }
      .shr-card-header  { background:#fff; border:1px solid var(--shr-border); border-radius:8px 8px 0 0;
                          flex-direction:column !important; align-items:flex-start !important; gap:10px; }
      .shr-card-header input { width:100% !important; }
      .shr-table        { display:block; }
      .shr-table thead  { display:none; }
      .shr-table tbody  { display:block; }
      .shr-table tbody tr {
        display:block;
        background:#fff;
        border:1px solid var(--shr-border);
        border-radius:8px;
        margin-bottom:10px;
        padding:4px 14px;
      }
      .shr-table tbody td {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:8px 0;
        border-bottom:1px solid var(--shr-bg);
        font-size:13px;
        gap:8px;
      }
      .shr-table tbody td:last-child { border-bottom:none; }
      .shr-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size:11px; font-weight:700;
        color:var(--shr-text-sub);
        flex-shrink:0; white-space:nowrap;
      }

      /* OCC bars */
      .occ-row          { grid-template-columns:1fr 1fr 44px; }
      .occ-section      { padding:14px; }
      .occ-name         { font-size:12px; }

      /* Tabs */
      .shr-tab          { font-size:13px; padding:8px 14px; }

      /* ===== USER-SIDE MOBILE FIXES ===== */

      /* Stepper: 数字のみ、ラベル非表示 */
      .stepper-step span    { display:none !important; }
      .booking-stepper      { gap:0; justify-content:center; }
      .stepper-num          { width:28px; height:28px; font-size:12px; }
      .stepper-line         { flex:1; margin:0 4px; }

      /* 2つの予約スタイル: 1列 */
      .booking-style-grid   { grid-template-columns:1fr !important; gap:16px !important; }

      /* マイページヘッダー: 縦積み */
      .mypage-header        { flex-direction:column; align-items:flex-start; gap:14px; }
      .mypage-header > button { align-self:stretch; text-align:center; white-space:nowrap; }
      .mypage-greeting      { font-size:22px; }

      /* 予約確認ステップのボタン行 */
      .confirm-btn-row      { flex-direction:column-reverse; gap:10px; }
      .confirm-btn-back     { width:100% !important; padding:12px !important; }
      .confirm-btn-next     { width:100% !important; padding:14px !important; }

      /* スペース詳細モバイル */
      .space-detail-layout  { padding:0 16px; }
      .space-detail-name    { font-size:24px; }

      /* マイページ請求書テーブル: カードレイアウト変換 */
      .invoice-list-wrap    { overflow-x:visible; }
      .invoice-table        { display:block; }
      .invoice-table thead  { display:none; }
      .invoice-table tbody  { display:block; }
      .invoice-table tbody tr {
        display:block;
        background:#fff;
        border-radius:14px;
        box-shadow:0 1px 6px rgba(0,0,0,.07);
        margin-bottom:12px;
        padding:6px 16px;
      }
      .invoice-table tbody td {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:9px 0;
        border-bottom:1px solid #f2f2f7;
        font-size:14px;
      }
      .invoice-table tbody td:last-child { border-bottom:none; }
      .invoice-table tbody td[data-label]::before {
        content:attr(data-label);
        font-size:12px; font-weight:600;
        color:var(--apple-text-secondary);
        flex-shrink:0; margin-right:8px;
      }
      .inv-hide-sm          { display:none !important; }

      /* スクロール時にスティッキーナビに隠れないようにオフセット */
      html                  { scroll-padding-top:88px; }
    }

/* =====================================================
   BOOKING STYLE GRID (トップページ 2つの予約スタイル)
   ===================================================== */
.booking-style-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:32px; max-width:900px; margin:0 auto;
}

/* =====================================================
   CONFIRM BUTTON ROW (予約確認ステップ3)
   ===================================================== */
.confirm-btn-row {
  display:flex; gap:12px; margin-top:8px;
}
.confirm-btn-back { flex:1; padding:14px; }
.confirm-btn-next { flex:2; padding:14px; }

/* =====================================================
   MYPAGE BOOKING CARDS
   ===================================================== */
.mypage-booking-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.mypage-booking-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--apple-card-shadow);
  padding: 20px 24px;
  border: 1.5px solid transparent;
  transition: border-color .2s;
}
.mypage-booking-card.cancelled {
  opacity: .6;
  border-color: #e5e5ea;
}
.mypage-booking-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mypage-booking-space {
  font-size: 17px;
  font-weight: 600;
  color: var(--apple-text-primary);
  margin-bottom: 6px;
}
.mypage-booking-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: var(--apple-text-secondary);
  margin-bottom: 2px;
}
.mypage-booking-card-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f2f2f7;
}
.cancel-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #ff3b30;
  font-family: var(--apple-font);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cancel-link:hover { opacity: .75; }
.mypage-cancelled-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f2f2f7;
  font-size: 13px;
  color: #8e8e93;
}

/* キャンセルポリシーセクション */
.cancel-policy-section {
  background: #f2f2f7;
  border-radius: 16px;
  padding: 24px 28px;
  margin-top: 8px;
}
.cancel-policy-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--apple-text-primary);
  margin-bottom: 16px;
}
.cancel-policy-table { margin-bottom: 14px; }
.cp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #e5e5ea;
  color: var(--apple-text-secondary);
}
.cp-row:last-child { border-bottom: none; }
.cp-header {
  font-size: 12px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 8px;
}
.cp-rate { font-weight: 600; font-size: 14px; }
.cp-full    { color: #34c759; }
.cp-half    { color: #ff9500; }
.cp-partial { color: #ff9500; }
.cp-none    { color: #ff3b30; }
.cancel-policy-note {
  font-size: 12px;
  color: #8e8e93;
  line-height: 1.6;
  margin: 0;
}

/* =====================================================
   CANCEL MODAL
   ===================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--apple-text-primary);
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #8e8e93;
  padding: 4px;
  line-height: 1;
}
.modal-booking-info {
  background: #f2f2f7;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.modal-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--apple-text-secondary);
  padding: 5px 0;
}
.modal-info-row span:first-child { color: #8e8e93; }
.modal-policy-box {
  background: #fff8f0;
  border: 1.5px solid #ff9500;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.modal-policy-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 5px 0;
  color: var(--apple-text-secondary);
}
.modal-policy-row span:first-child { color: #8e8e93; }
.modal-refund-row { padding-top: 10px; margin-top: 6px; border-top: 1px solid #ffe0b0; }
.modal-refund-amount { font-size: 20px; color: var(--apple-text-primary); }
.modal-note {
  font-size: 12px;
  color: #8e8e93;
  line-height: 1.6;
  margin-bottom: 20px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cancel-confirm-btn {
  background: #ff3b30;
  color: #fff;
  border: none;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  font-family: var(--apple-font);
  transition: opacity .15s;
}
.cancel-confirm-btn:hover { opacity: .85; }

/* ステータスバッジ追加 */
.status-cancelled {
  background: #f2f2f7;
  color: #8e8e93;
}

/* ===== ADMIN ADDITIONS ===== */

.shr-badge-cancelled  { background:#fce4ec; color:#c62828; }
.shr-badge-refund-pending { background:#fff8e1; color:#8a6000; }
.shr-badge-refund-done    { background:#e8f5e9; color:#2e7d32; }

/* Admin rejection modal */
.shr-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  z-index:2000;
}
.shr-modal-box {
  background:#fff; border-radius:12px;
  padding:28px 32px; max-width:440px; width:90%;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
}
.shr-modal-title { font-size:17px; font-weight:700; margin-bottom:8px; color:var(--shr-text); }
.shr-modal-body  { font-size:13px; color:var(--shr-text-sub); margin-bottom:16px; line-height:1.7; }
.shr-modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.shr-textarea {
  width:100%; padding:10px 12px;
  border:1px solid var(--shr-border); border-radius:8px;
  font-size:13px; font-family:var(--shr-font);
  resize:vertical; min-height:80px; margin-bottom:16px;
  box-sizing:border-box;
}
.shr-textarea:focus { outline:none; border-color:var(--shr-primary); }

/* Revenue chart */
.rev-chart-section {
  background:#fff; border:1px solid var(--shr-border);
  border-radius:10px; padding:20px 24px; margin-bottom:24px;
}
.rev-chart-title { font-size:13px; font-weight:600; color:var(--shr-text-sub); margin-bottom:20px; }
.rev-chart-wrap {
  display:flex; align-items:flex-end; gap:10px;
  height:180px; padding-bottom:28px; position:relative;
}
.rev-chart-wrap::after {
  content:''; position:absolute; bottom:28px; left:0; right:0;
  border-top:1px dashed var(--shr-border);
}
.rev-bar-col {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; position:relative;
}
.rev-bar {
  width:100%; border-radius:4px 4px 0 0;
  background:var(--shr-primary); opacity:.75;
  transition:opacity .15s; cursor:default;
}
.rev-bar:hover { opacity:1; }
.rev-bar-value {
  font-size:10px; font-weight:700; color:var(--shr-text);
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  white-space:nowrap;
}
.rev-bar-label {
  position:absolute; bottom:-22px;
  font-size:12px; color:var(--shr-text-sub);
}

/* Space settings toggle */
.shr-toggle {
  display:inline-flex; align-items:center; cursor:pointer; gap:6px;
  font-size:13px; user-select:none;
}
.shr-toggle input { display:none; }
.shr-toggle-track {
  width:38px; height:21px; border-radius:11px;
  background:#d1d1d6; position:relative;
  transition:background .2s; flex-shrink:0;
}
.shr-toggle input:checked ~ .shr-toggle-track { background:var(--shr-primary); }
.shr-toggle-thumb {
  position:absolute; top:2px; left:2px;
  width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .2s;
}
.shr-toggle input:checked ~ .shr-toggle-track .shr-toggle-thumb { transform:translateX(17px); }

/* Inline price edit */
.shr-price-edit { display:flex; align-items:center; gap:6px; }
.shr-price-input {
  width:84px; padding:4px 8px;
  border:1px solid var(--shr-primary); border-radius:6px;
  font-size:13px; font-family:var(--shr-font);
}
.shr-price-input:focus { outline:none; }

/* Space revenue bar */
.space-rev-list { padding:8px 20px 16px; }
.space-rev-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--shr-border);
}
.space-rev-row:last-child { border-bottom:none; }
.space-rev-rank {
  font-size:11px; font-weight:700;
  color:#fff; background:var(--shr-text-sub);
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  letter-spacing:0;
}
.space-rev-rank.rank-1 { background:var(--shr-primary); }
.space-rev-rank.rank-2 { background:#5a9fd4; }
.space-rev-rank.rank-3 { background:#7fb5d8; }
.space-rev-name {
  font-size:13px; font-weight:500;
  color:var(--shr-text);
  min-width:130px; flex-shrink:0;
}
.space-rev-bar-wrap {
  flex:1; height:12px;
  background:var(--shr-bg);
  border-radius:6px; overflow:hidden;
}
.space-rev-bar-fill {
  height:100%; border-radius:6px;
  background:var(--shr-primary);
  transition:width 0.4s ease;
}
.space-rev-amount {
  font-size:13px; font-weight:700;
  min-width:80px; text-align:right;
  color:var(--shr-text);
  white-space:nowrap;
}
.space-rev-pct { display:none; }

/* Space occupancy matrix table */
.occ-matrix { width:100%; border-collapse:collapse; font-size:13px; }
.occ-matrix th {
  padding:10px 12px; text-align:center;
  background:var(--shr-table-header);
  color:var(--shr-text-sub); font-weight:600; font-size:12px;
  border-bottom:1px solid var(--shr-border);
  white-space:nowrap;
}
.occ-matrix th.occ-space-col { text-align:left; min-width:140px; }
.occ-matrix td {
  padding:10px 12px; border-bottom:1px solid var(--shr-border);
  text-align:center; font-size:12px; font-weight:600;
}
.occ-matrix td.occ-space-name {
  text-align:left; font-weight:500; font-size:13px;
  color:var(--shr-text); white-space:nowrap;
}
.occ-matrix tr:last-child td { border-bottom:none; }
.occ-cell-high { background:#e8f5e9; color:#2e7d32; }
.occ-cell-mid  { background:#fff8e1; color:#8a6000; }
.occ-cell-low  { background:#fce4ec; color:#c62828; }

/* Nav user area */
.shr-nav-user {
  margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.shr-nav-user-name { font-size:13px; font-weight:600; color:var(--shr-text); }
.shr-nav-user-role { font-size:11px; padding:2px 8px; border-radius:4px; }

/* User management */
.shr-badge-role-admin { background:rgba(0,119,199,.1); color:var(--shr-primary); font-weight:700; }
.shr-badge-role-staff { background:#f3e5f5; color:#6a1b9a; font-weight:700; }
.user-initial {
  width:32px; height:32px; border-radius:50%;
  background:var(--shr-primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0;
}
.customer-detail-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin-bottom:20px;
}
.customer-detail-stat {
  background:var(--shr-bg); border-radius:8px; padding:12px 16px;
  text-align:center;
}
.customer-detail-stat-label { font-size:11px; color:var(--shr-text-sub); margin-bottom:4px; }
.customer-detail-stat-value { font-size:18px; font-weight:700; color:var(--shr-text); }

/* =====================================================
   HOURS. VARIANT B — Design Tokens
   ===================================================== */
:root {
  --hours-ink:      #111111;
  --hours-white:    #ffffff;
  --hours-rule:     rgba(255,255,255,.2);
  --hours-text:     #1d1d1f;
  --hours-sub:      #6e6e73;
  --hours-muted:    #8e8e93;
  --hours-line:     #e0e0e5;
  --hours-radius:   4px;
  --hours-radius-btn: 2px;
  --hours-font:     -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro JP","Helvetica Neue",Arial,"Hiragino Sans","Noto Sans JP",sans-serif;
}

/* =====================================================
   HOURS. VARIANT B — Space Card (.hc-*)
   ===================================================== */
.hc-card {
  border: 1px solid var(--hours-ink);
  border-radius: var(--hours-radius);
  overflow: hidden;
  background: var(--hours-white);
  box-shadow: none;
  transition: none;
  cursor: pointer;
}
.hc-card:hover { transform: none; }

/* 写真エリア */
.hc-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #2c2c2e;
}
.hc-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* 下端スクリム */
.hc-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(transparent, rgba(17,17,17,.55));
  z-index: 1; pointer-events: none;
}
/* バッジ共通 */
.hc-badge {
  position: absolute; z-index: 2;
  background: rgba(17,17,17,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em;
  padding: 3px 8px;
  border-radius: var(--hours-radius-btn);
}
.hc-badge-env  { top: 12px; left: 12px; }
.hc-badge-type { top: 12px; right: 12px; }

/* 黒ネームプレート帯 */
.hc-plate {
  background: var(--hours-ink);
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hc-plate-en {
  font-size: 20px; font-weight: 700;
  letter-spacing: .1em; color: #fff; line-height: 1;
  font-family: var(--hours-font);
}
.hc-plate-kana {
  font-size: 10px; letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  font-family: var(--hours-font);
}

/* 白地ボディ */
.hc-body {
  padding: 14px 16px 16px;
  background: var(--hours-white);
}
.hc-spec {
  font-size: 11px; color: var(--hours-sub);
  margin-bottom: 0;
  line-height: 1.5;
}
.hc-rule {
  border: none; border-top: 1px solid var(--hours-line);
  margin: 10px 0;
}
.hc-price {
  font-size: 20px; font-weight: 700;
  color: var(--hours-ink); line-height: 1;
}
.hc-price-unit {
  font-size: 11px; font-weight: 400;
  color: var(--hours-sub); margin-left: 4px;
}
.hc-price-label {
  font-size: 15px; font-weight: 600;
  color: var(--hours-ink); line-height: 1.3;
}
/* CTA ボタン */
.hc-cta {
  display: block; width: 100%;
  height: 38px; margin-top: 14px;
  border: none;
  border-radius: var(--hours-radius-btn);
  background: var(--hours-ink); color: #fff;
  font: 600 13px var(--hours-font);
  cursor: pointer; letter-spacing: .02em;
  transition: opacity .15s;
}
.hc-cta:hover { opacity: .85; }
.hc-cta.cs {
  background: var(--hours-white);
  border: 1px solid var(--hours-ink);
  color: var(--hours-ink);
}

/* =====================================================
   HOURS. VARIANT B — Space Detail (.hd-*)
   ===================================================== */

/* ヒーロー写真 */
.hd-hero-wrap {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: #2c2c2e;
}
.hd-hero-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hd-hero-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: linear-gradient(transparent, rgba(17,17,17,.7));
  pointer-events: none;
}

/* 黒ネームプレート（ヒーロー下端オーバーラップ） */
.hd-plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--hours-ink);
  padding: 20px 40px 24px;
  z-index: 2;
}
.hd-plate-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.hd-badge {
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em;
  padding: 3px 8px;
  border-radius: var(--hours-radius-btn);
}
.hd-roomtype {
  margin-left: auto;
  color: rgba(255,255,255,.5);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.hd-name {
  font-size: 56px; font-weight: 700;
  letter-spacing: .06em; color: #fff; line-height: 1;
  font-family: var(--hours-font);
}
.hd-kana {
  font-size: 15px; letter-spacing: .06em;
  color: rgba(255,255,255,.65);
  margin-top: 8px;
  font-family: var(--hours-font);
}

/* 本文レイアウト */
.hd-body {
  display: flex; gap: 40px;
  max-width: 1100px; margin: 40px auto 60px;
  padding: 0 24px;
  align-items: flex-start;
}
.hd-main { flex: 1; min-width: 0; }
.hd-side  { width: 320px; flex: none; position: sticky; top: 72px; }

/* 戻るリンク */
.hd-back {
  display: inline-block;
  font-size: 13px; color: var(--hours-sub);
  cursor: pointer; margin: 12px 0 0;
  background: none; border: none; padding: 0;
  font-family: var(--hours-font);
  max-width: 1100px;
  padding: 12px 24px 0;
  display: block;
}

/* 額装スペック表 */
.hd-spec-table {
  border: 1px solid var(--hours-ink);
  border-radius: var(--hours-radius);
  overflow: hidden;
}
.hd-spec-row {
  display: flex;
  border-bottom: 1px solid var(--hours-line);
}
.hd-spec-row:last-child { border-bottom: none; }
.hd-spec-key {
  width: 140px; flex: none;
  padding: 13px 16px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--hours-sub);
  background: #fafafa;
}
.hd-spec-val {
  padding: 13px 16px;
  font-size: 15px; color: var(--hours-text);
  flex: 1;
}

/* セクション */
.hd-sec { margin-top: 36px; }
.hd-sec-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hours-muted);
}
.hd-sec-rule {
  border: none; border-top: 1px solid var(--hours-line);
  margin: 10px 0 16px;
}
.hd-sec p {
  font-size: 15px; line-height: 1.7;
  letter-spacing: -.01em; color: var(--hours-text);
}
.hd-sec-note {
  font-size: 14px; color: var(--hours-sub);
  line-height: 1.8; margin: 0;
}

/* アメニティタグ */
.hd-amenities { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-amenity {
  border: 1px solid var(--hours-ink);
  background: transparent; color: var(--hours-ink);
  border-radius: var(--hours-radius-btn);
  padding: 5px 10px;
  font-size: 11px; font-weight: 600;
  font-family: var(--hours-font);
}

/* 価格サイドバー */
.hd-price-card {
  border: 1px solid var(--hours-ink);
  border-radius: var(--hours-radius);
  padding: 24px;
}
.hd-price-lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hours-muted);
}
.hd-price-rule {
  border: none; border-top: 1px solid var(--hours-line);
  margin: 14px 0;
}
.hd-price-big {
  font-size: 28px; font-weight: 700;
  color: var(--hours-ink); line-height: 1;
}
.hd-price-big-unit {
  font-size: 13px; font-weight: 400;
  color: var(--hours-sub); margin-left: 6px;
}
.hd-price-consult-label {
  font-size: 16px; font-weight: 600;
  color: var(--hours-ink); line-height: 1.4;
}

/* 空き状況グリッド */
.hd-avail-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  gap: 4px; margin-top: 8px; margin-bottom: 0;
}
.hd-avail-day { text-align: center; font-size: 11px; }
.hd-avail-day .day-label { color: var(--hours-sub); margin-bottom: 4px; font-size: 11px; }
.hd-avail-dot {
  width: 24px; height: 24px; border-radius: 50%;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
}
.hd-dot-free   { background: #f0f0f0; color: var(--hours-ink); }
.hd-dot-booked { background: #e5e5e5; color: var(--hours-muted); }
.hd-dot-today  { background: var(--hours-ink); color: #fff; }

/* 予約CTA（詳細） */
.hd-cta {
  display: block; width: 100%;
  height: 48px; margin-top: 18px;
  border: none;
  border-radius: var(--hours-radius-btn);
  background: var(--hours-ink); color: #fff;
  font: 600 15px var(--hours-font);
  cursor: pointer; letter-spacing: .02em;
  transition: opacity .15s;
}
.hd-cta:hover { opacity: .85; }
.hd-cta.cs {
  background: var(--hours-white);
  border: 1px solid var(--hours-ink);
  color: var(--hours-ink);
}
.hd-price-note {
  font-size: 11px; color: var(--hours-muted);
  text-align: center; margin-top: 10px;
}

/* =====================================================
   HOURS. VARIANT B — Responsive
   ===================================================== */
@media (max-width: 1023px) {
  .hd-side { width: 280px; }
}
@media (max-width: 900px) {
  .hd-hero-wrap { height: 300px; }
  .hd-plate { padding: 16px 20px 20px; }
  .hd-name  { font-size: 40px; }
  .hd-body  { flex-direction: column; gap: 0; padding: 0 16px; }
  .hd-side  { width: 100%; position: static; margin-top: 32px; }
}
@media (max-width: 600px) {
  .hd-hero-wrap { height: 240px; }
  .hd-plate { padding: 12px 16px 16px; }
  .hd-name  { font-size: 32px; }
  .hd-kana  { font-size: 13px; }
  .hd-body  { margin-top: 24px; }
  .hd-back  { padding: 8px 16px 0; font-size: 12px; }
  .hd-spec-key { width: 110px; font-size: 10px; padding: 10px 12px; }
  .hd-spec-val { font-size: 14px; padding: 10px 12px; }
}

/* ===== SPACE DETAIL (旧クラス — 他ページに残存する場合のフォールバック) ===== */
.space-detail-hero {
  width:100%; height:320px; object-fit:cover; display:block;
}
.space-detail-layout {
  display:grid; grid-template-columns:1fr 320px; gap:40px;
  max-width:1100px; margin:40px auto; padding:0 24px;
}
.space-detail-name {
  font-size:32px; font-weight:700; letter-spacing:-0.5px;
  color:var(--apple-text-primary); margin-bottom:8px;
}
.space-detail-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.space-detail-badge {
  padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600;
  background:var(--apple-section-bg); color:var(--apple-text-secondary);
}
.space-detail-section-title {
  font-size:13px; font-weight:700; color:var(--apple-text-secondary);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; margin-top:28px;
}
.space-detail-amenities { display:flex; flex-wrap:wrap; gap:8px; }
.space-detail-amenity {
  padding:6px 14px; background:var(--apple-section-bg);
  border-radius:20px; font-size:13px; color:var(--apple-text-primary);
}
.space-detail-price-card {
  background:#fff; border:1px solid #e5e5e5; border-radius:16px;
  padding:28px 24px; position:sticky; top:80px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.space-detail-price {
  font-size:28px; font-weight:700; color:var(--apple-text-primary);
  margin-bottom:4px;
}
.space-detail-price-unit { font-size:14px; color:var(--apple-text-secondary); margin-bottom:20px; }
.space-detail-avail-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:20px;
}
.space-detail-avail-day {
  text-align:center; font-size:10px;
}
.space-detail-avail-day .day-label { color:var(--apple-text-secondary); margin-bottom:3px; }
.space-detail-avail-dot {
  width:24px; height:24px; border-radius:50%; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700;
}
.avail-dot-free   { background:#e8f5e9; color:#2e7d32; }
.avail-dot-booked { background:#fce4ec; color:#c62828; }
.avail-dot-today  { background:var(--apple-blue); color:#fff; }
@media(max-width:900px){
  .space-detail-layout { grid-template-columns:1fr; }
  .space-detail-price-card { position:static; }
  .space-detail-hero { height:220px; }
}

/* ===== MYPAGE TABS ===== */
.mypage-tabs {
  display:flex; gap:0; border-bottom:1px solid #e5e5e5; margin-bottom:24px;
}
.mypage-tab-btn {
  padding:10px 24px; font-size:14px; font-weight:500;
  color:var(--apple-text-secondary); cursor:pointer;
  border-bottom:2px solid transparent; background:none; border-top:none;
  border-left:none; border-right:none; font-family:var(--apple-font);
  transition:color .15s;
}
.mypage-tab-btn.active { color:var(--apple-text-primary); border-bottom-color:var(--apple-text-primary); font-weight:600; }

/* Invoice badges (user side) */
.inv-badge-unpaid   { background:#fff8e1; color:#8a6000; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.inv-badge-paid     { background:#e8f5e9; color:#2e7d32; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.inv-badge-cancelled{ background:#f2f2f7; color:#8e8e93; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }

/* Invoice table (user) */
.invoice-table { width:100%; border-collapse:collapse; font-size:14px; }
.invoice-table th {
  padding:10px 16px; text-align:left; border-bottom:1px solid #e5e5e5;
  font-size:12px; font-weight:600; color:var(--apple-text-secondary);
}
.invoice-table td {
  padding:14px 16px; border-bottom:1px solid #f2f2f7; vertical-align:middle;
}
.invoice-table tr:last-child td { border-bottom:none; }

/* Admin invoice status */
.shr-badge-inv-unpaid   { background:#fff8e1; color:#8a6000; }
.shr-badge-inv-paid     { background:#e8f5e9; color:#2e7d32; }
.shr-badge-inv-cancelled{ background:#f2f2f7; color:#8e8e93; }

/* Invoice preview modal */
.inv-preview-box {
  font-family:'Courier New', monospace; font-size:13px;
  background:#fafafa; border:1px solid #e5e5e5;
  border-radius:8px; padding:24px; margin-bottom:16px;
  line-height:1.8;
}
.inv-preview-title { font-size:20px; font-weight:700; letter-spacing:2px; margin-bottom:16px; }
.inv-preview-divider { border:none; border-top:1px solid #ddd; margin:12px 0; }

/* ===== ADMIN CALENDAR ===== */
.cal-nav { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.cal-nav-label { font-size:15px; font-weight:600; }
.cal-outer { overflow-x:auto; }
.cal-table { width:100%; border-collapse:collapse; min-width:760px; }
.cal-table th {
  padding:8px 10px; text-align:center;
  background:var(--shr-table-header);
  border-bottom:1px solid var(--shr-border);
  border-right:1px solid var(--shr-border);
  font-size:12px; font-weight:600; color:var(--shr-text-sub);
  white-space:nowrap;
}
.cal-table th.cal-today-col { color:var(--shr-primary); background:rgba(0,119,199,.06); }
.cal-space-cell {
  padding:10px 16px; font-size:13px; font-weight:600;
  border-bottom:1px solid var(--shr-border);
  white-space:nowrap; background:#fff; min-width:120px;
}
.cal-cell {
  padding:6px 6px; border-bottom:1px solid var(--shr-border);
  border-right:1px solid var(--shr-border);
  text-align:center; min-width:100px; min-height:52px;
  vertical-align:middle;
}
.cal-cell.today-col { background:rgba(0,119,199,.03); }
.cal-booking-chip {
  display:inline-block; background:var(--shr-primary); color:#fff;
  border-radius:4px; padding:4px 8px; font-size:11px; font-weight:600;
  line-height:1.4; text-align:left; max-width:100%;
}
.cal-booking-chip.consulting { background:var(--shr-success); color:#fff; }
.cal-free-text { font-size:11px; color:#ccc; }

/* Space edit modal */
.shr-modal-box-wide {
  background:#fff; border-radius:12px;
  padding:28px 32px; max-width:620px; width:94%;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
  max-height:90vh; overflow-y:auto;
}
.shr-form-group { margin-bottom:18px; }
.shr-form-label {
  display:block; font-size:12px; font-weight:600;
  color:var(--shr-text-sub); margin-bottom:6px; letter-spacing:.03em;
}
.shr-form-label span { color:var(--shr-danger); margin-left:2px; }
.shr-input, .shr-select-full {
  width:100%; padding:9px 12px;
  border:1px solid var(--shr-border); border-radius:8px;
  font-size:14px; font-family:var(--shr-font);
  box-sizing:border-box; color:var(--shr-text);
  background:#fff;
}
.shr-input:focus, .shr-select-full:focus { outline:none; border-color:var(--shr-primary); }
.shr-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.shr-radio-group { display:flex; gap:12px; flex-wrap:wrap; }
.shr-radio-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border:1px solid var(--shr-border);
  border-radius:8px; cursor:pointer; font-size:13px;
  transition:border-color .15s, background .15s;
}
.shr-radio-btn input { display:none; }
.shr-radio-btn.active { border-color:var(--shr-primary); background:rgba(0,119,199,.06); color:var(--shr-primary); font-weight:600; }
.shr-amenity-grid { display:flex; flex-wrap:wrap; gap:8px; }
.shr-amenity-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border:1px solid var(--shr-border);
  border-radius:20px; font-size:12px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.shr-amenity-chip.selected { border-color:var(--shr-primary); background:rgba(0,119,199,.08); color:var(--shr-primary); font-weight:600; }
.shr-modal-divider { border:none; border-top:1px solid var(--shr-border); margin:20px 0; }
@media (max-width:600px) { .shr-form-row { grid-template-columns:1fr; } }