/* ============================================================
   studio.css - ZIKUX LIVE SHOOT 写真館管理画面（シルバー×コーラルレッド（LP同期））
   ============================================================ */

:root {
    --primary:        #1f2937;   /* 強調・見出し（ダーク） */
    --trial-banner-h: 34px;
    --primary-light:  #111827;   /* サイドバー等 */
    --accent:         #E53935;   /* コーラルレッド（プライマリーアクション） */
    --accent-hover:   #C62828;
    --accent-dark:    #8F1D1D;
    --bg:             #e5e7eb;   /* ページ背景（シルバー） */
    --surface:        #ffffff;   /* カード背景 */
    --text:           #1f2937;
    --text-light:     #4b5563;
    --border:         #d1d5db;
    --input-border:   #94a3b8;
    --error:          #c53030;
    --error-bg:       #fff5f5;
    --success:        #15803d;
    --sidebar-w:      220px;
    --header-h:       60px;
    --radius:         6px;
    --shadow:         0 1px 4px rgba(0,0,0,.08);
    --shadow-card:    0 2px 12px rgba(0,0,0,.10);

    /* ヘッダー・サイドバー（ダーク） */
    --header-bg:      #1f2937;
    --header-text:    #ffffff;
    --header-border:  #111827;
    --sidebar-bg:     #111827;
}

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

body {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; vertical-align: middle; }
ul { list-style: none; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .18s, opacity .18s;
    text-align: center;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; opacity: .88; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); opacity: 1; }

.btn-outline {
    background: transparent;
    color: var(--accent-dark);
    border: 1px solid var(--accent);
}
.btn-outline:hover { background: var(--accent); color: #fff; opacity: 1; }

.btn-sm { padding: 4px 10px; font-size: .82rem; }
.btn-lg { padding: 11px 28px; font-size: 15px; }

.btn-danger {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #feb2b2;
}
.btn-danger:hover { background: #fed7d7; border-color: #fc8181; opacity: 1; }

/* ------------------------------------------------------------
   Alert
   ------------------------------------------------------------ */
.alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; }
.alert-err { background: var(--error-bg); color: var(--error); border: 1px solid #feb2b2; }
.alert-warn {
    background: #fffbeb;
    color: #7b341e;
    border: 1px solid #f6ad55;
    border-left: 4px solid #ed8936;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
}
.alert-flash {
    background: #fed7d7;
    border: 1px solid #fc8181;
    color: #742a2a;
    padding: 10px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-weight: 600;
}
/* ロゴ屋号 */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 16px;
}
.brand-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.brand-logo-wrap {
    width: 100%;
    height: 96px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: repeating-conic-gradient(#f0f0f0 0% 25%,#fff 0% 50%) 0 0/14px 14px;
    border: 1px solid #edf2f7;
    margin-bottom: 12px;
}
.brand-logo-img {
    max-width: 90%;
    max-height: 88%;
    object-fit: contain;
}
.brand-logo-empty {
    font-size: 12px;
    color: #a0aec0;
    font-weight: 600;
}
.brand-name {
    font-size: 16px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 4px;
    word-break: break-word;
}
.brand-meta {
    font-size: 12px;
    color: #718096;
    margin-bottom: 12px;
}
.brand-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.brand-card-add {
    border: 2px dashed #cbd5e0;
    background: #fafbfc;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #718096;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
}
.brand-card-add:hover { background: #fdecea; border-color: #E53935; color: #C62828; }
.brand-card-plus {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}
.brand-card-add-text {
    font-size: 13px;
    font-weight: 700;
}
.brand-edit-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #4a5568;
    margin-bottom: 6px;
}

/* プロジェクト登録・編集 屋号タイル選択 */
.brand-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 4px;
}
.brand-pick-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.brand-pick-tile:hover { border-color: #cbd5e0; }
.brand-pick-tile:has(input:checked) {
    border-color: var(--accent, #E53935);
    background: #fff5f5;
    box-shadow: inset 0 0 0 1px var(--accent, #E53935), 0 0 0 4px rgba(229,57,53,.18);
}
.brand-pick-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.brand-pick-logo {
    width: 100%;
    height: 70px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: repeating-conic-gradient(#f0f0f0 0% 25%,#fff 0% 50%) 0 0/12px 12px;
    border: 1px solid #edf2f7;
    margin-bottom: 8px;
}
.brand-pick-logo img { max-width: 90%; max-height: 88%; object-fit: contain; }
.brand-pick-noimg { font-size: 11px; color: #a0aec0; font-weight: 600; }
.brand-pick-name {
    font-size: 13px;
    font-weight: 700;
    color: #2d3748;
    text-align: center;
    word-break: break-word;
    line-height: 1.3;
}
.brand-pick-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #E53935);
    display: none;
    align-items: center;
    justify-content: center;
}
.brand-pick-check svg { width: 14px; height: 14px; }
.brand-pick-tile:has(input:checked) .brand-pick-check { display: inline-flex; }

/* QR利用方式の選択タイル（プリント式 / 画面表示式） */
.qr-mode-lock-warn {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.5;
}
.qr-mode-lock-warn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.qr-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.qr-mode-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 14px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
}
.qr-mode-tile:hover { border-color: #cbd5e0; }
.qr-mode-tile:has(input:checked) {
    border-color: var(--accent, #E53935);
    background: #fff5f5;
    box-shadow: inset 0 0 0 1px var(--accent, #E53935), 0 0 0 4px rgba(229,57,53,.18);
}
.qr-mode-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.qr-mode-img {
    width: 100%;
    max-width: 140px;
    height: 110px;
    object-fit: contain;
    margin-bottom: 10px;
}
.qr-mode-name {
    font-size: 15px;
    font-weight: 700;
    color: #2d3748;
}
.qr-mode-desc {
    font-size: 12px;
    color: #718096;
    line-height: 1.5;
    margin-top: 4px;
}
.qr-mode-points {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qr-mode-points li {
    font-size: 12px;
    line-height: 1.5;
    color: #4a5568;
}
.qr-mode-point-label {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    vertical-align: 1px;
}
.qr-mode-points li.is-merit  .qr-mode-point-label { background: #38a169; }
.qr-mode-points li.is-demerit .qr-mode-point-label { background: #a0aec0; }
.qr-mode-note {
    margin-top: 8px;
    width: 100%;
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
    color: #c05621;
    background: #fffaf0;
    border: 1px solid #fbd38d;
    border-radius: 6px;
    padding: 6px 9px;
}
.qr-mode-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent, #E53935);
    display: none;
    align-items: center;
    justify-content: center;
}
.qr-mode-check svg { width: 15px; height: 15px; }
.qr-mode-tile:has(input:checked) .qr-mode-check { display: inline-flex; }

/* スライド開閉（プリント式選択時の件数フィールド） */
.form-collapse {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease;
}
.form-collapse.is-open {
    max-height: 320px;
    opacity: 1;
}

/* ロゴ ドロップゾーン（屋号編集モーダル内） */
.brand-logo-droparea {
    background: #f3f0ff;
    border: 2px dashed #a78bfa;
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.brand-logo-droparea:hover { background: #fdecea; border-color: #FF5A52; }
.brand-logo-droparea.dragover { background: #fbd5d2; border-color: #E53935; transform: scale(1.02); }
.brand-logo-droparea .drop-icon { width: 32px; height: 32px; color: #E53935; }
.brand-logo-droparea .drop-text { font-size: 13px; font-weight: 700; color: #8F1D1D; }
.brand-logo-droparea .drop-hint { font-size: 11px; color: #6b7280; }

.alert-success {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #276749;
    padding: 10px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-weight: 600;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.page-login {
    background: #4a4540;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrap { width: 100%; max-width: 400px; padding: 20px; text-align: center; }

.login-card {
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    padding: 40px 36px 36px;
    text-align: left;
}

.login-logo {
    text-align: center;
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    margin: -40px -36px 28px;
    padding: 36px 48px;
    border-radius: 10px 10px 0 0;
}
.login-logo-img {
    height: 44px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.login-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 24px;
}

.form-group { margin-bottom: 22px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
    letter-spacing: 0;
}


.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(229,57,53,.18);
}
.form-group input.iserr,
.form-group select.iserr { border-color: var(--error); background: #ffe8e8; }
.form-group .err { display: block; color: var(--error); font-size: 12px; margin-top: 4px; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle { position: absolute; top: 0; right: 4px; height: 100%; width: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #94a3b8; padding: 0; }
.pw-toggle:hover { color: var(--accent); }
.pw-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-toggle .icon-off { display: none; }
.pw-toggle.on .icon-on  { display: none; }
.pw-toggle.on .icon-off { display: block; }

/* 契約から自動設定される読み取り専用の値表示（入力に見せない） */
.expires-fixed {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius);
    background: var(--input-bg, #f3f3f1);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
}

.btn-login {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 24px;
    letter-spacing: .04em;
    transition: background .18s;
}
.btn-login:hover { background: var(--accent-hover); }

.login-copy { color: rgba(255,255,255,.4); font-size: 12px; margin-top: 20px; }

/* 規約 */
.terms-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.terms-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* ============================================================
   STUDIO PAGE
   ============================================================ */
.page-studio { background: var(--bg); }

/* ---- Header ---- */
.studio-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    color: var(--header-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 16px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.header-brand:hover { text-decoration: none; }

.header-logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.header-right { display: flex; align-items: center; gap: 16px; }
.header-studio-name { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; }

/* 中央イベント表示（情報表示が主目的。切り替え可能な場合のみ末尾に別リンクを添える） */
.header-event-selector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 36%;
    padding: 7px 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 100px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.event-sel-icon  { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.event-sel-text  { display: flex; flex-direction: column; min-width: 0; }
.event-sel-label { font-size: 12px; font-weight: 400; opacity: .55; line-height: 1.2; letter-spacing: .03em; }
.event-sel-name  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

/* 契約切り替えリンク（複数契約を持つ会員のみ表示。表示部分とは視覚的に分離） */
.event-sel-switch {
    flex-shrink: 0;
    margin-left: 2px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,.25);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s;
}
.event-sel-switch:hover {
    color: #ff8a80;
    text-decoration: underline;
}

@media (max-width: 720px) {
    .header-studio-name { display: none; }
}

@media (max-width: 560px) {
    :root { --header-h: 104px; }  /* 1段目60px + 2段目44px */

    .studio-header {
        height: auto;
        flex-wrap: wrap;
        align-items: center;
        padding-bottom: 8px;
    }
    .header-left  { height: 60px; }
    .header-right { height: 60px; }

    /* 2段目：イベントセレクタを全幅で下に落とす */
    .header-event-selector {
        position: static;
        transform: none;
        order: 3;          /* header-left(1) header-right(2) の後 */
        width: calc(100% - 24px);
        max-width: none;
        margin: 0 12px 4px;
        justify-content: center;
        border-radius: 8px;
        font-size: 12px;
        padding: 7px 12px;
    }
}
.btn-logout {
    padding: 6px 14px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s;
}
.btn-logout:hover { background: rgba(255,255,255,.24); text-decoration: none; }

/* ハンバーガー */
.sidebar-toggle {
    background: none; border: none; cursor: pointer; padding: 6px;
    display: none; flex-direction: column; gap: 5px;
}
.sidebar-toggle span {
    display: block; width: 22px; height: 2px;
    background: rgba(255,255,255,.8);
    border-radius: 2px; transition: transform .22s, opacity .22s;
}

/* ---- Layout ---- */
/* ---- Trial banner ---- */
.trial-banner {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    height: var(--trial-banner-h);
    background: #8F1D1D;
    color: #fde8e7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 99;
    padding: 0 16px;
}
.trial-banner-link { color: #fde8e7; text-decoration: underline; white-space: nowrap; }
.trial-banner-link:hover { color: #fff; }

body.has-trial .studio-body    { padding-top: calc(var(--header-h) + var(--trial-banner-h)); }
body.has-trial .studio-sidebar {
    top:    calc(var(--header-h) + var(--trial-banner-h));
    height: calc(100vh - var(--header-h) - var(--trial-banner-h));
}

.studio-body { display: flex; padding-top: var(--header-h); min-height: 100vh; }

/* ---- Sidebar ---- */
.studio-sidebar {
    position: fixed;
    top: var(--header-h); left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--header-h));
    background: var(--sidebar-bg);
    overflow-y: auto;
    z-index: 90;
    transition: transform .24s;
    display: flex;
    flex-direction: column;
}
.nav-list { padding: 12px 0; }
.nav-item a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 20px;
    color: rgba(255,255,255,.65);
    font-size: 13px; font-weight: 500;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.nav-item a:hover,
.nav-item.active a { background: rgba(255,255,255,.10); color: #fff; }
.nav-item.active a { border-left: 3px solid var(--accent); padding-left: 17px; }
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .7; }
.nav-item.active .nav-icon,
.nav-item a:hover .nav-icon { opacity: 1; }
.nav-divider { height: 1px; background: rgba(255,255,255,.10); margin: 10px 16px; list-style: none; }

/* ---- サイドバー最下部（契約切り替え・ストレージ使用量・期間） ---- */
.sidebar-bottom {
    margin-top: auto;                  /* MEDIA PASS同様、サイドバー最下部に寄せる */
}
.nav-list--switch {
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

/* ---- サイドバー ストレージ使用量（円グラフ） ---- */
.sidebar-storage {
    margin: 18px 14px 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sidebar-storage-chart {
    --pct: 0%;
    position: relative;
    width: 96px; height: 96px; flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--accent) 0 var(--pct), rgba(255,255,255,.14) var(--pct) 100%);
    display: flex; align-items: center; justify-content: center;
}
.sidebar-storage-chart::before {
    content: "";
    position: absolute; inset: 11px;
    border-radius: 50%;
    background: var(--sidebar-bg);
}
.sidebar-storage-chart.is-warn {
    background: conic-gradient(#ed8936 0 var(--pct), rgba(255,255,255,.14) var(--pct) 100%);
}
.sidebar-storage-chart.is-danger {
    background: conic-gradient(#e53e3e 0 var(--pct), rgba(255,255,255,.14) var(--pct) 100%);
}
.sidebar-storage-pct {
    position: relative; z-index: 1;
    font-size: 22px; font-weight: 700; color: #fff;
}
.sidebar-storage-text { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.sidebar-storage-label { font-size: 11px; color: rgba(255,255,255,.5); }
.sidebar-storage-val { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; }

/* ---- 撮影可能期間・DL期限（契約から・全頁常時表示） ---- */
.sidebar-contract {
    margin: 12px 14px 6px;
    padding: 12px 14px;
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
    background: rgba(255,255,255,.06);
    display: flex; flex-direction: column; gap: 10px;
}
.sidebar-contract.is-closed { border-left-color: #e53e3e; }
.sidebar-contract-item { display: flex; flex-direction: column; gap: 2px; }
.sidebar-contract-label { font-size: 11px; color: rgba(255,255,255,.5); }
.sidebar-contract-val { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.sidebar-contract-sub { font-size: 11px; font-weight: 600; color: var(--accent); }
.sidebar-contract-sub.is-closed { color: #ff8a80; }

/* ---- サイドバーフッター（ヘルプ・サポート） ---- */
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.10); padding: 0 12px; }
.sidebar-footer-link {
    display: flex; align-items: center; gap: 10px;
    height: 54px;
    color: rgba(255,255,255,.55);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: color .15s;
}
.sidebar-footer-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-footer-link:hover { color: #fff; }

/* ---- 公開/非公開 トグルスイッチ（プロジェクト一覧） ---- */
.public-toggle-form { margin: 0; }
.public-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 12px; font-weight: 600;
}
.public-toggle-track {
    position: relative; width: 38px; height: 22px; flex-shrink: 0;
    border-radius: 999px; background: #cbd5e1; transition: background .18s;
}
.public-toggle-knob {
    position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: left .18s;
}
.public-toggle.is-on .public-toggle-track { background: #15803d; }
.public-toggle.is-on .public-toggle-knob { left: 18px; }
.public-toggle.is-on  .public-toggle-label { color: #15803d; }
.public-toggle.is-off .public-toggle-label { color: #94a3b8; }

/* ---- Main ---- */
.studio-main { margin-left: var(--sidebar-w); flex: 1; padding: 28px 28px 40px; min-width: 0; }

.page-heading { margin-bottom: 22px; }
.page-heading h1 { font-size: 20px; font-weight: 700; color: var(--primary); }
.page-heading-sub { font-size: 13px; color: var(--text-light); margin-top: 4px; }

/* ---- Card ---- */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    overflow: hidden;
}
.card-head {
    padding: 12px 20px;
    background: #f9f7f4;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.card-head h2 {
    font-size: 15px; font-weight: 700;
    color: var(--primary);
    letter-spacing: 0;
}
.card-head-link { font-size: .82rem; color: var(--accent-dark); }
.card-head-link:hover { text-decoration: underline; }
.card-head-count { font-size: 13px; color: var(--text-light); margin-left: auto; }
.card-body { padding: 20px; }

/* 使用容量 */
.storage-info { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.storage-used-label { font-size: 22px; font-weight: 700; color: var(--primary); }
.storage-sep, .storage-limit-label { font-size: 15px; color: var(--text-light); }
.storage-bar-wrap { display: flex; align-items: center; gap: 10px; }
.storage-bar { flex: 1; height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.storage-bar-used {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #f5bc50 100%);
    border-radius: 99px; transition: width .4s;
}
.storage-pct { font-size: 13px; font-weight: 700; color: var(--text-light); width: 36px; text-align: right; }
.storage-bar-warn   { background: linear-gradient(90deg, #f6ad55 0%, #ed8936 100%) !important; }
.storage-bar-danger { background: linear-gradient(90deg, #fc8181 0%, #e53e3e 100%) !important; }

/* カードグリッド */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 20px; }
.card-grid .card { margin-bottom: 0; }
.card-action .card-body { display: flex; flex-direction: column; gap: 12px; }
.card-count { font-size: 32px; font-weight: 700; color: var(--primary); line-height: 1; }
.card-count span { font-size: 14px; font-weight: 600; color: var(--text-light); margin-left: 4px; }
.card-desc { font-size: 13px; color: var(--text-light); line-height: 1.6; }

/* ---- Proバナー ---- */
.banner-pro-html {
    display: flex; align-items: center;
    margin-bottom: 20px; border-radius: 10px; overflow: hidden;
    box-shadow: var(--shadow-card);
    background: linear-gradient(120deg, #1a1a1a 0%, #3a2800 100%);
    text-decoration: none; transition: opacity .18s; position: relative;
}
.banner-pro-html:hover { opacity: .93; }
.banner-pro-html::before, .banner-pro-html::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.banner-pro-html::before { width: 320px; height: 320px; right: 80px; top: -120px; background: rgba(232,160,32,.04); }
.banner-pro-html::after  { width: 180px; height: 180px; right: -30px; bottom: -80px; background: rgba(232,160,32,.05); }
.bph-body { flex: 1; padding: 22px 28px; position: relative; z-index: 1; }
.bph-badge {
    display: inline-block;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 2px;
    padding: 3px 10px; border-radius: 4px; margin-bottom: 10px;
}
.bph-headline { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; }
.bph-features { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 24px; }
.bph-features li { color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.5; padding-left: 22px; position: relative; }
.bph-features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; font-size: 12px; }
.bph-cta { display: inline-block; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 22px; border-radius: 99px; }
.bph-deco { width: 160px; flex-shrink: 0; padding: 16px 20px 16px 0; opacity: .1; position: relative; z-index: 1; }
.bph-deco svg { width: 100%; height: auto; display: block; }

/* ---- Form ---- */
.form-section-title {
    font-size: 13px; font-weight: 700; color: var(--primary);
    letter-spacing: 0;
    border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 20px;
}
.form-section-title:not(:first-of-type) {
margin-top: 30px;
}

.required { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: var(--error); border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; letter-spacing: 0; }
.optional  { display: inline-block; font-size: 10px; font-weight: 700; color: var(--text-light); background: var(--border); border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; letter-spacing: 0; }
.form-note { font-size: 12px; color: var(--text-light); margin-top: 5px; }
.form-actions { padding-top: 24px; border-top: 1px solid var(--border); margin-top: 24px; }

/* ラジオ */
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.radio-item {
    display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
    background: #f9f7f4; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 16px; flex: 1; min-width: 180px; transition: border-color .15s, background .15s;
}
.radio-item:hover { border-color: var(--accent); background: #fff8ec; }
.radio-item input[type="radio"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.radio-item:has(input:checked) { border-color: var(--accent); border-width: 2px; background: #fff3d4; box-shadow: 0 0 0 3px rgba(232,160,32,.14); }
.radio-label { display: flex; flex-direction: column; gap: 2px; }
.radio-label strong { font-size: 14px; color: var(--text); }
.radio-label small  { font-size: 12px; color: var(--text-light); }

/* snap種別ラジオカラー */
.radio-item--snap             { background: #f0f7ff; border-color: #bfd4f6; }
.radio-item--snap:hover       { background: #e4effe; border-color: #93b4ef; }
.radio-item--snap:has(input:checked) { background: #dbeafe; border-color: #93b4ef; border-width: 2px; }
.radio-item--snap input[type="radio"] { accent-color: #1e40af; }

.radio-item--tether             { background: #f9f6ff; border-color: #d4c5f9; }
.radio-item--tether:hover       { background: #f0eafe; border-color: #b89ef4; }
.radio-item--tether:has(input:checked) { background: #ede9fe; border-color: #b89ef4; border-width: 2px; }
.radio-item--tether input[type="radio"] { accent-color: #6d28d9; }

.radio-item--select             { background: #f0fdf9; border-color: #a7f3d0; }
.radio-item--select:hover       { background: #e0faf2; border-color: #6ee7b7; }
.radio-item--select:has(input:checked) { background: #d1fae5; border-color: #6ee7b7; border-width: 2px; }
.radio-item--select input[type="radio"] { accent-color: #065f46; }

.cond-field { display: none; }
.cond-field.is-show { display: block; }

/* 種別選択アイコン */
.type-icon { width: 34px; height: 34px; flex-shrink: 0; margin-top: 1px; }
.radio-item--snap   .type-icon { color: #1e40af; }
.radio-item--tether .type-icon { color: #5b21b6; }
.radio-item--select .type-icon { color: #065f46; }

/* ---- プロジェクト一覧テーブル ---- */
.proj-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.proj-table thead th {
    background: #f9f7f4; color: var(--text-light); font-weight: 600;
    font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 10px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.proj-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
.proj-table tbody tr:last-child { border-bottom: none; }
.proj-table tbody tr:hover { background: #fdf8ef; }
.proj-table td { padding: 12px 16px; vertical-align: middle; }
.proj-name-cell a { color: var(--text); text-decoration: none; font-weight: 500; }
.proj-name-cell a:hover { color: var(--accent-dark); text-decoration: underline; }
.proj-count-cell { font-weight: 600; color: var(--text); }
.count-unit { font-size: .8rem; font-weight: 400; color: var(--text-light); margin-left: 1px; }
.proj-storage-cell { color: var(--text-light); font-size: .88rem; white-space: nowrap; }
.proj-expires-cell { color: var(--text); white-space: nowrap; }
.expires-none { color: var(--text-light); font-size: .88rem; }
.proj-actions-cell { white-space: nowrap; vertical-align: middle; }
.proj-actions-inner { display: flex; gap: 6px; align-items: center; }

/* 種別バッジ */
.type-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.type-snap   { background: #dbeafe; color: #1e40af; }
.type-tether { background: #ede9fe; color: #5b21b6; }
.type-select { background: #d1fae5; color: #065f46; }

/* アップロード状態バッジ */
.status-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.status-done  { background: #d1fae5; color: #065f46; }
.status-wait  { background: #f3f4f6; color: #6b7280; }

/* 空ステート */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-light); }
.empty-icon  { width: 56px; height: 56px; margin-bottom: 16px; opacity: .35; }
.empty-state p { margin-bottom: 20px; font-size: 1rem; }

/* PRO バッジ */
.badge-pro {
    display: inline-block; font-size: 10px; font-weight: 800; color: #fff;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; letter-spacing: 1px;
}

/* ---- モーダル ---- */
.expire-alert-days { display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;vertical-align:middle; }
.expire-alert-days-overdue { background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db; }
.expire-alert-days-today   { background:#fef2f2;color:#b91c1c;border:1px solid #fca5a5; }
.expire-alert-days-urgent  { background:#fff7ed;color:#c2410c;border:1px solid #fdba74; }
.expire-alert-days-soon    { background:#fefce8;color:#854d0e;border:1px solid #fde047; }
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; align-items: center; justify-content: center; }
.modal-overlay.is-show { display: flex; }
.modal { background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.22); width: 100%; max-width: 440px; margin: 20px; overflow: hidden; }
.modal-head { padding: 18px 24px; background: linear-gradient(180deg, #1f2937, #111827); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; }
.modal-body { padding: 24px; font-size: 14px; line-height: 1.7; color: var(--text); }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.modal-close-x { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; margin-left: auto; opacity: .8; line-height: 1; }
.modal-close-x:hover { opacity: 1; }

/* ============================================================
   Upload Page — section titles, storage compact, search, paging
   ============================================================ */
.section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
}
.alert-flash {
    background: #fed7d7;
    border: 1px solid #fc8181;
    color: #742a2a;
    padding: 10px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-weight: 600;
}
.card-info {
    background: #ebf8ff;
    border: 1px solid #bee3f8;
}
.detail-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.detail-table th,
.detail-table td { padding: 10px 14px; border-bottom: 1px solid #bee3f8; vertical-align: middle; }
.detail-table th { width: 160px; color: var(--text-light); font-weight: 500; white-space: nowrap; }
.detail-table tr:last-child th,
.detail-table tr:last-child td { border-bottom: none; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 14px 0; }
.storage-bar-compact { margin-bottom: 16px; }
.storage-bar-compact-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 4px;
}
.storage-text-warn   { color: #c05621; }
.storage-text-danger { color: #c53030; }
.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
    transition: background .15s;
}
.help-btn:hover { background: var(--accent-hover); }
.modal-help { max-width: 560px; width: 95%; }

/* 写真追加モーダル */
.modal-add-files { max-width: 560px; width: 95%; padding: 24px; }
.modal-add-title { font-size: 18px; font-weight: 700; color: #2d3748; margin-bottom: 16px; }
.add-files-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.add-files-label { font-size: 13px; font-weight: 600; color: #4a5568; }
.add-files-select { flex: 1; min-width: 160px; padding: 8px 10px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; }
.add-files-note { font-size: 11px; color: #718096; margin-top: 8px; }

/* サブフォルダバッジ（snap-row 内） */
.subdir-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #edf2f7;
    color: #4a5568;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    margin-right: 4px;
}
.help-lead { font-size: 14px; line-height: 1.7; margin-bottom: 12px; }

/* リサイズ選択 */
.resize-opt {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.resize-opt input[type="radio"] { display: none; }
.resize-opt span {
    display: inline-block;
    padding: 5px 14px;
    border: 1.5px solid var(--border);
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    background: #fff;
    transition: border-color .15s, color .15s, background .15s;
    user-select: none;
}
.resize-opt input[type="radio"]:checked + span {
    border-color: var(--accent);
    color: var(--accent-dark);
    background: #ebf8ff;
}
.resize-opt:hover span { border-color: var(--accent); color: var(--accent); }

/* ドラッグ＆ドロップゾーン */
@keyframes drop-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(229,57,53,.35); }
    60%  { box-shadow: 0 0 0 10px rgba(229,57,53,.0); }
    100% { box-shadow: 0 0 0 0   rgba(229,57,53,.0); }
}
.drop-zone {
    background: #fdecea;
    border: 2px dashed #f0a8a4;
    border-radius: var(--radius);
    padding: 40px 20px;
    text-align: center;
    cursor: default;
    transition: background .15s, border-color .15s, transform .15s;
    margin-bottom: 20px;
}
.drop-zone.dragover {
    background: #fbd5d2;
    border: 2px solid #E53935;
    transform: scale(1.015);
    animation: drop-pulse .6s ease-out infinite;
}
.drop-zone.dragover .drop-icon  { color: #C62828; transform: translateY(-4px); }
.drop-zone.dragover .drop-text  { color: #8F1D1D; }
.drop-zone.dragover .drop-release { display: block; }
.drop-zone-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.drop-icon { width: 40px; height: 40px; color: #E53935; transition: transform .15s, color .15s; }
.drop-text { font-size: 15px; color: #C62828; font-weight: 600; }
.drop-release { display: none; font-size: 13px; color: #E53935; font-weight: 600; }
.drop-sub { font-size: 13px; color: var(--text-light); }
.drop-browse { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* モードバナー */
.mode-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 12px;
}
.mode-banner-snap        { background: #fffaf0; border: 1.5px solid #fbd38d; }
.mode-banner-snap-select { background: #ebf8ff; border: 1.5px solid #90cdf4; }
.mode-banner-icon { width: 56px; height: 44px; flex-shrink: 0; }
.mode-banner-icon svg { width: 100%; height: 100%; }
.mode-banner-body { display: flex; flex-direction: column; gap: 3px; }
.mode-banner-label { font-size: 15px; font-weight: 700; }
.mode-banner-snap        .mode-banner-label { color: #c05621; }
.mode-banner-snap-select .mode-banner-label { color: #2b6cb0; }
.mode-banner-desc { font-size: 12px; color: var(--text-light); }

/* 検索フォーム */
.search-form { margin: 0; }
.search-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-label { font-size: 13px; color: var(--text); white-space: nowrap; font-weight: 500; }
.search-input {
    flex: 1;
    min-width: 160px;
    padding: 7px 10px;
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius);
    font-size: 14px;
}
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(43,108,176,.15); }
.card-filtering { border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(43,108,176,.1); }
.btn-clear-filter { background: #fff; border: 1px solid #fc8181; color: #c53030; white-space: nowrap; }
.btn-clear-filter:hover { background: #fff5f5; }
.filter-active-label { margin-top: 8px; font-size: 12px; color: var(--text-light); display: flex; align-items: center; gap: 6px; }
.filter-active-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
}
.result-count { font-size: 13px; color: var(--text-light); margin: 10px 0 6px; }

/* スナップ：フォルダ横一列リスト */
.snap-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.snap-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.snap-row:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(229,57,53,.18);
    transform: translateY(-1px);
}
.snap-row:hover .snap-row-meta {
    background: #f0fdfa;
}
.snap-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.snap-name { font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.snap-count { font-size: 11px; background: var(--accent); color: #fff; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.snap-date { font-size: 11px; color: var(--text-light); }
.snap-actions { display: flex; gap: 6px; margin-left: auto; }

/* お客様ダウンロード状態バッジ */
.dl-badge {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 99px;
    line-height: 1.4;
}
.dl-badge-done {
    background: #c6f6d5; color: #22543d;
}
.dl-badge-pending {
    background: #f1f5f9; color: #718096;
}
.snap-thumbs { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; align-items: stretch; }
.thumb-group {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fafbfc;
    padding: 8px 10px;
}
.thumb-group-bare {
    border: none;
    background: none;
    padding: 0;
}
.thumb-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.btn-group-del {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #fecaca;
    background: #fff;
    color: #c53030;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}
.btn-group-del:hover { background: #fed7d7; border-color: #fc8181; }
.thumb-section { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.thumb-section-label {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    background: #fff;
    border: 1px solid #cbd5e0;
    padding: 4px 14px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 6px;
}
.thumb-section-label-folder {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 14px 4px 11px;
}
.thumb-section-label-folder .folder-ico { flex-shrink: 0; display: block; width: 17px; height: 17px; }
.snap-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}
.snap-thumb:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.thumb-empty { font-size: 11px; color: var(--text-light); }

/* 選択サムネイル */
.sel-thumb-wrap { position: relative; display: inline-block; flex-shrink: 0; border-radius: 4px; }
.sel-thumb-wrap .snap-thumb { opacity: .55; transition: opacity .15s, transform .15s, box-shadow .15s; }
.sel-thumb-wrap .snap-thumb:hover { opacity: 1; }
.sel-thumb-wrap.sel-chosen .snap-thumb { opacity: 1; box-shadow: inset 0 0 0 3px #38a169; }
.sel-check-badge {
    position: absolute;
    top: 3px; right: 3px;
    background: #38a169;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.sel-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 99px;
    flex-shrink: 0;
    white-space: nowrap;
}
.sel-badge-done { background: #c6f6d5; color: #276749; }
.sel-badge-none { background: #f7f9fc; color: #a0aec0; border: 1px solid #e2e8f0; }
.sel-confirmed-at { font-size: 11px; color: #718096; margin-left: 4px; }

/* ページング */
.paging { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 16px 0 8px; flex-wrap: wrap; }
.paging-btn {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--accent);
    background: var(--surface);
    text-decoration: none;
    transition: background .15s;
}
.paging-btn:hover { background: #ebf8ff; text-decoration: none; }
.paging-disabled { color: var(--text-light); cursor: default; pointer-events: none; }
.paging-current {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--accent);
    font-weight: 700;
    background: #ebf8ff;
}

/* アップロード進捗モーダル */
.modal-upload {
    max-width: 400px;
    width: 92%;
    text-align: center;
    padding: 40px 32px 32px;
    border-radius: 16px;
}
.modal-upload-icon { width: 68px; height: 68px; margin: 0 auto 20px; }
.modal-upload-icon svg { width: 100%; height: 100%; }
@keyframes spin { to { transform: rotate(360deg); } }
.upload-spinner { animation: spin 1.1s linear infinite; transform-origin: center; }
.modal-upload-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.modal-upload-count { font-size: 14px; color: var(--text-light); margin-bottom: 16px; }
.modal-upload-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.modal-upload-bar-track { flex: 1; height: 10px; background: var(--border); border-radius: 99px; overflow: hidden; }
.modal-upload-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #63b3ed);
    border-radius: 99px;
    transition: width .25s ease;
}
.modal-upload-bar-fill.upload-bar-success { background: linear-gradient(90deg, #48bb78, #38a169); }
.modal-upload-pct { font-size: 13px; font-weight: 700; color: var(--text-light); width: 36px; text-align: right; }
.modal-upload-errors { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; max-height: 120px; overflow-y: auto; }
.modal-upload-errors li { font-size: 12px; color: #c53030; padding: 3px 0; border-bottom: 1px solid #fff5f5; }

/* 容量不足モーダル */
.modal-capacity {
    max-width: 460px;
    width: 92%;
    text-align: center;
    padding: 40px 36px 32px;
    border-radius: 16px;
}
.modal-capacity-icon { width: 72px; height: 72px; margin: 0 auto 20px; }
.modal-capacity-icon svg { width: 100%; height: 100%; }
.modal-capacity-title { font-size: 22px; font-weight: 700; color: #c53030; margin-bottom: 10px; }
.modal-capacity-body { font-size: 14px; color: var(--text); margin-bottom: 16px; line-height: 1.6; }
.modal-capacity-bar { margin-bottom: 24px; }
.modal-capacity-bar-track { height: 10px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
.modal-capacity-bar-fill { height: 100%; border-radius: 99px; }
.modal-capacity-bar-label { font-size: 12px; color: var(--text-light); }

/* 写真ライトボックスモーダル */
.modal-photo {
    position: relative;
    background: #111;
    border-radius: 12px;
    width: min(92vw, 860px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.photo-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
    min-height: 44px;
}
.photo-modal-title { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 48px); }
.photo-modal-close {
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 99px;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.photo-modal-close:hover { background: rgba(255,255,255,.28); }
.photo-gallery-wrap {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.photo-slider-track { display: flex; flex: 1; min-height: 0; transition: transform .3s ease; }
.photo-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 56px;
    gap: 8px;
    box-sizing: border-box;
}
.photo-slide img { max-width: 100%; max-height: calc(92vh - 130px); object-fit: contain; border-radius: 4px; display: block; }
.photo-slide-name { font-size: 12px; color: rgba(255,255,255,.45); text-align: center; word-break: break-all; }
.photo-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    z-index: 2;
}
.photo-slider-btn:hover { background: rgba(0,0,0,.75); }
.photo-slider-prev { left: 8px; }
.photo-slider-next { right: 8px; }
.photo-slider-count {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.65);
    font-size: 13px;
    background: rgba(0,0,0,.35);
    padding: 2px 12px;
    border-radius: 99px;
    pointer-events: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .sidebar-toggle { display: flex; }
    .studio-sidebar { transform: translateX(-100%); }
    .studio-sidebar.is-open { transform: translateX(0); }
    .studio-main { margin-left: 0; padding: 20px 16px 32px; }
    .header-logo-img { height: 28px; }
    .card-grid { grid-template-columns: 1fr; }
    .bph-deco { display: none; }
    .bph-features { grid-template-columns: 1fr; }
}

/* ━━━ 名前変更：鉛筆ボタン（一覧） ━━━ */
.btn-rename-pencil {
    background: none;
    border: none;
    color: var(--text-light);
    padding: 2px 4px;
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
.btn-rename-pencil:hover { color: var(--accent); background: rgba(0,0,0,.06); }
.btn-rename-pencil svg { display: block; }

/* 名前変更：インライン編集（一覧） */
.snap-name-edit-wrap { display: inline-flex; align-items: center; gap: 4px; }
.snap-name-input {
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--text);
    outline: none;
    min-width: 80px;
    max-width: 200px;
}
.btn-rename-action {
    background: none;
    border: 1px solid;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.5;
    flex-shrink: 0;
}
.btn-rename-save   { border-color: #38a169; color: #38a169; }
.btn-rename-save:hover   { background: #38a169; color: #fff; }
.btn-rename-cancel { border-color: #e53e3e; color: #e53e3e; }
.btn-rename-cancel:hover { background: #e53e3e; color: #fff; }

/* 名前確認：アップロード完了後モーダル */
.upload-name-confirm-lead {
    font-size: .85rem;
    color: var(--text);
    margin: 0 0 10px;
    text-align: center;
    font-weight: 600;
}
.upload-name-confirm-sub { font-size: .78rem; color: var(--text-light); font-weight: 400; display: block; margin-top: 2px; }
.upload-name-row { margin-bottom: 6px; }
.upload-name-row input {
    width: 100%;
    font-size: .9rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
}
.upload-name-row input:focus { border-color: var(--accent); }

/* ============================================================
   汎用クラス（CONNECT から移植、インラインstyle剥がし用）
   ============================================================ */

/* ---- page-heading ---- */
.page-heading--flex {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px;
}
.page-heading-meta { font-size: 13px; color: #718096; }

/* ---- form-section-title margin modifier ---- */
.form-section-title--gap-lg { margin-top: 28px; }

/* ---- form helpers ---- */
.form-actions-row { display: flex; align-items: center; gap: 16px; }
.radio-group--tight { margin-top: 6px; margin-bottom: 8px; }
.radio-item--compact {
    min-width: 0; flex: 0 0 auto; padding: 8px 16px;
}
.form-note--tight { margin-top: 0; margin-bottom: 8px; }
.check-inline {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; margin-top: 6px; font-size: 14px;
}
.check-inline input[type="checkbox"] {
    width: 16px; height: 16px;
    cursor: pointer; accent-color: var(--accent);
}

/* ---- err 余白モディファイア ---- */
.err--block  { display: block; margin-top: 6px; }
.err--mt8    { margin-top: 8px; }
.err--mb20   { margin-bottom: 20px; }
.alert--mb20 { margin-bottom: 20px; }

/* ---- セクション記述・区切り（カード本文内） ---- */
.section-desc { font-size: 14px; color: #555; margin-bottom: 16px; }
.section-divider {
    border: none; border-top: 1px solid #e2e8f0;
    margin: 24px 0;
}
.subsection-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.subsection-desc  { font-size: 13px; color: #888; margin-bottom: 14px; }
.intro-text { font-size: 13px; color: #555; margin-bottom: 16px; }
.field-hint { font-size: 12px; color: #888; margin-bottom: 10px; }

/* ---- カード本文フラッシュ（テーブル等を内側余白なしで） ---- */
.card-body--flush { padding: 0; }

/* ---- 空状態 ---- */
.empty-state-body { text-align: center; padding: 60px 20px; }
.empty-state-msg  { color: var(--text-light); margin-bottom: 20px; }

/* ---- ファイル選択行 ---- */
.file-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.file-row input[type="file"] { font-size: 14px; }

/* ---- セクションタイトル＋右側アクション ---- */
.section-title-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 24px; margin-bottom: 8px;
}
.section-title-row .section-title {
    margin: 0; padding: 0; border: none;
}

/* ---- 普段は地味、ホバーで赤になる削除ボタン ---- */
.btn-danger-ghost {
    background: transparent;
    color: #a0aec0;
    border: 1px solid #e2e8f0;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-danger-ghost:hover {
    background: #fff5f5;
    color: #c53030;
    border-color: #feb2b2;
    text-decoration: none;
}
.btn-danger-ghost .btn-ico {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- フォームの2カラム横並び（メッセージ＋お問い合わせ先など。2:1） ---- */
.form-row-2col {
    display: flex; gap: 20px; align-items: flex-start;
}
.form-row-2col > .form-group { flex: 1; min-width: 0; }
.form-row-2col > .form-group.form-group--wide { flex: 2; }
@media (max-width: 720px) {
    .form-row-2col { flex-direction: column; gap: 0; }
}

/* ---- 期限選択（無制限/日付指定＋日付input が同列） ---- */
.expires-row {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-top: 6px;
}
.mode-radio-label {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 14px;
}
.mode-radio-label input[type="radio"] { accent-color: var(--accent); }
.form-group input[type="date"].expires-date-input {
    width: auto; padding: 6px 10px;
    border: 1px solid #cbd5e0; border-radius: 4px;
    font-size: 14px;
}
.form-group input[type="date"].expires-date-input:disabled {
    background: #f7f7f7; color: #aaa; cursor: not-allowed;
}

/* ---- 屋号タイル ---- */
.brand-pick-name-sub {
    font-size: 11px; color: #718096; font-weight: 600;
}

/* ---- モーダル幅・form組込み版 ---- */
.modal--narrow { max-width: 480px; }
.modal--wide   { max-width: 560px; }

/* ---- PDF出力形式選択（ラジオ+説明文） ---- */
.pdf-format-option {
    display: block; position: relative;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid #d7dce0; border-radius: 6px;
    margin-bottom: 10px; cursor: pointer;
}
.pdf-format-option:last-child { margin-bottom: 0; }
.pdf-format-option input[type="radio"] { position: absolute; top: 15px; left: 14px; }
.pdf-format-option-title { display: block; font-weight: 700; font-size: 14px; color: #2d3748; }
.pdf-format-option-desc  { display: block; font-size: 12px; color: #718096; margin-top: 3px; line-height: 1.5; }
.pdf-format-option.is-selected { border-color: #9c1f24; background: #fdf3f3; }
.modal-form { padding: 24px; }
.modal-form-title {
    font-size: 18px; font-weight: 700; color: #2d3748;
    margin-bottom: 14px;
}
.modal-form-title--lg { margin-bottom: 18px; }
.modal-form-sub {
    font-size: 13px; color: #718096;
    margin-bottom: 14px;
}
.modal-text-input {
    width: 100%; padding: 10px 12px;
    border: 1px solid #cbd5e0; border-radius: 6px;
    font-size: 14px; margin-bottom: 18px;
}
.modal-text-input--compact { padding: 9px 12px; }
.modal-actions {
    display: flex; justify-content: flex-end; gap: 10px;
}
.modal-actions--bordered {
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}
.modal-divider {
    border: none; border-top: 1px solid #e2e8f0;
    margin: 18px 0;
}

/* ---- カラースウォッチ ---- */
.swatch-row {
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap; margin-bottom: 18px;
}
.swatch-row--mb-tight { margin-bottom: 14px; }
.swatch-pick {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; cursor: pointer;
    font-size: 12px; color: #555;
}
.swatch-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 6px; border: 2px solid #ccc;
}
.swatch-chip.is-selected { border-color: var(--accent); }
.swatch-chip--transparent {
    background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0/16px 16px;
}
.swatch-input-hidden { opacity: 0; position: absolute; }

/* ---- 屋号ヘッダープレビュー ---- */
.brand-header-preview {
    height: 60px; display: flex; align-items: center;
    padding: 0 18px; border-radius: 6px;
    margin-bottom: 14px;
}
.brand-header-preview-logo {
    height: 36px; max-width: 140px;
    flex-shrink: 0; display: flex; align-items: center;
}
.brand-header-preview-spacer { flex: 1; }
.brand-header-preview-name {
    font-size: 14px; font-weight: 700; white-space: nowrap;
}

/* ---- 現在ロゴ表示枠（設定画面） ---- */
.logo-current-block { margin-bottom: 20px; }
.logo-current-title { font-size: 13px; font-weight: 700; color: #888; margin-bottom: 8px; }
.logo-current-frame {
    background: #1f2937; padding: 12px 20px;
    display: inline-flex; align-items: center; border-radius: 6px;
}
.logo-current-img {
    height: 36px; max-width: 160px; object-fit: contain;
}
.logo-current-action {
    display: inline-block; margin-left: 12px;
}

/* ---- ロゴ背景プレビュー（設定画面） ---- */
.logo-bg-preview-block { margin-bottom: 16px; }
.logo-bg-preview-label { font-size: 12px; color: #888; margin-bottom: 6px; }
.logo-bg-preview-box {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 24px;
    border-radius: 8px; border: 1px solid #e2e8f0;
    min-width: 160px; min-height: 72px;
}
.logo-bg-preview-img {
    max-height: 44px; max-width: 180px; object-fit: contain;
}

/* ---- 表示名 input（設定画面） ---- */
.input-name-wide {
    width: 280px; padding: 8px 12px;
    border: 1px solid #ccc; border-radius: 4px;
    font-size: 14px;
}

/* ---- エラー画面 ---- */
.err-page-title {
    text-align: center; color: #c53030; font-weight: 700;
    margin-bottom: 12px;
}
.err-page-msg {
    text-align: center; color: #555; font-size: 14px;
    margin-bottom: 24px;
}
.btn-login--center { text-align: center; }
.alert-warn--storage-full { margin-top: 12px; margin-bottom: 0; }
.btn-disabled-soft { opacity: .45; cursor: not-allowed; }

/* ---- ストレージ表示（コンパクトカード） ---- */
.storage-compact-card { margin-bottom: 20px; }
.storage-compact-card .card-body { padding: 12px 20px; }
.storage-compact-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.storage-compact-label { font-size: 13px; color: var(--text-light); }
.storage-compact-value { font-size: 14px; font-weight: 600; }
.storage-compact-bar-wrap { flex: 1; min-width: 100px; }

/* ---- inline input row ---- */
.input-inline-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 4px;
}
.unit-text { font-size: 14px; color: var(--text-light); }
.form-group input[type="number"].input-w200 { width: 150px; }
.form-group input[type="number"].input-w130 { width: 130px; }

.field-static-value { padding: 8px 0; font-size: 15px; font-weight: 600; }

/* 一覧テーブル: イベント名サブライン */
.proj-event-name { font-size: 11px; color: var(--text-light); margin-top: 2px; }

/* ---- 写真館メモ（常時展開） ---- */
.studio-memo-block {
    background: #fefcbf;
    border: 1px solid #f0e6a2;
    border-left: 3px solid #d69e2e;
    border-radius: 4px;
    padding: 10px 14px;
    margin-top: 14px;
}
.studio-memo-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    line-height: 1;
}
.studio-memo-label {
    font-size: 12px; font-weight: 700; color: #744210;
    display: flex; align-items: center; gap: 4px;
}
.studio-memo-label.has-content::after {
    content: '●'; color: #d69e2e; font-size: 10px; margin-left: 4px;
}
.studio-memo-status {
    font-size: 11px; color: #975a16;
}
.studio-memo-input {
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    border: 1px solid #f0e6a2;
    border-radius: 4px;
    background: #fffef5;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #2d3748;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.6;
    transition: min-height .2s ease;
}
.studio-memo-input:focus {
    outline: none;
    border-color: #d69e2e;
    box-shadow: 0 0 0 2px rgba(214,158,46,.25);
    min-height: 140px;
}
.studio-memo-hint {
    font-size: 10px; color: #975a16; margin-top: 4px;
}