.soniq-chord{--pink:#D733F6;--blue:#00b5ff;--lime:#d9ff55;--purple:#7b61ff;background:#0d0f14;color:#f5f7fb;border:1px solid #252a34;border-radius:18px;padding:24px;box-sizing:border-box;max-width:100%;font-family:inherit;overflow:hidden}.soniq-chord *{box-sizing:border-box}.soniq-chord__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}.soniq-chord__header h2{margin:4px 0 4px;font-size:28px;letter-spacing:.03em}.soniq-chord__header p{margin:0;color:#9ba3b3;font-size:13px}.soniq-chord__brand-soniq{color:#f5f7fb}.soniq-chord__brand-chord{color:#b900ff}.soniq-chord__controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.soniq-chord__control label{display:block;font-size:12px;font-weight:700;color:#9ba3b3;margin-bottom:7px}.soniq-chord select{width:100%;background:#171b23;color:#fff;border:1px solid #343b49;border-radius:10px;padding:12px 14px;font-size:15px;outline:none}.soniq-chord select:focus{border-color:var(--blue)}.soniq-chord__main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:18px}.soniq-chord__diagram-panel,.soniq-chord__info-panel{background:#11151d;border:1px solid #252b36;border-radius:14px;padding:18px}.soniq-chord__name{text-align:center;font-size:36px;font-weight:800;line-height:1.1}.soniq-chord__position{text-align:center;color:#8e98a9;font-size:13px;margin-top:6px;min-height:18px}.soniq-chord__diagram{margin:15px auto 10px;max-width:680px}.soniq-chordboard{width:100%}.soniq-chordboard__form-name{text-align:center;color:#dce2eb;font-weight:800;font-size:13px;margin-bottom:12px}.soniq-chordboard__chart{width:100%;overflow-x:auto}.soniq-chordboard__markers{display:grid;grid-template-columns:62px 34px minmax(0,1fr);align-items:center;margin-bottom:5px;min-width:500px}.soniq-chordboard__marker-label{font-size:9px;font-weight:800;color:#9da6b5;text-align:center;background:#1b2029;border-radius:6px;padding:6px 3px}.soniq-chordboard__fret-header{display:grid;grid-template-columns:repeat(5,1fr);grid-column:3;font-size:10px;color:#7f899a;text-align:center}.soniq-chordboard__rows{min-width:500px}.soniq-chordboard__row{display:grid;grid-template-columns:62px 34px minmax(0,1fr);align-items:stretch;min-height:52px}.soniq-chordboard__string-label{display:flex;align-items:center;justify-content:center;gap:4px;color:#a8b0bd;font-size:10px;line-height:1.1;flex-direction:column}.soniq-chordboard__string-label strong{font-size:10px;color:#e0e5ed}.soniq-chordboard__string-label span{font-size:9px;color:#737d8d}.soniq-chordboard__status{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#f5f7fb}.soniq-chordboard__status.is-muted{color:#ff6f9e}.soniq-chordboard__status.is-open{color:var(--blue)}.soniq-chordboard__fret-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;border-left:1px solid #596170;border-top:1px solid #596170}.soniq-chordboard__fret-grid::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:#9da5b2;transform:translateY(-50%);z-index:0}.soniq-chordboard__cell{position:relative;height:52px;border-right:1px solid #7a8392;border-bottom:1px solid #596170;display:flex;align-items:center;justify-content:center;min-width:0}.soniq-chordboard__cell:last-child{border-right:1px solid #596170}.soniq-chordboard__dot{position:relative;z-index:2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff;background:#596273;border:2px solid #aeb7c5;box-shadow:0 2px 8px rgba(0,0,0,.35)}.soniq-chordboard__dot.is-root{background:var(--pink);border-color:#ff8bff;box-shadow:0 0 16px rgba(215,51,246,.35)}.soniq-chordboard__legend{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px;color:#7f899a;font-size:10px}.soniq-chordboard__legend b{color:#dfe5ee}.soniq-chord__nav{display:flex;gap:8px;justify-content:center;margin-top:16px}.soniq-chord__nav button{border:1px solid #3a4250;background:#191e27;color:#e9edf5;border-radius:9px;padding:9px 12px;font-size:13px;cursor:pointer}.soniq-chord__nav button:hover:not(:disabled){border-color:var(--blue)}.soniq-chord__nav button:disabled{opacity:.35;cursor:default}.soniq-chord__left-toggle{display:flex;align-items:center;justify-content:center;margin-top:12px;color:#929bad;font-size:12px;gap:7px}.soniq-chord__left-toggle input{accent-color:var(--pink)}.soniq-chord__info-card{border-bottom:1px solid #292f3a;padding-bottom:16px;margin-bottom:16px}.soniq-chord__info-card:last-of-type{margin-bottom:0}.soniq-chord h3{font-size:14px;margin:0 0 10px}.soniq-chord-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.soniq-note{display:flex;align-items:center;gap:9px;background:#181d26;border-radius:9px;padding:9px}.soniq-note strong{font-size:17px;color:var(--lime);min-width:24px}.soniq-note span{font-size:10px;color:#8993a4}.soniq-chord-tuning{font-size:13px;line-height:1.6}.soniq-chord-tuning small{color:#929bad}.soniq-chord__links{display:grid;gap:8px}.soniq-chord-link{display:flex;justify-content:center;align-items:center;text-decoration:none;border-radius:9px;padding:11px;font-size:13px;font-weight:800;border:1px solid #363d4a;color:#fff}.soniq-chord-practice{background:rgba(0,181,255,.08);border-color:rgba(0,181,255,.45)}.soniq-chord-tabs{background:rgba(123,97,255,.08);border-color:rgba(123,97,255,.45)}.soniq-chord__hint{margin:13px 0 0!important;font-size:12px!important;color:#ffffff!important}
@media(max-width:720px){.soniq-chord{padding:16px;border-radius:14px}.soniq-chord__header h2{font-size:24px}.soniq-chord__main{grid-template-columns:1fr}.soniq-chord__controls{grid-template-columns:1fr}.soniq-chord__diagram-panel,.soniq-chord__info-panel{padding:14px}.soniq-chord__diagram{margin-left:0;margin-right:0}.soniq-chordboard__markers,.soniq-chordboard__rows{min-width:470px}.soniq-chordboard__row,.soniq-chordboard__cell{min-height:46px;height:46px}.soniq-chordboard__dot{width:30px;height:30px;font-size:9px}.soniq-chordboard__legend{gap:8px}.soniq-chord__name{font-size:32px}}


/* =========================================================
   SONIQ CHORD v1.0.7
   1.0.5のデザインを維持したまま、レスポンシブを微調整
========================================================= */
.soniq-chord .soniq-chord__header{min-width:0}.soniq-chord .soniq-chord__header>div{min-width:0}
@media (max-width:720px){
  .soniq-chord{width:100%;max-width:100%;overflow:hidden;}
  .soniq-chord .soniq-chord__header{align-items:flex-start;}
  .soniq-chord .soniq-chord__header h2{line-height:1.15;}
  .soniq-chord .soniq-chord__header p{line-height:1.55;}
  .soniq-chord__controls{gap:10px;}
  .soniq-chord select{min-height:46px;}
  .soniq-chord__main{gap:12px;}
  .soniq-chord__diagram-panel,.soniq-chord__info-panel{width:100%;min-width:0;}
  .soniq-chord__diagram{width:100%;max-width:100%;overflow:hidden;}
  .soniq-chordboard__chart{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px;}
  .soniq-chord__nav button{min-height:42px;}
  .soniq-chord-notes{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:420px){
  .soniq-chord{padding:13px;border-radius:13px;}
  .soniq-chord .soniq-chord__header h2{font-size:22px;}
  .soniq-chord .soniq-chord__header p{font-size:13px;}
  .soniq-chord__diagram-panel,.soniq-chord__info-panel{padding:12px;}
  .soniq-chord__name{font-size:29px;}
  .soniq-chord__nav{gap:6px;}
  .soniq-chord__nav button{padding:9px 8px;font-size:12px;flex:1;}
  .soniq-chordboard__markers,.soniq-chordboard__rows{min-width:450px;}
  .soniq-chord-notes{gap:6px;}
  .soniq-note{padding:8px;gap:6px;}
  .soniq-note strong{font-size:15px;min-width:21px;}
}

/* v1.0.8 mobile fit: keep the chord diagram fully visible without horizontal scrolling */
@media (max-width: 720px) {
  .soniq-chordboard__chart,
  .soniq-chordboard__markers,
  .soniq-chordboard__rows {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .soniq-chordboard__markers,
  .soniq-chordboard__row {
    grid-template-columns: clamp(34px, 12vw, 48px) clamp(22px, 7vw, 30px) minmax(0, 1fr);
  }

  .soniq-chordboard__row {
    min-height: 0;
  }

  .soniq-chordboard__cell {
    height: clamp(38px, 11vw, 48px);
    min-width: 0;
  }

  .soniq-chordboard__dot {
    width: clamp(24px, 8.5vw, 32px);
    height: clamp(24px, 8.5vw, 32px);
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .soniq-chordboard__string-label strong {
    font-size: clamp(8px, 2.7vw, 10px);
  }

  .soniq-chordboard__string-label span {
    font-size: clamp(7px, 2.2vw, 9px);
  }

  .soniq-chordboard__status {
    font-size: clamp(15px, 5vw, 18px);
  }

  .soniq-chordboard__fret-header {
    font-size: clamp(8px, 2.5vw, 10px);
  }

  .soniq-chordboard__marker-label {
    font-size: clamp(7px, 2.3vw, 9px);
    padding: 5px 2px;
  }
}

@media (max-width: 380px) {
  .soniq-chord {
    padding: 12px;
  }

  .soniq-chord__diagram-panel,
  .soniq-chord__info-panel {
    padding: 10px;
  }

  .soniq-chordboard__legend {
    margin-top: 12px;
    gap: 6px;
  }
}

/* =========================================================
   SONIQ CHORD v1.1.6
   v1.0.8のレイアウトを維持し、可読性と左利き表示だけ改善
========================================================= */
.soniq-chord .soniq-chord__header p,
.soniq-chord__control label,
.soniq-chord__position,
.soniq-chord__left-toggle,
.soniq-chordboard__marker-label,
.soniq-chordboard__legend,
.soniq-chord__hint,
.soniq-chordboard__fret-header,
.soniq-chordboard__string-label span,
.soniq-chord-tuning small,
.soniq-note span {
  color: #ffffff !important;
}

/* Left-handed chord chart: mirror fret direction while keeping text readable. */
.soniq-chordboard.is-left-handed .soniq-chordboard__fret-grid,
.soniq-chordboard.is-left-handed .soniq-chordboard__fret-header {
  direction:rtl;
}
.soniq-chordboard.is-left-handed .soniq-chordboard__cell,
.soniq-chordboard.is-left-handed .soniq-chordboard__fret-header span {
  direction:ltr;
}

/* =========================================================
   SONIQ CHORD v1.1.3
   コードフォーム周辺の可読性を改善
   レイアウト・サイズ・機能は変更しない
========================================================= */
.soniq-chord__position,
.soniq-chordboard__marker-label,
.soniq-chordboard__fret-header,
.soniq-chordboard__string-label,
.soniq-chordboard__string-label span,
.soniq-chordboard__legend,
.soniq-chordboard__legend b,
.soniq-chord__left-toggle,
.soniq-chord__hint,
.soniq-chord-tuning small,
.soniq-note span {
  color:#e4e9f0;
  font-size:13px;
}

.soniq-chordboard__form-name {
  color:#f1f4f8;
}

.soniq-chordboard__string-label strong {
  color:#f3f6fa;
}

/* 指板の弦・フレット線を少し明るく */
.soniq-chordboard__fret-grid {
  border-left-color:#7f8998;
  border-top-color:#7f8998;
}

.soniq-chordboard__fret-grid::before {
  background:#c2c9d3;
}

.soniq-chordboard__cell {
  border-right-color:#929baa;
  border-bottom-color:#7f8998;
}

.soniq-chordboard__cell:last-child {
  border-right-color:#7f8998;
}

/* OPEN / × / 0 も背景とのコントラストを確保 */
.soniq-chordboard__marker-label {
  background:#222832;
  color:#edf1f6;
}

.soniq-chordboard__status {
  color:#f5f7fb;
}

/* =========================================================
   SONIQ CHORD v1.1.4
   弦ラベル（1弦〜6弦）と音名を2px拡大
========================================================= */
.soniq-chordboard__string-label strong {
  font-size:13px;
}

.soniq-chordboard__string-label span {
  font-size:12px;
}

/* =========================================================
   SONIQ CHORD v1.1.8
   SONIQ PRACTICEとのクラス競合を防止
========================================================= */
.soniq-chord__header h2 { margin:4px 0 4px; font-size:28px; letter-spacing:.03em; font-size: clamp(28px, 4vw, 44px) !important;margin: 0px !important;}
.soniq-chord__header p { margin:0; color:#e4e9f0; font-size:13px; }
.soniq-chord__brand-soniq { color:#f5f7fb; }
.soniq-chord__brand-chord { color:#b900ff; }
@media (max-width:720px){ .soniq-chord__header h2{font-size:24px;} }
@media (max-width:480px){ .soniq-chord__header h2{font-size:22px;} .soniq-chord__header p{font-size:13px;} }