/* ====== Apple HIG inspired — APN Generator ====== */
.apng-root {
  --apng-bg: #f5f5f7;
  --apng-card: #ffffff;
  --apng-text: #1d1d1f;
  --apng-text-2: #6e6e73;
  --apng-line: #d2d2d7;
  --apng-line-2: #e5e5ea;
  /* UQ 用（青）— lines-determining-simulator / uq-sim-speed-check と揃える */
  --apng-blue: #1473d1;
  --apng-on-blue: #fff;
  --apng-blue-hover: #0f5eb0;
  --apng-blue-press: #0c4d8c;
  --apng-blue-surface: rgba(20, 115, 209, 0.1);

  /* Xモバイル 用（黄緑）に戻す場合は下を有効化し、上の UQ 変数をコメントアウト
  --apng-blue: rgba(111, 186, 44, 1);
  --apng-on-blue: #000;
  --apng-blue-hover: rgba(111, 186, 44, 1);
  --apng-blue-press: rgba(111, 186, 44, 1);
  --apng-blue-surface: rgba(111, 186, 44, 0.1);
  */
  --apng-green: #34c759;
  --apng-red: #ff3b30;
  --apng-amber: #ff9f0a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic UI", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  color: var(--apng-text); line-height: 1.5; max-width: 980px; margin: 24px auto 0;
  padding: 24px 16px;
  background: var(--apng-bg);
  border-radius: 18px;
  letter-spacing: -0.003em;
}
.apng-root *, .apng-root *::before, .apng-root *::after { box-sizing: border-box; }

.apng-root .apng-hero { text-align:center; padding: 24px 8px 8px; }
.apng-root .apng-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#000; letter-spacing:.02em; margin-bottom:10px; }
.apng-root .apng-eyebrow .apng-applemark { font-size:15px; }
.apng-root .apng-title { display:block; font-size:34px; font-weight:700; line-height:1.1; letter-spacing:-0.02em; margin:0 0 10px; color:var(--apng-text); }
.apng-root .apng-subtitle { display:block; font-size:17px; color:var(--apng-text-2); margin:0 auto 8px; max-width:640px; }
.apng-root .apng-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:980px; background:var(--apng-blue-surface); color:var(--apng-blue); border:1px solid rgba(20,115,209,.22); font-size:12px; font-weight:600; margin-top:8px; }

.apng-root .apng-card { background:var(--apng-card); border-radius:18px; padding:24px; margin:20px 0; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); }
.apng-root .apng-h2 { display:block; font-size:24px; font-weight:700; line-height:1.2; letter-spacing:-0.01em; margin:0 0 6px; color:var(--apng-text); }
.apng-root .apng-h3 { display:block; font-size:17px; font-weight:600; margin:16px 0 6px; color:var(--apng-text); }
.apng-root .apng-p { display:block; margin:0 0 16px; color:var(--apng-text-2); font-size:15px; }
.apng-root code { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.92em; background:rgba(0,0,0,.05); padding:2px 6px; border-radius:5px; color:var(--apng-text); }

/* segmented control */
.apng-root .apng-tabs { display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; margin:6px 0 14px; background:rgba(120,120,128,.12); border-radius:10px; }
.apng-root .apng-tab { padding:6px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; user-select:none; color:var(--apng-text); transition:background .2s, box-shadow .2s; }
.apng-root .apng-tab:hover { background:rgba(255,255,255,.4); }
.apng-root .apng-tab.active { background:var(--apng-blue-surface); box-shadow:0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(20,115,209,.2); font-weight:600; color:var(--apng-blue); }

/* search */
.apng-root .apng-search { width:100%; padding:10px 14px; border:1px solid var(--apng-line); border-radius:10px; font-size:15px; margin-bottom:14px; background:#fff; color:var(--apng-text); transition:border-color .15s, box-shadow .15s; font-family:inherit; }
.apng-root .apng-search:focus { outline:none; border-color:var(--apng-blue); background:var(--apng-blue-surface); box-shadow:0 0 0 4px rgba(20,115,209,.22); }
.apng-root .apng-search::placeholder { color:var(--apng-text-2); }

/* table */
.apng-root .apng-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--apng-line-2); border-radius:14px; background:#fff; }
.apng-root table.apng-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; min-width:760px; }
.apng-root .apng-table th, .apng-root .apng-table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--apng-line-2); vertical-align:middle; white-space:nowrap; color:var(--apng-text); background:#fff; }
.apng-root .apng-table tbody tr:last-child td { border-bottom:none; }
.apng-root .apng-table th { background:#fafafa !important; color:var(--apng-text-2) !important; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.apng-root .apng-table tbody tr { transition:background .15s; }
.apng-root .apng-table tbody tr:hover td { background:#f5f5f7; }
.apng-root .apng-table tbody tr:hover td:last-child { background:rgba(20,115,209,.14); }
.apng-root .apng-table .apng-name { font-weight:600; color:var(--apng-text); }
.apng-root .apng-table .apng-mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:13px; color:var(--apng-text); }
.apng-root .apng-table .apng-empty { color:#c7c7cc; font-style:italic; }

/* buttons (Apple style pill) — 既定は淡い青面 + ホバーで塗り */
.apng-root .apng-btn { display:inline-flex; align-items:center; justify-content:center; padding:7px 16px; border:1px solid rgba(20,115,209,.22); background:var(--apng-blue-surface); color:var(--apng-blue); border-radius:980px; cursor:pointer; font-size:13px; font-weight:500; margin:2px; transition:background-color .15s,color .15s,border-color .15s,transform .1s; font-family:inherit; line-height:1.2; }
.apng-root .apng-btn:hover { background-color:var(--apng-blue-surface); border-color:var(--apng-blue); color:var(--apng-blue); }
.apng-root .apng-btn:active { transform:scale(.97); }
.apng-root .apng-btn.apng-primary { background:var(--apng-blue-surface); color:var(--apng-blue); border:1px solid rgba(20,115,209,.28); padding:11px 22px; font-size:15px; font-weight:600; }
.apng-root .apng-btn.apng-primary:hover { background-color:var(--apng-blue-surface); border-color:var(--apng-blue); color:var(--apng-blue); }
.apng-root .apng-btn.apng-primary:active { background-color:var(--apng-blue-press); border-color:var(--apng-blue-press); color:var(--apng-on-blue); }
.apng-root .apng-btn.apng-secondary { background-color:#fff; color:var(--apng-blue); border:1px solid var(--apng-blue); padding:10px 22px; font-size:15px; }
.apng-root .apng-btn.apng-secondary:hover { background:var(--apng-blue-surface); border-color:var(--apng-blue); color:var(--apng-blue); }
.apng-root .apng-btn.apng-copied { background:var(--apng-green) !important; color:#fff !important; }

/* form */
.apng-root .apng-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; padding:20px; background:#fafafa; border-radius:14px; border:1px solid var(--apng-line-2); }
.apng-root .apng-field { display:flex; flex-direction:column; }
.apng-root .apng-field label { font-size:12px; font-weight:600; margin-bottom:6px; color:var(--apng-text-2); text-transform:uppercase; letter-spacing:.04em; }
.apng-root .apng-field input, .apng-root .apng-field select { padding:10px 14px; border:1px solid var(--apng-line); border-radius:10px; font-size:15px; font-family:inherit; background:#fff; color:var(--apng-text); transition:border-color .15s, box-shadow .15s; }
.apng-root .apng-field input:focus, .apng-root .apng-field select:focus { outline:none; border-color:var(--apng-blue); background:var(--apng-blue-surface); box-shadow:0 0 0 4px rgba(20,115,209,.22); }
.apng-root .apng-req { color:var(--apng-red); margin-left:3px; }

.apng-root .apng-actions { margin:20px 0 8px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 16px; border-radius:12px; }
.apng-root .apng-preview { background:#1d1d1f; color:#f5f5f7; padding:18px; border-radius:12px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; line-height:1.5; max-height:340px; overflow:auto; white-space:pre-wrap; word-break:break-all; margin-top:14px; }
.apng-root .apng-error { color:var(--apng-red); font-size:13px; margin-top:8px; font-weight:500; }

/* steps */
.apng-root .apng-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px; }
@media (max-width:780px) { .apng-root .apng-steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .apng-root .apng-steps { grid-template-columns:1fr; } }
.apng-root .apng-step { background:#fafafa; border:1px solid var(--apng-line-2); border-radius:14px; padding:14px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.apng-root .apng-step-num { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:980px; background:var(--apng-blue-surface); color:var(--apng-blue); border:1px solid rgba(20,115,209,.22); font-size:12px; font-weight:600; margin-bottom:8px; }

/* phone mock */
.apng-root .apng-phone {
  width:160px; height:280px; border:2px solid #d2d2d7; border-radius:24px;
  background:#f5f5f7; padding:18px 12px 14px; margin:6px 0 12px;
  position:relative; box-sizing:border-box; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans",sans-serif;
  color:#1d1d1f; font-size:11px; line-height:1.3;
}
.apng-root .apng-phone::after {
  content:""; position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:42px; height:3px; background:#1d1d1f; border-radius:2px;
}
.apng-root .apng-phone * { box-sizing:border-box; font-family:inherit; color:inherit; line-height:1.3; letter-spacing:normal; text-transform:none; margin:0; padding:0; }
.apng-root .apng-phone .apng-ph-title { font-size:11px; font-weight:700; text-align:center; margin-bottom:6px; color:#1d1d1f; }
.apng-root .apng-phone .apng-ph-titleL { font-size:12px; font-weight:700; text-align:center; margin-bottom:6px; color:#1d1d1f; }
.apng-root .apng-phone .apng-ph-card { background:#fff; border:1px solid #e5e5ea; border-radius:8px; padding:8px 10px; margin-bottom:6px; }
.apng-root .apng-phone .apng-ph-card-blue { border-color:var(--apng-blue); }
.apng-root .apng-phone .apng-ph-row { display:flex; align-items:center; gap:6px; padding:6px 0; border-top:1px solid #e5e5ea; font-size:10px; }
.apng-root .apng-phone .apng-ph-row:first-child { border-top:none; }
.apng-root .apng-phone .apng-ph-row .apng-ph-dot { width:6px; height:6px; border-radius:50%; background:#86868b; flex:none; }
.apng-root .apng-phone .apng-ph-btn { display:inline-block; background:var(--apng-blue); color:#fff; padding:5px 14px; border-radius:980px; font-size:10px; font-weight:600; text-align:center; }
.apng-root .apng-phone .apng-ph-btn-block { display:block; background:var(--apng-blue); color:#fff; padding:7px; border-radius:8px; font-size:11px; font-weight:600; text-align:center; }
.apng-root .apng-phone .apng-ph-dialog { background:#fff; border:1px solid #d2d2d7; border-radius:10px; padding:8px 6px; text-align:center; font-size:9px; font-weight:600; margin-top:8px; }
.apng-root .apng-phone .apng-ph-dialog-actions { display:flex; border-top:1px solid #e5e5ea; margin:6px -6px -8px; }
.apng-root .apng-phone .apng-ph-dialog-actions > div { flex:1; padding:5px 0; font-size:10px; color:var(--apng-blue); }
.apng-root .apng-phone .apng-ph-dialog-actions > div:first-child { border-right:1px solid #e5e5ea; }
.apng-root .apng-phone .apng-ph-dialog-actions .apng-ph-strong { font-weight:600; }
.apng-root .apng-phone .apng-ph-warn { background:#fff8e1; border:1px solid #ff9f0a; color:#ff9f0a; border-radius:6px; padding:4px 6px; font-size:9px; font-weight:600; text-align:center; margin:6px 0; }
.apng-root .apng-phone .apng-ph-meta { font-size:9px; color:#86868b; margin:2px 0; }
.apng-root .apng-phone .apng-ph-check {
  width:48px; height:48px; border-radius:50%; background:#34c759; margin:14px auto 8px;
  position:relative;
}
.apng-root .apng-phone .apng-ph-check::after {
  content:""; position:absolute; left:50%; top:50%; width:10px; height:18px;
  border:solid #fff; border-width:0 4px 4px 0;
  transform:translate(-50%,-60%) rotate(45deg);
}
.apng-root .apng-phone .apng-ph-pass { display:flex; justify-content:center; gap:8px; margin:14px 0 12px; }
.apng-root .apng-phone .apng-ph-pass span { width:8px; height:8px; border-radius:50%; background:#1d1d1f; }
.apng-root .apng-phone .apng-ph-pass span.apng-empty { background:transparent; border:1px solid #86868b; }
.apng-root .apng-phone .apng-ph-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:6px 10px; padding:0 6px; }
.apng-root .apng-phone .apng-ph-keypad div { width:28px; height:28px; border:1px solid #d2d2d7; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; margin:0 auto; background:#fff; }
.apng-root .apng-phone .apng-ph-keypad div.apng-zero { grid-column:2; }
.apng-root .apng-phone .apng-ph-center { text-align:center; font-size:10px; color:#86868b; margin-top:4px; }
.apng-root .apng-step-title { font-size:14px; font-weight:600; color:var(--apng-text); margin-bottom:4px; }
.apng-root .apng-step-desc { font-size:12px; color:var(--apng-text-2); line-height:1.4; }

/* note */
.apng-root .apng-note { background:#fff; border:1px solid var(--apng-line-2); border-left:4px solid var(--apng-amber); padding:16px 20px; margin:20px 0; font-size:14px; border-radius:12px; color:var(--apng-text); }
.apng-root .apng-note .apng-note-title { display:block; font-weight:700; margin-bottom:8px; color:var(--apng-text); font-size:15px; }
.apng-root .apng-note ul { margin:0; padding-left:20px; color:var(--apng-text-2); list-style:disc; }
.apng-root .apng-note li { margin:4px 0; display:list-item; }
.apng-root .apng-note li strong { display:inline !important; font-weight:700; color:var(--apng-text); margin:0 !important; padding:0 !important; background:none !important; }

@media (max-width:640px) {
  .apng-root { padding:16px 12px; border-radius:14px; }
  .apng-root .apng-card { padding:18px; border-radius:14px; }
  .apng-root .apng-title { font-size:26px; }
  .apng-root .apng-subtitle { font-size:15px; }
  .apng-root .apng-h2 { font-size:20px; }
  .apng-root .apng-table th, .apng-root .apng-table td { padding:10px 12px; font-size:13px; }
  .apng-root .apng-btn { padding:6px 12px; font-size:12px; }
  .apng-root .apng-btn.apng-primary, .apng-root .apng-btn.apng-secondary { padding:10px 18px; font-size:14px; }
}