/* ============================================================
   AI APP TRAINING LAB v2.3.1 — GUIDED UX LAYER
   目的ベースの導線・現在地表示・優先度の明確化を担当する追加レイヤー。
   既存の styles.css / premium.css の配色とトーンをそのまま利用する。
   ============================================================ */

:root{
  --ux-gap:14px;
  --ux-radius:20px;
  --ux-radius-sm:14px;
  --ux-tap:52px;
}

/* ------------------------------------------------------------
   1. 進行状況（現在地）の表示範囲
   制作フローに関係する画面だけで4ステップを表示する。
   ------------------------------------------------------------ */
.workflow-dock{display:none!important}
body[data-screen="promptbuilder"] .workflow-dock,
body[data-screen="prompts"] .workflow-dock,
body[data-screen="editor"] .workflow-dock,
body[data-screen="preview"] .workflow-dock,
body[data-screen="repair"] .workflow-dock,
body[data-screen="export"] .workflow-dock{display:flex!important}

@media(max-width:820px){
  body[data-screen="promptbuilder"] .workflow-dock,
  body[data-screen="prompts"] .workflow-dock,
  body[data-screen="editor"] .workflow-dock,
  body[data-screen="preview"] .workflow-dock,
  body[data-screen="repair"] .workflow-dock,
  body[data-screen="export"] .workflow-dock{display:grid!important}
}

/* ------------------------------------------------------------
   2. ホーム：目的から選ぶ3つの入口
   ------------------------------------------------------------ */
.goal-lead{
  margin:22px 0 12px;
  font-size:15px;
  font-weight:800;
  color:var(--text);
}

.goal-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:20px;
}

.goal-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:84px;
  padding:16px 16px 16px 15px;
  text-align:left;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:var(--ux-radius);
  background:var(--panel);
  box-shadow:var(--shadow-sm,0 8px 24px rgba(0,0,0,.14));
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.goal-card:hover{transform:translateY(-2px);border-color:rgba(91,140,255,.42)}
.goal-card:active{transform:translateY(0)}

.goal-mark{
  display:grid;
  place-items:center;
  flex:0 0 50px;
  width:50px;
  height:50px;
  border-radius:16px;
  font-size:20px;
  font-weight:900;
  color:#fff;
  background:var(--brand-gradient,linear-gradient(118deg,#087fa7,#3a66d2 48%,#7750c9));
  box-shadow:0 10px 24px rgba(58,102,210,.26);
}

.goal-text{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 auto}
.goal-text b{font-size:17px;line-height:1.3;letter-spacing:.01em}
.goal-text small{font-size:12.5px;line-height:1.5;color:var(--muted)}
.goal-card>i{
  flex:0 0 auto;
  font-style:normal;
  font-size:18px;
  font-weight:700;
  color:var(--muted);
  transition:transform .18s ease;
}
.goal-card:hover>i{transform:translateX(3px);color:var(--text)}

/* いちばん押してほしい入口を視覚的に一段強くする */
.goal-card.goal-create{
  border-color:rgba(91,140,255,.4);
  background:
    linear-gradient(135deg,rgba(45,120,235,.1),rgba(120,86,220,.07)),
    var(--panel);
  box-shadow:0 16px 40px rgba(52,96,196,.16);
}
.goal-card.goal-create .goal-text b{font-size:18px}

.goal-card.goal-fix .goal-mark{
  background:linear-gradient(135deg,#2f9f86,#2a7fb8);
  box-shadow:0 10px 24px rgba(42,127,184,.24);
}
.goal-card.goal-help .goal-mark{
  background:linear-gradient(135deg,#e07a3a,#c8434f);
  box-shadow:0 10px 24px rgba(200,67,79,.22);
}

body.light .goal-card{background:#fff}
body.light .goal-card.goal-create{
  background:linear-gradient(135deg,rgba(45,120,235,.07),rgba(120,86,220,.05)),#fff;
}

/* ------------------------------------------------------------
   3. 折りたたみ（普段使わない機能を一段奥へ）
   ------------------------------------------------------------ */
.tool-details{
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:var(--ux-radius);
  background:var(--panel);
  overflow:hidden;
}
.tool-details>summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:var(--ux-tap);
  padding:14px 44px 14px 16px;
  position:relative;
  cursor:pointer;
  list-style:none;
  color:var(--text);
}
.tool-details>summary::-webkit-details-marker{display:none}
.tool-details>summary b{font-size:14.5px;font-weight:800}
.tool-details>summary small{font-size:12px;color:var(--muted);line-height:1.5}
.tool-details>summary::after{
  content:"▾";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color:var(--muted);
  transition:transform .2s ease;
}
.tool-details[open]>summary::after{transform:translateY(-50%) rotate(180deg)}
.tool-details[open]>summary{border-bottom:1px solid var(--line)}
.tool-details>summary:hover{background:rgba(120,160,230,.07)}
.tool-details>*:not(summary){padding:14px 16px 16px}
.tool-details .home-feature-grid,
.tool-details .export-grid,
.tool-details .repair-grid{margin:0}

/* 折りたたみの中でも既存ツールバーが崩れないようにする */
.tool-details .editor-toolbar,
.tool-details .preview-controls{margin:0;flex-wrap:wrap}

.home-tools.instructor-tools>summary b{color:var(--muted)}

/* ------------------------------------------------------------
   4. マイクロコピー・次の行動のヒント
   ------------------------------------------------------------ */
.micro-hint{
  display:block;
  margin-top:9px;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}

.next-hint{
  margin:16px 0;
  padding:13px 15px;
  border:1px dashed var(--line);
  border-radius:var(--ux-radius-sm);
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted);
  background:rgba(120,160,230,.06);
}
.next-hint b{color:var(--text)}

/* ------------------------------------------------------------
   5. コードを貼る画面：いちばん押してほしいボタン
   ------------------------------------------------------------ */
.paste-lead{margin:0 0 16px}
.paste-cta{width:100%;justify-content:center;gap:10px}
.paste-cta span{font-size:18px}

/* ------------------------------------------------------------
   6. プレビュー後の3方向の分岐
   ------------------------------------------------------------ */
.next-choice{
  margin:0 0 18px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:var(--ux-radius);
  background:var(--panel);
  box-shadow:var(--shadow-sm,0 8px 24px rgba(0,0,0,.12));
}
.next-choice-lead{
  margin:0 0 12px;
  font-size:14px;
  font-weight:800;
  color:var(--text);
}
.choice-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.choice-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:96px;
  padding:13px 9px;
  text-align:center;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:var(--ux-radius-sm);
  background:var(--panel2);
  transition:transform .16s ease,border-color .16s ease;
}
.choice-card:hover{transform:translateY(-2px)}
.choice-card span{font-size:20px;line-height:1}
.choice-card b{font-size:13.5px;line-height:1.35}
.choice-card small{font-size:11px;line-height:1.4;color:var(--muted)}

.choice-card.choice-good{
  border-color:rgba(38,178,126,.45);
  background:linear-gradient(160deg,rgba(47,199,142,.14),transparent 70%),var(--panel2);
}
.choice-card.choice-good b{color:var(--good)}
.choice-card.choice-fix{
  border-color:rgba(91,140,255,.42);
  background:linear-gradient(160deg,rgba(91,140,255,.13),transparent 70%),var(--panel2);
}
.choice-card.choice-fix b{color:var(--blue)}
.choice-card.choice-help{
  border-color:rgba(255,140,110,.4);
  background:linear-gradient(160deg,rgba(255,123,138,.13),transparent 70%),var(--panel2);
}
.choice-card.choice-help b{color:var(--danger)}

/* ------------------------------------------------------------
   7. 修正ハブ
   ------------------------------------------------------------ */
.mini-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
  counter-reset:none;
}
.mini-flow li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:11px 6px;
  text-align:center;
  font-size:11.5px;
  line-height:1.4;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:var(--ux-radius-sm);
  background:var(--panel);
}
.mini-flow li b{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:9px;
  font-size:12px;
  color:#fff;
  background:var(--brand-gradient,linear-gradient(118deg,#087fa7,#3a66d2 48%,#7750c9));
}

.repair-category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.repair-category{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:104px;
  padding:13px 8px;
  text-align:center;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:var(--ux-radius-sm);
  background:var(--panel2);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.repair-category:hover{transform:translateY(-2px)}
.repair-category-icon{font-size:22px;line-height:1}
.repair-category b{font-size:13.5px;line-height:1.3}
.repair-category small{font-size:11px;line-height:1.4;color:var(--muted)}
.repair-category.active{
  border-color:rgba(91,140,255,.55);
  background:linear-gradient(160deg,rgba(91,140,255,.16),transparent 72%),var(--panel2);
  box-shadow:inset 0 0 0 1px rgba(91,140,255,.2);
}

.repair-pick-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.repair-pick-lead{
  margin:0 0 4px;
  font-size:13px;
  font-weight:800;
  color:var(--text);
}
.repair-pick{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:var(--ux-tap);
  padding:13px 15px;
  text-align:left;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:var(--ux-radius-sm);
  background:var(--panel2);
  transition:border-color .16s ease,transform .16s ease;
}
.repair-pick:hover{transform:translateX(2px);border-color:rgba(91,140,255,.45)}
.repair-pick span{font-size:13.5px;line-height:1.55;min-width:0}
.repair-pick i{font-style:normal;color:var(--muted);flex:0 0 auto}
.repair-pick-free{border-style:dashed}

.repair-input-label{
  display:block;
  margin:14px 0 8px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.repair-builder .btn.xl.full{width:100%;justify-content:center;margin-top:12px}
.repair-next .button-row{flex-wrap:wrap;gap:10px}

/* ------------------------------------------------------------
   8. 保存画面：おすすめと完了状態
   ------------------------------------------------------------ */
.export-recommend{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:18px 0;
  padding:20px 18px 18px;
  border:1px solid rgba(91,140,255,.42);
  border-radius:var(--ux-radius);
  background:
    linear-gradient(140deg,rgba(45,120,235,.12),rgba(120,86,220,.07)),
    var(--panel);
  box-shadow:0 18px 46px rgba(52,96,196,.16);
}
.recommend-badge{
  align-self:flex-start;
  padding:5px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  color:#fff;
  background:var(--brand-gradient,linear-gradient(118deg,#087fa7,#3a66d2 48%,#7750c9));
}
.recommend-copy h2{margin:0 0 7px;font-size:20px;line-height:1.3}
.recommend-copy p{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.export-recommend .btn.xl{width:100%;justify-content:center}
body.light .export-recommend{
  background:linear-gradient(140deg,rgba(45,120,235,.08),rgba(120,86,220,.05)),#fff;
}

.export-done{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin:18px 0;
  padding:20px 18px;
  border:1px solid rgba(38,178,126,.45);
  border-radius:var(--ux-radius);
  background:linear-gradient(140deg,rgba(47,199,142,.14),transparent 68%),var(--panel);
}
.export-done-mark{
  display:grid;
  place-items:center;
  flex:0 0 56px;
  width:56px;
  height:56px;
  border-radius:18px;
  font-size:26px;
  color:#fff;
  background:linear-gradient(135deg,#2fb07d,#2a8f9e);
  box-shadow:0 12px 28px rgba(42,143,158,.26);
}
.export-done-copy{flex:1 1 220px;min-width:0}
.export-done-copy small{
  display:block;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  color:var(--good);
}
.export-done-copy h2{margin:6px 0 6px;font-size:20px;line-height:1.3}
.export-done-copy p{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
.export-done-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.export-done-actions .btn{flex:1 1 200px;justify-content:center}

/* ------------------------------------------------------------
   9. モバイル「その他」シートのグループ化
   ------------------------------------------------------------ */
.bottom-sheet{
  max-height:min(78dvh,640px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.more-groups{padding-bottom:4px}
.more-label{
  margin:16px 0 0;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.14em;
  color:var(--muted);
}
.more-label:first-child{margin-top:8px}
.more-groups .more-grid{margin-top:8px}

/* ------------------------------------------------------------
   10. レスポンシブ（320px〜）
   ------------------------------------------------------------ */
@media(max-width:900px){
  .repair-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  .goal-card{min-height:78px;padding:14px}
  .goal-mark{flex:0 0 44px;width:44px;height:44px;border-radius:14px;font-size:18px}
  .goal-text b{font-size:15.5px}
  .goal-card.goal-create .goal-text b{font-size:16px}
  .goal-text small{font-size:11.5px}

  .choice-row{grid-template-columns:1fr;gap:9px}
  .choice-card{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-height:var(--ux-tap);
    padding:12px 14px;
    text-align:left;
  }
  .choice-card span{flex:0 0 24px;font-size:19px}
  .choice-card b{font-size:14px}
  .choice-card small{display:block}

  .mini-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .export-done-mark{flex:0 0 46px;width:46px;height:46px;font-size:22px}
  .recommend-copy h2{font-size:18px}
}

@media(max-width:400px){
  .repair-category{min-height:96px;padding:11px 6px}
  .repair-category b{font-size:12.5px}
  .repair-category small{font-size:10.5px}
  .tool-details>summary{padding:13px 40px 13px 14px}
  .tool-details>*:not(summary){padding:12px 12px 14px}
  .next-choice{padding:13px}
  .goal-text small{font-size:11px}
}

/* 340px以下でも横スクロールを出さない */
@media(max-width:340px){
  .mini-flow{grid-template-columns:1fr 1fr;gap:6px}
  .repair-category-grid{gap:8px}
  .goal-card{gap:11px}
}

/* ------------------------------------------------------------
   11. アクセシビリティ・動作設定
   ------------------------------------------------------------ */
.goal-card:focus-visible,
.choice-card:focus-visible,
.repair-category:focus-visible,
.repair-pick:focus-visible,
.tool-details>summary:focus-visible{
  outline:3px solid rgba(50,216,255,.6);
  outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  .goal-card,.choice-card,.repair-category,.repair-pick,.tool-details>summary::after{
    transition:none!important;
  }
  .goal-card:hover,.choice-card:hover,.repair-category:hover,.repair-pick:hover{transform:none}
}

/* 下部ナビとコンテンツが重ならないよう、末尾に余白を確保する */
@media(max-width:1024px){
  body[data-screen="repair"] .main-content,
  body[data-screen="export"] .main-content,
  body[data-screen="promptbuilder"] .main-content{
    padding-bottom:calc(112px + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------
   12. はみ出し防止と主要CTAの幅の統一
   長い日本語ラベルでも横スクロールを出さない。
   ------------------------------------------------------------ */
.goal-text b,.goal-text small,
.choice-card b,.choice-card small,
.repair-category b,.repair-category small,
.repair-pick span,
.recommend-copy h2,.recommend-copy p,
.export-done-copy h2,.export-done-copy p,
.tool-details>summary b,.tool-details>summary small,
.next-hint,.micro-hint,.mini-flow li{
  overflow-wrap:anywhere;
  word-break:normal;
  min-width:0;
}

.paste-cta,
.export-recommend .btn.xl,
.repair-builder .btn.xl.full,
.prompt-builder-output .btn.xl.full{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  text-align:center;
}

/* 主要CTAの下に続く補助ボタンは一段弱く見せる */
.prompt-builder-output .btn.secondary.full{margin-top:10px}

/* 折りたたみ内のツールバーが親幅を超えないようにする */
.tool-details .editor-toolbar,
.tool-details .preview-controls,
.tool-details .segmented{max-width:100%;min-width:0}
.tool-details .preview-controls{gap:8px}

/* iPhoneのキーボード表示中でも修正入力が隠れないようにする */
.keyboard-open .repair-builder{scroll-margin-bottom:120px}


/* ============================================================
   v2.3.1 — MOBILE NAV / MORE-SHEET STABILITY PASS
   実機フィードバック: 「その他」のアイコンと、下から出過ぎるシートを修正。
   ============================================================ */

/* 文字の「•••」はOS/フォントで位置が不揃いになるため、4ドットのSVGへ統一。 */
.bottom-nav .nav-more-icon{
  display:grid;
  place-items:center;
  width:27px;
  height:25px;
  padding:5px;
  border-radius:9px;
  color:currentColor;
  fill:currentColor;
  overflow:visible;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.bottom-nav .nav-more-icon rect{fill:currentColor}
.bottom-nav button.active .nav-more-icon{
  color:#fff;
  background:var(--brand-gradient);
  box-shadow:0 7px 17px rgba(63,109,224,.23);
}

/* Dialog 自体へフォーカスしても、タッチ操作時に大きなフォーカスリングを出さない。 */
.bottom-sheet:focus{outline:none}

/* iPhone / Android: 「その他」はほぼ全画面のメニューとして上端から見せる。
   下から78vhだけ出す旧仕様だと、項目が画面外へ落ちて余計なスクロールが発生していた。 */
@media(max-width:639px){
  #moreSheet.sheet-backdrop{
    align-items:stretch;
    justify-content:center;
    padding:max(6px,env(safe-area-inset-top)) 0 0;
  }
  #moreSheet .bottom-sheet{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    max-height:none;
    min-height:0;
    padding:8px 14px calc(12px + env(safe-area-inset-bottom));
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:26px 26px 0 0;
    overflow:hidden;
  }
  #moreSheet .sheet-handle{
    flex:0 0 auto;
    width:44px;
    height:5px;
    margin:2px auto 8px;
  }
  #moreSheet .section-title-row{
    flex:0 0 auto;
    min-height:50px;
    padding:0 2px 4px;
  }
  #moreSheet .section-title-row h2{
    margin:0;
    font-size:clamp(24px,7vw,30px);
    letter-spacing:-.035em;
  }
  #moreSheet .section-title-row .icon-btn{
    width:44px;
    min-width:44px;
    height:44px;
    border-radius:14px;
  }
  #moreSheet .more-groups{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 1px calc(6px + env(safe-area-inset-bottom));
  }
  #moreSheet .more-label{
    margin:10px 0 0;
    font-size:10px;
    line-height:1.2;
  }
  #moreSheet .more-label:first-child{margin-top:5px}
  #moreSheet .more-groups .more-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:7px;
  }
  #moreSheet .more-grid button{
    min-width:0;
    min-height:70px;
    padding:9px 7px;
    border-radius:16px;
    font-size:20px;
    line-height:1;
  }
  #moreSheet .more-grid button span{
    margin-top:6px;
    font-size:11.5px;
    line-height:1.25;
    overflow-wrap:anywhere;
  }
}

/* 低い横画面でも、上端から使えるメニューを維持。 */
@media(orientation:landscape) and (max-height:520px) and (max-width:1023px){
  #moreSheet.sheet-backdrop{padding-top:max(4px,env(safe-area-inset-top))}
  #moreSheet .bottom-sheet{border-radius:20px 20px 0 0;padding-top:5px}
  #moreSheet .sheet-handle{margin-bottom:4px}
  #moreSheet .section-title-row{min-height:42px}
  #moreSheet .section-title-row h2{font-size:22px}
  #moreSheet .more-groups .more-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #moreSheet .more-grid button{min-height:58px;padding:6px;font-size:17px}
  #moreSheet .more-grid button span{font-size:10px;margin-top:4px}
  #moreSheet .more-label{margin-top:6px}
}

/* ホーム画面をPWAとして起動した時だけ、ノッチ領域をヘッダーの一部として扱う。 */
@media(display-mode:standalone) and (max-width:1023px){
  .app-header{
    height:calc(70px + env(safe-area-inset-top));
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  .main-content{padding-top:calc(84px + env(safe-area-inset-top))}
}