body, html { width:100vw; height: 100vh; margin: 0; padding: 0; display: flex; overflow:hidden;}
        #right-container { flex: 1; width:100%; height: 100%; position: relative; border:2px solid #fff; }
        #siteLogo{
            position:absolute;
            top:var(--edge);
            left:var(--edge);
            z-index:var(--z-card);
            height:56px;
            width:auto;
            border-radius:12px;
            filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25));
            pointer-events:none;
        }
        /* ハンバーガーメニュー(スマホ幅でのみ表示。PC幅では何もしない) */
        #mobileMenuToggleBtn{
            display:none;
        }
        #mobileDrawer{
            display:none;
        }
.cesium-viewer-bottom {
    display: none !important;
}
#voicearea{
position:static;
width:100%;
}



/*天気*/
  :root{
    --ink:#000000;
    --sub:#4a5568;
    --line:rgba(0,0,0,0.12);
    --accent:#0a6ebd;
    --card-bg:rgba(255,255,255,0.78);
    --card-bg-solid:rgba(255,255,255,0.96);

    /* ---- デザイントークン(配置・余白の統一用) ---- */
    --edge:22px;              /* 画面端からカードまでの余白 */
    --gap:14px;               /* カード同士の隙間 */
    --radius:16px;            /* カード共通の角丸 */
    --radius-sm:10px;         /* 小さめの要素の角丸 */
    --shadow-card:0 10px 30px -8px rgba(15,23,42,0.28), 0 1px 2px rgba(15,23,42,0.06);
    --z-card:900;
  }
  *{box-sizing:border-box;}
/*  html,body{
    margin:0;
    padding:0;
    background:transparent;
  }
  body{
    padding:32px;
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
*/
  .status{
    font-size:12px;
    color:var(--sub);
  }
  .status.error{ color:#ff8080; }

  /* ---- 天気カード ---- */
  @keyframes wcFadeIn{
    from{ opacity:0; transform:translateY(8px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  #cardContainer{
    width:100%;
  }
  .weather-card{
    position:relative;
    width:100%;
    background:var(--card-bg);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 18px 14px;
    box-shadow:var(--shadow-card);
    animation:wcFadeIn .45s cubic-bezier(.22,1,.36,1) both;
    overflow:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    .weather-card{ animation:none; }
  }

  /* カード上端の細いグラデーションアクセント */
  .weather-card::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg,#0a6ebd,#0891b2,#22d3ee);
    border-radius:var(--radius) var(--radius) 0 0;
  }

  /* 山名・標高・日付 */
  .wc-top-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
    min-width:0;
  }
  .wc-mtn{
    display:flex;
    align-items:baseline;
    gap:5px;
    min-width:0;
  }
  .wc-mtn-icon{
    font-size:14px;
    flex:0 0 auto;
  }
  .wc-name{
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .wc-elev{
    font-size:11px;
    font-weight:600;
    color:var(--sub);
    white-space:nowrap;
  }
  .wc-date{
    font-size:11px;
    font-weight:600;
    color:var(--sub);
    white-space:nowrap;
    flex:0 0 auto;
  }

  /* アイコン・気温 */
  .wc-main{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
  }
  .wc-icon{
    width:40px;
    height:40px;
    object-fit:contain;
    flex:0 0 auto;
    filter:drop-shadow(0 3px 6px rgba(10,110,189,.25));
  }
  .wc-temp-block{
    flex:1;
    min-width:0;
  }
  .wc-temp{
    font-size:23px;
    font-weight:800;
    color:var(--ink);
    line-height:1.15;
    letter-spacing:-.01em;
  }
  .wc-temp .lo{
    font-size:13px;
    color:var(--sub);
    font-weight:600;
    margin-left:3px;
  }
  .wc-text{
    font-size:18px;
    color:var(--sub);
    font-weight:600;
    line-height:1.3;
  }

  /* 降水確率・降水量チップ */
  .wc-rows{
    margin-top:10px;
    display:flex;
    gap:6px;
  }
  .wc-chip{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    background:rgba(10,110,189,0.08);
    border:1px solid rgba(10,110,189,0.16);
    border-radius:10px;
    padding:6px 6px;
    min-width:0;
  }
  .wc-chip-icon{ font-size:12px; line-height:1; flex:0 0 auto; }
  .wc-chip-value{ font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; }
  .wc-chip-value.rain{ color:var(--accent); }
  .wc-chip-label{ font-size:10px; color:var(--sub); font-weight:600; white-space:nowrap; }
  .wc-chip-sep{ margin:0 4px; font-weight:400; color:var(--sub); }


  /* ---- Statusカード ---- */
  .status-card{
    position:static;
    width:100%;
    background:var(--card-bg);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 16px;
    box-shadow:var(--shadow-card);
color:var(--ink);
display:flex;
flex-direction:row;
align-items:center;
gap:10px;
  }
  .status-card::before{
    content:'';
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px rgba(10,110,189,0.18);
  }
  .status-card p{
    margin:0;
    line-height:1.3;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .status-card #status{
    font-size:12px;
    font-weight:600;
    color:var(--sub);
    flex:0 0 auto;
  }
  .status-card #result_text{
    font-size:13px;
    font-weight:500;
    color:var(--ink);
    flex:1 1 auto;
  }
  .mic-toggle-btn{
    flex:0 0 auto;
    width:26px;
    height:26px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(0,0,0,0.05);
    color:var(--ink);
    font-size:13px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    transition:background .15s ease, box-shadow .15s ease;
  }
  .mic-toggle-btn:hover{
    background:rgba(0,0,0,0.1);
  }
  .mic-toggle-btn.is-active{
    background:var(--accent);
    color:#fff;
    box-shadow:0 0 0 3px rgba(10,110,189,0.25);
  }

  /* ---- 右上スタック(ステータス＋メニュー)のコンテナ ---- */
  #top-right-stack{
    position:absolute;
    top:var(--edge);
    right:var(--edge);
    z-index:var(--z-card);
    width:280px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:var(--gap);
  }

  /* ---- メニューカード ----
     角丸+overflow-y:autoを同じ要素に付けると、ブラウザによってはスクロールバーが
     角丸からはみ出して表示されてしまうため、角丸/背景/枠線を持つ外側の「シェル」と、
     実際にスクロールする内側の要素を分けている。 */
  .menu-card-shell{
    position:relative;
    width:100%;
    max-height:min(52vh, 520px);
    min-height:0;
    display:flex;
    flex-direction:column;
    background:var(--card-bg);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }
  .menu-card{
    width:100%;
    /* シェルがheightではなくmax-heightしか持たないため、max-height:100%指定だけでは
       正しく計算されずスクロールが発生しない(パーセント指定の仕様上の制約)。
       シェル側をflexコンテナにし、こちら側をflexアイテムとして伸縮させることで、
       はみ出した分が確実にoverflow-y:autoでスクロール表示されるようにしている。 */
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:16px 18px 16px;
color:var(--ink);
    /* OSの「スクロール中だけ表示」設定(オーバーレイスクロールバー)だと
       常時表示のバーが見えないため、常に見える形で明示的にスタイルする */
    scrollbar-width:thin; /* Firefox */
    scrollbar-color:rgba(0,0,0,0.35) transparent; /* Firefox */
  }
  .menu-card::-webkit-scrollbar{
    width:8px;
  }
  .menu-card::-webkit-scrollbar-track{
    background:transparent;
  }
  .menu-card::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,0.35);
    border-radius:4px;
  }
  .menu-card::-webkit-scrollbar-thumb:hover{
    background-color:rgba(0,0,0,0.5);
  }
  .menu-card .info{
    text-align:right;
  }
  .menu-card .mini{
    font-size:9pt;
    color:var(--sub);
  }
  .menu-card ul{ font-size:14px; }
  .menu-card > ul > li{
    border-bottom:1px solid var(--line);
  }
  .menu-card > ul > li:last-child{
    border-bottom:none;
  }
  .menu-card > ul > li > div:first-child{
    font-weight:600;
    border-radius:var(--radius-sm);
    transition:background .15s ease;
  }
  .menu-card > ul > li > div:first-child:hover{
    background:rgba(10,110,189,0.08);
  }
  .menu-card ul ul li{
    border-radius:var(--radius-sm);
    transition:background .15s ease;
  }
  .menu-card ul ul li:hover{
    background:rgba(10,110,189,0.06);
  }

  /* ---- 概要カード ---- */
  /* ---- 左下スタック(コース概要＋AI)のコンテナ ---- */
  #bottom-left-stack{
    position:absolute;
    bottom:var(--edge);
    left:var(--edge);
    z-index:var(--z-card);
    width:clamp(280px, 36vw, 460px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:var(--gap);
  }

  .overview-card{
    position:relative;
    width:100%;
    max-height:min(30vh, 260px);
    min-height:0;
    overflow-y:auto;
    background:var(--card-bg);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 20px 16px;
    box-shadow:var(--shadow-card);
color:var(--ink);
font-size:13px;
line-height:1.5em;
  }
  .overview-card:has(#overview:empty){
    display:none;
  }
  .card-eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--accent);
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .overview-card .card-content:empty{
    display:none;
  }

  /* ---- AIカード(LINE風チャットUI) ---- */
  .aimes-card{
    position:relative;
    width:100%;
    height:min(46vh, 380px);
    min-height:0;
    display:flex;
    flex-direction:column;
    background:var(--card-bg);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }
  /* メッセージ一覧(スクロールする部分) */
  .aimes-messages{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:22px 14px 10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    color:var(--ink);
    font-size:9pt;
    line-height:1.35em;
  }
  .aimes-messages:empty::before{
    content:'AIに山やコースについて質問できます';
    color:var(--sub);
    font-size:11px;
  }
  /* チャット吹き出し */
  .chat-bubble{
    max-width:84%;
    padding:8px 12px;
    border-radius:16px;
    font-size:9pt;
    line-height:1.4em;
    word-break:break-word;
    box-shadow:0 1px 2px rgba(0,0,0,0.08);
  }
  .chat-bubble p:first-child{ margin-top:0; }
  .chat-bubble p:last-child{ margin-bottom:0; }
  .chat-bubble-user{
    align-self:flex-end;
    background:var(--accent);
    color:#fff;
    border-bottom-right-radius:4px;
  }
  .chat-bubble-user, .chat-bubble-user *{ color:#fff !important; }
  .chat-bubble-bot{
    align-self:flex-start;
    background:#ffffff;
    color:var(--ink);
    border:1px solid var(--line);
    border-bottom-left-radius:4px;
  }
  .chat-bubble-bot .aimes-label{
    display:block;
    font-size:9px;
    font-weight:700;
    color:var(--accent);
    margin-bottom:3px;
    letter-spacing:.03em;
  }
  .aimes-typing{
    color:var(--sub);
    letter-spacing:2px;
    animation:aimesBlink 1.2s ease-in-out infinite;
  }
  @keyframes aimesBlink{
    0%, 100%{ opacity:.35; }
    50%{ opacity:1; }
  }
  .chat-bubble-system{
    align-self:center;
    background:rgba(0,0,0,0.06);
    color:var(--sub);
    font-size:10.5px;
    padding:5px 10px;
    border-radius:10px;
    max-width:92%;
    text-align:left;
    box-shadow:none;
  }
  /* 入力欄(常にカード下部に固定) */
  .aimes-input-row{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-top:1px solid var(--line);
    background:rgba(255,255,255,0.5);
  }
  .aimes-input{
    flex:1 1 auto;
    min-width:0;
    border:1px solid var(--line);
    border-radius:18px;
    padding:8px 14px;
    font-size:13px;
    outline:none;
    background:#fff;
    color:var(--ink);
    font-family:inherit;
  }
  .aimes-input:focus{
    border-color:var(--accent);
  }
  .aimes-send-btn{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    background:var(--accent);
    color:#fff;
    font-size:15px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease, transform .1s ease;
    padding:0;
  }
  .aimes-send-btn:hover{ background:#0857a0; }
  .aimes-send-btn:active{ transform:scale(0.94); }
  .aimes-send-btn:disabled{ opacity:.5; cursor:default; }
  /* voiceareaから移設したマイクボタンを送信ボタンと同じ見た目に揃える */
  .aimes-input-row .mic-toggle-btn{
    flex:0 0 auto;
    width:34px;
    height:34px;
    font-size:15px;
  }


/* github-markdown-cssの背景や文字色をダークモード/背景に馴染ませる設定 */
.markdown-body {
/*    background-color: transparent !important; */
    color: #000000 !important; /* 文字色を黒に */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 9pt !important;
}

/* 見出しやコードブロックの細かなスタイル調整 */
.markdown-body h1 {
    font-size:11pt!important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #000000 !important;
}
.markdown-body h2 {
    font-size:10.5pt !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #000000 !important;
}
.markdown-body pre {
    font-size:9pt !important;
/*    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1); */
}
.markdown-body p {
    font-size:9pt !important;
/*    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1); */
}
.markdown-body strong {
    font-size:9pt !important;
/*    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1); */
}
.markdown-body code {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #0a6ebd !important;
}

/* ---- コース追加ボタン／モーダル ---- */
#menuarea-wrap{
    position:relative;
    width:100%;
}
.ym-filter-bar{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:4px;
    margin-bottom:8px;
    min-width:0;
    background:var(--card-bg);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--line);
    border-radius:var(--radius-sm, 10px);
    padding:6px 78px 6px 8px;
    box-shadow:var(--shadow-card);
}
.ym-filter-toggle{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:12px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    user-select:none;
    flex:1 1 auto;
    min-width:0;
}
.ym-filter-toggle-text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:32px;
}
/* スライドスイッチ */
.ym-filter-toggle .switch{
    position:relative;
    display:inline-block;
    flex:0 0 auto;
    width:32px;
    height:18px;
}
.ym-filter-toggle .switch input{
    position:absolute;
    inset:0;
    margin:0;
    opacity:0;
    cursor:pointer;
    z-index:1;
}
.ym-filter-toggle .switch-track{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.22);
    border-radius:999px;
    transition:background-color .2s ease;
}
.ym-filter-toggle .switch-thumb{
    position:absolute;
    top:2px;
    left:2px;
    width:14px;
    height:14px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,0.35);
    transition:transform .2s ease;
}
.ym-filter-toggle .switch input:checked ~ .switch-track{
    background:var(--accent);
}
.ym-filter-toggle .switch input:checked ~ .switch-track .switch-thumb{
    transform:translateX(14px);
}
.ym-filter-toggle .switch input:focus-visible ~ .switch-track{
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.ym-filter-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0;
    flex:0 0 auto;
}
.ym-filter-nav.disabled{
    opacity:0.4;
    pointer-events:none;
}
.ym-filter-bar button{
    border:none;
    background:none;
    cursor:pointer;
    color:var(--ink);
}
.ym-filter-bar #ymPrevBtn,
.ym-filter-bar #ymNextBtn{
    flex:0 0 auto;
    width:20px;
    height:20px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    padding:0;
}
.ym-filter-bar #ymPrevBtn:hover,
.ym-filter-bar #ymNextBtn:hover{
    background:rgba(0,0,0,0.08);
}
.ym-filter-bar #ymLabelBtn{
    flex:0 0 auto;
    padding:2px 3px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
}
.ym-filter-bar #ymLabelBtn:hover{
    background:rgba(0,0,0,0.08);
}
.course-upload-fab{
    position:absolute;
    top:-10px;
    right:-10px;
    z-index:calc(var(--z-card) + 1);
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    border:2px solid var(--card-bg-solid);
    border-radius:50%;
    padding:0;
    color:#ffffff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(10,110,189,0.45);
    transition:transform .15s ease, box-shadow .15s ease;
}
.course-upload-fab:hover{
    transform:scale(1.08);
    box-shadow:0 8px 20px rgba(10,110,189,0.55);
}
.photo-upload-fab{
    right:34px;
    background:#2e9e5b;
    box-shadow:0 6px 16px rgba(46,158,91,0.45);
}
.photo-upload-fab:hover{
    box-shadow:0 8px 20px rgba(46,158,91,0.55);
}

.course-upload-modal{
    position:fixed;
    inset:0;
    z-index:10001;
    background:rgba(0,0,0,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
}
.course-upload-panel{
    position:relative;
    width:360px;
    max-width:90vw;
    max-height:85vh;
    overflow-y:auto;
    background:var(--card-bg-solid);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px 22px;
    color:var(--ink);
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.auth-modal-close{
    position:absolute;
    top:10px;
    right:12px;
    background:none;
    border:none;
    font-size:18px;
    line-height:1;
    color:var(--sub);
    cursor:pointer;
    padding:2px 6px;
}
.auth-modal-close:hover{
    color:var(--ink);
}
.course-upload-panel h3{
    margin:0 0 14px;
    font-size:15px;
    border-bottom:1px dashed var(--line);
    padding-bottom:8px;
    color:var(--ink);
}
.cu-field{ margin-bottom:12px; }
.cu-field label{
    display:block;
    font-size:12px;
    color:#000000;
    margin-bottom:4px;
}
.cu-field input[type="text"],
.cu-field input[type="email"],
.cu-field input[type="password"],
.cu-field textarea{
    width:100%;
    box-sizing:border-box;
    background:rgba(0,0,0,0.06);
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--ink);
    padding:6px 8px;
    font-size:13px;
}
.cu-field input[type="file"]{
    width:100%;
    font-size:12px;
    color:#000000;
}
.cu-hint{
    font-size:11px;
    color:#000000;
    margin-top:4px;
}
.cu-visibility-options{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:4px;
}
.cu-radio{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:400;
    color:#000000;
    cursor:pointer;
}
.cu-radio input{
    margin:0;
}
.cu-lock-icon{
    font-size:11px;
    opacity:0.7;
    margin-right:2px;
}
.course-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
}
.course-main{
    flex:1 1 auto;
    min-width:0;
}
.course-actions{
    display:flex;
    gap:2px;
    flex:0 0 auto;
}
.course-action-btn{
    background:none;
    border:none;
    cursor:pointer;
    font-size:12px;
    line-height:1;
    padding:3px 5px;
    border-radius:4px;
    opacity:0.75;
}
.course-action-btn:hover{
    background:rgba(0,0,0,0.08);
    opacity:1;
}
.cu-buttons{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:16px;
}
.cu-buttons button{
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 14px;
    font-size:13px;
    cursor:pointer;
    background:rgba(0,0,0,0.05);
    color:var(--ink);
}
.cu-buttons button.primary{
    background:var(--accent);
    color:#ffffff;
    font-weight:600;
    border-color:var(--accent);
}
#cu-status{
    font-size:12px;
    margin-top:10px;
    line-height:1.5em;
    white-space:pre-wrap;
    color:var(--ink);
}

/* ---- ログイン / 新規会員登録 ---- */
.auth-tabs{
    display:flex;
    gap:6px;
    margin-bottom:14px;
    border-bottom:1px dashed var(--line);
}
.auth-tab{
    flex:1;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    padding:8px 4px;
    font-size:13px;
    font-weight:600;
    color:var(--sub);
    cursor:pointer;
}
.auth-tab.active{
    color:var(--accent);
    border-bottom-color:var(--accent);
}
.auth-form .cu-field:last-of-type{
    margin-bottom:4px;
}

/* ---- ログイン/登録フォームのモダンな入力欄 ---- */
.auth-form .cu-field{
    margin-bottom:14px;
}
.auth-form .cu-field label{
    font-size:12px;
    font-weight:600;
    color:var(--sub);
    margin-bottom:6px;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"]{
    background-color:rgba(0,0,0,0.035);
    background-repeat:no-repeat;
    background-position:13px center;
    background-size:17px;
    border:1.5px solid var(--line);
    border-radius:12px;
    padding:12px 14px 12px 40px;
    font-size:14.5px;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-form input[type="email"]::placeholder,
.auth-form input[type="password"]::placeholder,
.auth-form input[type="text"]::placeholder{
    color:var(--sub);
    opacity:0.65;
}
.auth-form input[type="email"]:hover,
.auth-form input[type="password"]:hover,
.auth-form input[type="text"]:hover{
    border-color:rgba(10,110,189,0.45);
}
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="text"]:focus{
    outline:none;
    border-color:var(--accent);
    background-color:#fff;
    box-shadow:0 0 0 4px rgba(10,110,189,0.14);
}
/* メールアドレス欄: 封筒アイコン */
.auth-form input[type="email"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23708090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
/* パスワード欄: 鍵アイコン */
.auth-form input[type="password"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23708090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
/* ニックネーム欄: 人アイコン */
#register-nickname{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23708090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
.auth-status{
    font-size:12px;
    margin-top:6px;
    min-height:1.4em;
    line-height:1.5em;
    white-space:pre-wrap;
    color:#d64545;
}
.auth-status.success{
    color:#0a6ebd;
}
.auth-resend{
    margin-top:4px;
}
.auth-resend-btn{
    background:none;
    border:none;
    padding:0;
    font-size:12px;
    color:var(--accent);
    text-decoration:underline;
    cursor:pointer;
}
.auth-resend-btn:disabled{
    color:var(--sub);
    text-decoration:none;
    cursor:default;
}
#userBar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    background:var(--card-bg);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:6px 10px;
    box-shadow:var(--shadow-card);
}
#userBar #userBarEmail{
    font-size:12px;
    color:var(--ink);
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:170px;
}
#userBar button{
    flex:0 0 auto;
    border:1px solid var(--line);
    border-radius:8px;
    padding:4px 10px;
    font-size:11px;
    cursor:pointer;
    background:rgba(0,0,0,0.05);
    color:var(--ink);
}
#userBar button.icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    padding:0;
}
#userBar button.icon-btn svg{
    width:15px;
    height:15px;
}
#userBar button.icon-btn:hover{
    background:rgba(0,0,0,0.1);
}

/* ================= スマートフォン向けレイアウト調整 ================= */
@media (max-width: 768px){
    :root{
        --edge:8px;
        --gap:8px;
    }

    /* iOSのSafariは入力欄のfont-sizeが16px未満だとフォーカス時に自動ズームしてしまうため、
       スマホでは全てのフォーム部品を16px以上にする */
    input, textarea, select{
        font-size:16px !important;
    }

    /* ノッチ・ホームインジケーター等がある端末向けに、実際の余白がedge未満にならないようにする */
    #siteLogo{
        top:max(var(--edge), env(safe-area-inset-top));
        left:max(var(--edge), env(safe-area-inset-left));
    }
    #top-right-stack{
        top:max(var(--edge), env(safe-area-inset-top));
        right:max(var(--edge), env(safe-area-inset-right));
    }
    #bottom-left-stack{
        bottom:max(var(--edge), env(safe-area-inset-bottom));
        left:max(var(--edge), env(safe-area-inset-left));
    }
    .course-upload-modal{
        padding-bottom:env(safe-area-inset-bottom);
    }

    /* ---- ハンバーガーメニュー(タブ分割ドロワー) ----
       スマホでは地図が見えるよう、カード類は常に非表示にしておき、
       右上のボタンをタップした時だけ「山・コース／天気・AI／アカウント」の
       3タブに分かれたドロワーを表示する。
       中身の実要素はJS(setupMobileMenuToggle)がここへ移動してくる。 */
    #mobileMenuToggleBtn{
        display:flex;
        align-items:center;
        justify-content:center;
        position:absolute;
        top:max(var(--edge), env(safe-area-inset-top));
        right:max(var(--edge), env(safe-area-inset-right));
        z-index:calc(var(--z-card) + 10);
        width:44px;
        height:44px;
        padding:0;
        border-radius:50%;
        border:1px solid var(--line);
        background:var(--card-bg-solid);
        box-shadow:var(--shadow-card);
        font-size:20px;
        line-height:1;
        color:var(--ink);
        cursor:pointer;
    }
    /* PC用のスタック自体は常に非表示にする(中身は実行時にドロワー側へ移動済みのため空になる) */
    #top-right-stack,
    #bottom-left-stack{
        display:none;
    }

    #mobileDrawer{
        display:none;
        position:absolute;
        top:calc(max(var(--edge), env(safe-area-inset-top)) + 52px);
        left:var(--edge);
        right:var(--edge);
        bottom:max(var(--edge), env(safe-area-inset-bottom));
        z-index:calc(var(--z-card) + 8);
        flex-direction:column;
        background:var(--card-bg-solid);
        border:1px solid var(--line);
        border-radius:var(--radius);
        box-shadow:var(--shadow-card);
        overflow:hidden;
    }
    body.mobile-panels-open #mobileDrawer{
        display:flex;
    }
    #mobileTabBar{
        display:flex;
        flex:0 0 auto;
        border-bottom:1px solid var(--line);
    }
    .mobile-tab-btn{
        flex:1;
        padding:12px 4px;
        font-size:13px;
        font-weight:700;
        text-align:center;
        background:none;
        border:none;
        border-bottom:3px solid transparent;
        color:var(--sub);
        cursor:pointer;
    }
    .mobile-tab-btn.active{
        color:var(--accent);
        border-bottom-color:var(--accent);
    }
    .mobile-tab-panel{
        flex:1 1 auto;
        overflow-y:auto;
        min-height:0;
        padding:12px;
    }

    /* ドロワー内に移動してきたカード類は、絶対配置ではなく通常フローで表示する。
       (メニュータブ・コース概要は、タブパネル自体がスクロールするので個別の高さ制限は解除する。
        ai-mesだけは「常に約5行+スクロール」という仕様のため、個別のmax-heightを維持する) */
    #mobileDrawer .menu-card-shell,
    #mobileDrawer .menu-card,
    #mobileDrawer #overviewCardWrap{
        max-height:none;
        overflow:visible;
    }
    #mobileDrawer .status-card,
    #mobileDrawer .weather-card,
    #mobileDrawer #userBar{
        width:100%;
    }
    #mobileDrawer #userBar{
        margin-bottom:8px;
    }

    /* 右上スタック(ステータス・メニュー・追加ボタン)。固定280pxだと画面からはみ出すため可変にする */
    #top-right-stack{
        width:min(280px, calc(100vw - 2 * var(--edge)));
    }
    /* 左下スタック(コース概要・AI)も同様に画面幅へ収める */
    #bottom-left-stack{
        width:min(460px, calc(100vw - 2 * var(--edge)));
    }

    /* 画面が縦に狭いスマホでは、メニューやカードの高さを抑えて地図の見える範囲を確保する */
    .menu-card-shell{
        max-height:min(34vh, 320px);
    }
    .menu-card{
        padding:12px 14px 12px;
        font-size:13px;
    }
    .overview-card{
        max-height:min(20vh, 180px);
        min-height:0;
        padding:10px 14px 12px;
        font-size:12px;
    }
    .aimes-card{
        height:min(40vh, 340px);
        min-height:0;
    }
    .aimes-messages{
        padding:18px 12px 8px;
        font-size:8.5pt;
    }
    .aimes-input-row{
        padding:8px;
    }
    .aimes-input{
        font-size:13px;
    }
    .weather-card{
        padding:10px 14px 10px;
    }

    /* ボタン類はタッチ操作しやすいよう44px以上を確保する */
    .course-upload-fab{
        width:44px;
        height:44px;
        font-size:20px;
    }
    .photo-upload-fab{
        right:50px;
    }
    .ym-filter-bar{
        padding-right:100px;
    }
    .mic-toggle-btn{
        width:34px;
        height:34px;
        font-size:15px;
    }
    #userBar{
        flex-wrap:wrap;
        row-gap:4px;
    }
    #userBar button{
        padding:6px 10px;
        font-size:12px;
    }
    #userBarEmail{
        max-width:120px;
    }

    /* ロゴは小さめに */
    #siteLogo{
        height:38px;
    }

    /* モーダル(ログイン・コース追加・写真追加など)は画面幅いっぱいに近い形で使う */
    .course-upload-panel{
        width:100%;
        max-width:100vw;
        max-height:92vh;
        padding:16px;
        border-radius:16px 16px 0 0;
    }
    .course-upload-modal{
        align-items:flex-end; /* スマホでは下からせり上がるシート風にする */
    }
    .cu-buttons{
        flex-wrap:wrap;
    }
    .cu-buttons button{
        flex:1 1 auto;
        min-height:40px;
    }
}

/* 特に幅の狭い端末(縦向きスマホの多く)向けの追加調整 */
@media (max-width: 420px){
    #top-right-stack, #bottom-left-stack{
        width:calc(100vw - 2 * var(--edge));
    }
    .menu-card-shell{
        max-height:30vh;
    }
    #userBarEmail{
        max-width:90px;
    }
}