/*
 * マイページ・管理画面スタイル（F-03/F-04/F-05/F-07）
 * 正: cc_package/02_デザイン参照/FilmSelect_v2_demo.html
 */

.dash{display:grid;grid-template-columns:230px 1fr;gap:0;min-height:calc(100vh - 64px)}
.side{background:var(--ink-2);color:#CFC8BC;padding:30px 0}
.side .who{padding:0 24px 22px;border-bottom:1px solid var(--line-dark);margin-bottom:14px}
.side .who b{color:#F0E5CF;font-family:var(--serif);letter-spacing:.05em;font-size:15px;display:block}
.side .who span{font-size:11px;color:var(--muted-2);letter-spacing:.1em}
.side a{display:flex;align-items:center;gap:10px;padding:12px 24px;font-size:13px;letter-spacing:.06em;border-left:2px solid transparent;transition:all .3s}
.side a:hover{color:var(--gold-2)}
.side a.on{color:var(--gold-2);border-left-color:var(--gold);background:rgba(185,147,90,.08)}
.main{padding:clamp(24px,4vw,44px);background:var(--paper)}
.main h2{font-family:var(--serif);font-size:22px;letter-spacing:.08em;margin-bottom:6px}
.main .sub{font-size:12.5px;color:var(--muted);margin-bottom:26px}
.plist{display:grid;gap:14px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;display:grid;
  grid-template-columns:1fr auto;gap:6px 18px;align-items:center;cursor:pointer;transition:all .35s}
.pcard:hover{border-color:var(--gold);transform:translateX(4px)}
.pcard h4{font-size:15px;font-weight:700;letter-spacing:.03em}
.pcard .meta{font-size:12px;color:var(--muted)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.1em;border-radius:999px;padding:4px 14px;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-review{background:#F1EDE3;color:var(--muted)}
.st-match{background:#E6F0F2;color:var(--info)}
.st-order{background:#F5EBDB;color:var(--gold-deep)}
.st-prod{background:#FDF3E3;color:var(--warn)}
.st-deliv{background:#E9F4EE;color:var(--ok)}
.st-done{background:var(--ink);color:var(--gold-2)}
/* project detail */
.pd-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
.timeline{display:flex;gap:0;margin:18px 0 28px;flex-wrap:wrap}
.tl{flex:1;min-width:96px;text-align:center;position:relative;padding-top:20px;font-size:11px;letter-spacing:.08em;color:var(--muted-2)}
.tl::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:#E3DCCB;transition:all .4s}
.tl::after{content:"";position:absolute;top:11px;left:calc(50% + 8px);right:calc(-50% + 8px);height:1.5px;background:#E3DCCB}
.tl:last-child::after{display:none}
.tl.hit{color:var(--ink)}
.tl.hit::before{background:var(--gold);box-shadow:0 0 0 3px rgba(185,147,90,.25)}
.tl.now{color:var(--gold-deep);font-weight:700}
.pd-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.panel h5{font-size:13px;letter-spacing:.14em;color:var(--gold-deep);margin-bottom:14px;font-weight:700}
.kv{font-size:13px;display:grid;grid-template-columns:110px 1fr;gap:8px 12px}
.kv dt{color:var(--muted)}
/* chat */
.chat-box{display:flex;flex-direction:column;height:420px}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:6px 4px 14px}
.msg{max-width:82%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.7;animation:pageIn .35s}
.msg.me{align-self:flex-end;background:var(--ink);color:#F0E9DB;border-bottom-right-radius:3px}
.msg.them{align-self:flex-start;background:#F1EDE3;border-bottom-left-radius:3px}
.msg .who{display:block;font-size:10px;letter-spacing:.1em;opacity:.6;margin-bottom:3px}
.chat-in{display:flex;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.chat-in input{flex:1}
.chat-closed{border-top:1px solid var(--line);padding-top:12px;font-size:12.5px;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* admin */
.atable{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.atable th,.atable td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.atable thead th{background:var(--ink);color:#CFC8BC;font-weight:500;font-size:11.5px;letter-spacing:.12em}
.badge-mini{font-size:10.5px;border:1px solid var(--gold);color:var(--gold-deep);border-radius:4px;padding:1px 7px;letter-spacing:.06em}

@media (max-width:900px){
  .dash{grid-template-columns:1fr;min-height:auto}
  .side{display:flex;overflow-x:auto;padding:0}
  .side .who{display:none}
  .side a{white-space:nowrap;border-left:none;border-bottom:2px solid transparent}
  .side a.on{border-bottom-color:var(--gold)}
  .pd-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .main h2{font-size:19px}
  /* 案件カードはステータスをタイトル下に回り込ませる */
  .pcard{grid-template-columns:1fr;padding:18px}
  .pcard .st{justify-self:start}
  /* ステータスタイムラインは3列グリッド。折り返し時に線がずれるので接続線は消す */
  .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 4px;margin:14px 0 24px}
  .tl{min-width:0;font-size:10.5px}
  .tl::after{display:none}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:8px}
  .chat-box{height:auto;min-height:56vh}
  .msg{max-width:90%}
  .chat-in{flex-direction:column}
  .chat-in .btn{width:100%}
  .actions{flex-direction:column}
  .actions .btn{width:100%}
  /* 管理画面のテーブルは横スクロールで維持（列を潰すと監視しづらくなるため） */
  .atable{display:block;overflow-x:auto;white-space:nowrap}
}

/* FR-04 複数社マッチング：提示された制作会社ごとのカード */
.match-list{display:grid;gap:16px;margin-bottom:16px}
.match-panel{border-left:3px solid var(--gold)}
.match-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.match-head h5{margin-bottom:0}
.match-thread{border-top:1px solid var(--line);margin-top:6px}