:root{
    --bg:#f1f5f9; --fg:#0f172a; --muted:#64748b; --line:#cbd5e1; --brand:#0ea5e9; --card:#ffffff;
    --radius:32px; --shadow:0 30px 60px -12px rgba(15,23,42,0.18);
    --red:#ef4444;
  }
  html{ font-size:16px; height: 100%; }
  body{ font-family:system-ui,-apple-system,sans-serif; margin:0; background:var(--bg); color:var(--fg); min-height: 100%; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }

  .wrap{ 
    max-width:min(960px,100%); margin:auto; padding:24px min(16px,4vw); 
    min-height: 100vh; display: flex; flex-direction: column; width: 100%;
  }
  
  .wrap.centered { justify-content: center; }
  .wrap.app-active { justify-content: flex-start; }

  h1{ font-size:clamp(2rem,8vw,2.8rem); margin:0 0 40px; font-weight:900; text-align:center; letter-spacing: -0.05em; }

  .card{ background:var(--card); padding:40px 24px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,0.8); margin-bottom:24px; position: relative; width: 100%; }
  .selection-title { font-size: 1.4rem; font-weight: 800; color: var(--muted); margin-bottom: 40px; text-align: center; text-transform: uppercase; letter-spacing: 0.15em; }
  
  #groupSelection .grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  #shopSelection .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .tile-btn {
    background: #fff; border: 1.5px solid var(--line); border-radius: 28px; padding: 32px 16px;
    font-size: 1.65rem; font-weight: 900; color: var(--fg); cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 140px; width: 100%; position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); font-family: inherit;
  }
  .tile-btn:active { background: #f8fafc; transform: scale(0.96); }

  .new-badge {
    position: absolute; top: -8px; right: -8px; width: 28px; height: 28px;
    background: var(--red); border-radius: 50%; border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); display: none;
    z-index: 10;
  }
  .has-update .new-badge { display: block; animation: pulse 2s infinite; }
  @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

  form, .form-container{ background:var(--card); padding:32px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:24px; border:1px solid var(--line); }
  input,textarea,button{ width:100%; display:block; font-size:18px; padding:22px; border:1px solid var(--line); border-radius:20px; background:#fff; margin-bottom:18px; font-family: inherit; }
  
  input[type="password"], input[type="text"] { font-size: 18px; color: var(--fg); -webkit-appearance: none; }
  input::placeholder { color: var(--muted); opacity: 0.6; }
  
  textarea{ min-height:180px; font-size: 1.1rem; }
  .main-action-btn { background: var(--fg); color:#fff; border:none; font-weight:900; min-height:76px; cursor: pointer; font-size: 1.4rem; }
  .main-action-btn:active { opacity: 0.9; }
  
  .backBtn{ background: #f8fafc; color: var(--muted); min-height: 60px; width: 100%; border-radius: 20px; border: 1.5px solid var(--line); font-weight: 800; cursor: pointer; font-size: 1.2rem; margin-top: 10px; }

  /* ヘッダーエリアのレイアウト修正: 左に店舗名、右に切替ボタン */
  #headerArea { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 28px; 
    width: 100%;
  }
  .shopLabel { 
    font-size: 1.8rem; 
    font-weight: 900; 
    color: var(--fg); 
    max-width: 65%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
  }

  /* 掲示板アイテム */
  .post{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin:24px 0; box-shadow: var(--shadow); position: relative; }
  .name{ font-weight:900; font-size: 1.4rem; color: var(--fg); display: flex; justify-content: space-between; align-items: center; }
  .body{ font-size:1.1rem; line-height:1.8; color: #334155; margin-top: 12px; word-break: break-all; }
  .img-container { margin: 18px 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: #f8fafc; cursor: pointer; }
  .img-container img { width: 100%; display: block; }

  /* ライトボックス */
  #lightbox {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95);
    z-index: 40000; display: none; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px;
  }
  #lightbox img { 
    max-width: 100%; max-height: 95vh; object-fit: contain; 
    border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.5); 
    display: block; opacity: 0; transition: opacity 0.3s;
  }
  #lightbox img.loaded { opacity: 1; }
  #lightbox .close-lightbox { 
    position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.2); 
    color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; 
    align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; 
    z-index: 40001;
  }

  /* 返信機能 */
  .reply-btn { background: #f1f5f9; color: var(--brand); padding: 8px 16px; border-radius: 12px; font-size: 0.9rem; font-weight: 900; border: none; cursor: pointer; width: auto; margin: 0; }
  .reply-section { margin-top: 20px; border-top: 1px dashed var(--line); padding-top: 10px; }
  .reply-item { background: #f8fafc; border-radius: 16px; padding: 16px; margin-top: 12px; border-left: 5px solid var(--brand); }
  .reply-badge { font-size: 0.8rem; background: var(--brand); color: #fff; padding: 2px 10px; border-radius: 99px; margin-bottom: 8px; display: inline-block; font-weight: 900; }
  #replyIndicator { display: none; background: #e0f2fe; padding: 12px 20px; border-radius: 14px; margin-bottom: 12px; color: var(--brand); font-weight: 800; font-size: 0.9rem; justify-content: space-between; align-items: center; }

  .preview-button {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 12px 0; padding: 20px; background: var(--brand); color: #fff;
    text-decoration: none; border-radius: 18px; font-weight: 900; font-size: 1.1rem;
    border: none; cursor: pointer; transition: background 0.2s; width: 100%;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3); font-family: inherit;
  }

  /* タブのレイアウト修正: 2カラム均等配置 */
  .tabs{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin:24px 0; }
  .tab{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:16px; font-weight:900; text-align: center; font-size: 1.1rem; cursor: pointer; }
  .tab.active{ background:var(--fg); color:#fff; }

  .hidden{ display:none !important; }

  /* ローダー */
  .loader-overlay {
    position: fixed; inset: 0; background: rgba(241, 245, 249, 0.95);
    display: flex; align-items: center; justify-content: center; z-index: 20000;
  }
  .spinner {
    width: 60px; height: 60px; border-radius: 50%;
    border: 6px solid var(--line); border-top-color: var(--brand);
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-inline { text-align: center; padding: 40px; font-size: 1.5rem; color: var(--muted); }