:root {
  --vh: 1vh;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: #fff;
  color: #0b2a44;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
  font-size: 16px;
}

body {
  min-height: calc(var(--vh) * 100);
}

html.qav-auth-locked body {
  overflow: hidden;
  background: #eef4fb;
}

html.qav-auth-locked body > :not(.qav-login-screen) {
  display: none !important;
}

.qav-login-screen {
  display: none;
}

html.qav-auth-locked .qav-login-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #eef4fb 0%, #ffffff 100%);
}

.qav-login-box {
  width: min(100%, 360px);
  padding: 24px;
  border: 1px solid #d7e1ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(11, 42, 68, 0.16);
}

.qav-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  color: #0b2a44;
  text-align: center;
  letter-spacing: 0;
}

.qav-login-brand__icon {
  width: 46px;
  height: auto;
  padding: 0;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.qav-login-brand strong,
.qav-login-brand small {
  display: block;
}

.qav-login-brand strong {
  font-size: 1rem;
  line-height: 1.1;
}

.qav-login-brand small {
  margin-top: 2px;
  color: #46627f;
  font-size: 0.78rem;
  font-weight: 600;
}

.qav-login-box h1 {
  margin: 0 0 16px;
  color: #0b2a44;
  font-size: 1.08rem;
  line-height: 1.2;
  text-align: center;
}

.qav-login-field {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.qav-login-field label {
  font-size: 0.9rem;
}

.qav-login-error {
  min-height: 1.4em;
  margin: 10px 0;
  color: #b42318;
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.qav-login-submit {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid #0b2a44;
  border-radius: 8px;
  background: #0b2a44;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

/* ===== 繝倥ャ繝€繝ｼ繝ｻ繧ｿ繝・===== */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #0b2a44 0%, #123b5f 58%, #0e5a78 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(11, 42, 68, 0.18);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  font-weight: 700;
}

.brand__icon {
  width: 34px;
  height: 29px;
  flex: 0 0 34px;
  object-fit: contain;
}

.brand__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name {
  overflow: hidden;
  color: #fff;
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand small {
  display: block;
  font-weight: 400;
  margin-top: 2px;
  margin-left: 0;
  opacity: 0.85;
}

.menu {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
}

.menu:active {
  background: rgba(255, 255, 255, 0.18);
}

.tabs {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #eef4fb;
  border-bottom: 1px solid #d7e1ee;
}

.tabs button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid #9bb3cc;
  background: #c9d6e6;
  color: #0b2a44;
  border-radius: 6px;
  line-height: 1.15;
}

.tabs button .tab-icon {
  flex: 0 0 auto;
  font-size: 1.15em;
}

.tabs button.active {
  background: #0b2a44;
  color: #fff;
  border-color: #0b2a44;
}

/* ===== 繝｡繧､繝ｳ繝ｬ繧､繧｢繧ｦ繝・===== */

main {
  padding: 14px;
}

.screen {
  display: none;
}

.screen.show {
  display: block;
}

/* ===== 繝輔か繝ｼ繝蜈ｱ騾・===== */

.field {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

label {
  font-weight: 700;
}

.basic-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  line-height: 1.25;
}

.field-label-icon {
  flex: 0 0 auto;
  color: #315b87;
  font-size: 1.12em;
}

select,
input,
textarea {
  padding: 12px;
  border: 1px solid #0b2a44;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  color: #0b2a44;
  font-family: inherit;
}

.obs-run-suffix-field {
  position: relative;
  min-width: 0;
}

.obs-run-suffix-field input {
  width: 100%;
  padding-right: 48px;
}

.obs-run-suffix-field input::placeholder {
  font-size: 0.82rem;
  opacity: 0.72;
}

.obs-run-suffix-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #315b87;
  line-height: 1;
}

.obs-run-suffix-clear .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.obs-run-suffix-clear:disabled {
  opacity: 0.35;
}

textarea {
  width: 100%;
  line-height: 1.4;
  resize: vertical;
}

.qcount-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.qcount-row #qWorkType {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

.qcount-row #qCount.qcount-fixed {
  background: #e8f2ff;
  border-color: #8fb0d6;
  color: #1f3f63;
  font-weight: 700;
  cursor: default;
}

.model-formula-row {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 10px;
  align-items: end;
  margin: 12px 0 8px;
}

.model-formula-row .field {
  margin: 0;
}

.formula-field {
  min-width: 0;
}

.calc-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.calc-type-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(11, 42, 68, 0.2);
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
}

.calc-type-options input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  accent-color: #1f4b99;
}

.mode-hw-only {
  display: none !important;
}

body.calc-mode-hw .mode-nw-only {
  display: none !important;
}

body.calc-mode-hw .mode-hw-only {
  display: block !important;
}

@media (max-width: 420px) {
  .calc-type-options {
    grid-template-columns: 1fr;
  }
}

/* 讀懷ｮ壼ｼ上・繝励Ξ繝薙Η繝ｼ */
.preview {
  margin: 8px 0 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.formula-preview {
  min-height: 46px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #d7e1ee;
  border-radius: 8px;
  background: #f8fbff;
  color: #2f4258;
  font-size: 0.86rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.formula-preview #formula {
  margin-left: 0.4em;
  font-weight: 600;
}

@media (max-width: 520px) {
  .model-formula-row {
    grid-template-columns: 1fr;
  }
}

/* ===== 蜈･蜉帙げ繝ｪ繝・ラ ===== */

.grid {
  --rows: 6;
  --cols: 8;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr); /* JS縺九ｉ --cols=4 縺ｫ縺輔ｌ繧・*/
  gap: 8px;
  margin-top: 10px;
}


/* grid縺ｮ陦ｨ遉ｺ陦梧焚繧貞宛蠕｡縺吶ｋ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ遯難ｼ・S縺ｧmax-height繧定ｨｭ螳夲ｼ・*/
.grid-wrap{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 陦後・陦ｨ遉ｺ/髱櫁｡ｨ遉ｺ・・S縺ｧ row-hidden 繧剃ｻ倅ｸ趣ｼ・*/
.grid .row-hidden{ display:none !important; }



/* 蜈･蜉帙ち繝厄ｼ夊｡ｨ遉ｺ陦梧焚・・ax-height・峨ｒ蠅玲ｸ帙☆繧九・繧ｿ繝ｳ・医げ繝ｪ繝・ラ譛€荳矩Κ・・*/
#screen-input .row-viewport-controls{
  display:flex;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 84px; /* 荳九・蝗ｺ螳壹・繧ｿ繝ｳ縺ｫ陲ｫ繧峨↑縺・ｈ縺・ｽ咏區 */
}
#screen-input .row-viewport-btn{
  flex: 1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 0;
}
#screen-input .row-viewport-btn:disabled{
  opacity: 0.4;
}

.grid input {
  width: 100%;
  padding: 10px 8px;
  border: 1px solid #0b2a44;
  border-radius: 6px;
  text-align: right;
}

/* 螂・焚陦鯉ｼ・,3,5...・峨・蟶ｯ・夊埋縺・ヶ繝ｫ繝ｼ繧ｰ繝ｬ繝ｼ */
:root{
  --row-alt-band: #c9d6e6;   /* 陦後・蟶ｯ・・ap蜷ｫ繧€讓ｪ蜈ｨ蟷・ｼ・*/
  --row-alt-input: #c9d6e6;  /* 蜈･蜉帶ｬ・・阮・牡 */
}

.grid .row-bg{
  border-radius: 8px;
  position: relative;
  z-index: 0;
  pointer-events: none;
}

/* row-bg 繧定｣上↓縺励※縲∽ｻ悶・繧ｻ繝ｫ繧定｡ｨ縺ｫ */
.grid > :not(.row-bg){
  position: relative;
  z-index: 1;
}

/* 螂・焚陦鯉ｼ・alt-row・峨・蜈･蜉帶ｬ・ｒ蜷檎ｳｻ濶ｲ縺ｫ */
.grid input.alt-row{
  background: var(--row-alt-input);
}
.grid .depth-stack.alt-row input{
  background: var(--row-alt-input);
}

/* status繝懊ち繝ｳ繧ょｸｯ縺ｫ蜷医ｏ縺帙ｋ・・as-data縺ｯ蜆ｪ蜈茨ｼ・*/
.grid .status-btn.alt-row:not(.has-data){
  background: var(--row-alt-input);
}

/* 豌ｴ豺ｱ繧ｻ繝ｫ・壻ｸ頑ｮｵ+荳区ｮｵ・井ｸ区ｮｵ縺ｯ陦悟腰菴阪〒髢矩哩・・*/
.grid .depth-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.grid .depth-stack .depth-lower{
  display:none;
}

.grid .depth-stack.show-lower .depth-lower{
  display:block;
}

/* 荳区ｮｵ縺ｯ蟆代＠縺縺題ｩｰ繧√ｋ・郁ｦ冶ｪ肴€ｧ縺ｨ逵√せ繝壹・繧ｹ・・*/
.grid .depth-stack .depth-lower{
  padding: 8px 8px;
}

/* status繝懊ち繝ｳ蜀・ｼ壻ｸ区ｮｵ繝医げ繝ｫ */
.grid .status-btn .toggle-lower{
  font-size: 18px;
  opacity: 0.75;
  margin-left: 4px;
}

/* DW と方向矢印の間を詰める */
.grid .status-btn .qav-dw-dir{
  margin-left: -6px;
}

.grid .hdr {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* 縲檎憾豕√€阪・繧ｿ繝ｳ */
.grid .status-btn {
  width: 100%;
  padding: 10px 8px;
  border: 1px solid #0b2a44;
  border-radius: 6px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 繝・・繧ｿ縺ゅｊ・医い繧､繧ｳ繝ｳ陦ｨ遉ｺ・峨・縺ｨ縺榊ｰ代＠蠑ｷ隱ｿ */
.grid .status-btn.has-data {
  background: #0b2a44;
  color: #fff;
}

/* Material Symbols 繧｢繧､繧ｳ繝ｳ */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  font-size: 24px;
}

/* 蜈･蜉帙ち繝門・菴薙・荳九↓繝懊ち繝ｳ縺ｶ繧薙・菴咏區繧堤｢ｺ菫・*/
#screen-input {
  padding-bottom: 72px; /* 繝懊ち繝ｳ鬮倥＆ + 菴咏區縲ょｿ・ｦ√↑繧芽ｪｿ謨ｴ縺励※OK */
}

#screen-input .auto-width-wrap{
  margin-bottom: 10px;
  border: 1px solid #d6e1ef;
  border-radius: 8px;
  background: #f8fbff;
}

#screen-input .auto-width-toggle{
  width: 100%;
  text-align: left;
  font-weight: 700;
  background: #eef4fb;
  border: 0;
  border-bottom: 1px solid #d6e1ef;
  border-radius: 8px 8px 0 0;
}

#screen-input .auto-width-panel{
  padding: 8px;
  display: grid;
  gap: 8px;
}

#screen-input .auto-width-panel[hidden]{
  display: none !important;
}

#screen-input .auto-width-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#screen-input .auto-width-field{
  display: grid;
  gap: 3px;
}

#screen-input .auto-width-field label{
  font-weight: 700;
  font-size: 0.8rem;
}

#screen-input .auto-width-field input{
  width: 100%;
  padding: 8px 8px;
  border: 1px solid #0b2a44;
  border-radius: 6px;
  text-align: right;
}

#screen-input .auto-width-actions button{
  width: 100%;
}

#screen-input .auto-width-note{
  min-height: 1.2em;
  margin: 0;
  color: #2f4258;
  font-size: 0.85rem;
}

@media (max-width: 720px){
  #screen-input .auto-width-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.person-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 蜈･蜉帙ち繝悶・遒ｺ螳壹・繧ｯ繝ｪ繧｢繝懊ち繝ｳ繧貞ｷｦ荳句崋螳夊｡ｨ遉ｺ */
#screen-input .actions {
  position: fixed;
  left: 12px;
  bottom: 12px;
  margin-top: 0;
  display: flex;
  gap: 8px;
  background: #ffffff;
  padding: 6px;
  z-index: 100; /* 陦ｨ繧医ｊ謇句燕縺ｫ蜃ｺ縺・*/
}

/* ===== 蜃ｺ蜉帙ち繝・===== */

h2 {
  font-size: 18px;
  margin: 8px 0 12px;
}

pre {
  background: #f6f8fb;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  padding: 12px;
  min-height: 5lh;
  white-space: pre-wrap;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

#screen-output .actions {
  display: block;
  margin-top: 12px;
}

#screen-output .actions button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#screen-output .actions button + button {
  margin-top: 8px;
}

#screen-output #outputSave {
  width: 100%;
  display: flex;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(11, 42, 68, 0.22);
}

#screen-output .actions button .qav-btn-icon {
  flex: 0 0 auto;
  font-size: 1.2em;
}

#screen-output .actions button .qav-btn-label {
  min-width: 0;
}

#screen-output .actions button.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: #0b2a44;
  background: #0b2a44;
  color: #fff;
  cursor: wait;
}

#screen-output .actions button .qav-btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: qav-btn-spin 0.7s linear infinite;
  flex: 0 0 18px;
}

@keyframes qav-btn-spin {
  to { transform: rotate(360deg); }
}

.hq-plot-card {
  margin-top: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  background: #f6f8fb;
  padding: 12px;
}

.hq-plot-header {
  margin-bottom: 10px;
}

.hq-plot-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #0b2a44;
}

.hq-plot-meta {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #42566a;
  white-space: pre-wrap;
}

.hq-plot-wrap {
  overflow: hidden;
  border: 1px solid #d6e0ee;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
}

.hq-plot-empty {
  margin: 0;
  color: #42566a;
  font-size: 0.88rem;
}

.hq-plot-svg {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
}

.hq-plot-thumb-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
  overflow: hidden;
}

.hq-plot-thumb-button:focus-visible {
  outline: 2px solid #0b7285;
  outline-offset: 3px;
}

.hq-plot-thumb-frame {
  overflow: hidden;
  border: 1px solid #d9e4f1;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(236, 243, 251, 0.72), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.hq-plot-svg-thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.hq-plot-thumb-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11, 42, 68, 0.84);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.hq-plot-bg {
  fill: #ffffff;
}

.hq-plot-grid-minor {
  stroke: #dfe7f1;
  stroke-width: 0.6;
}

.hq-plot-grid-major {
  stroke: #9ab0c8;
  stroke-width: 1.1;
}

.hq-plot-axis {
  stroke: #0b2a44;
  stroke-width: 1.3;
}

.hq-plot-label {
  fill: #0b2a44;
  font-size: 11px;
  font-weight: 700;
}

.hq-plot-caption {
  fill: #42566a;
  font-size: 13px;
  font-weight: 700;
}

.hq-observed-item {
  cursor: pointer;
}

.hq-observed-item:focus {
  outline: none;
}

.hq-observed-point-halo,
.hq-observed-point {
  transform-box: fill-box;
  transform-origin: center;
}

.hq-observed-point-halo {
  fill: rgba(255, 85, 85, 0.24);
  opacity: 0;
}

.hq-observed-tag-line {
  stroke: #d9485f;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.9;
}

.hq-observed-tag-bg {
  fill: rgba(255, 255, 255, 0.96);
  stroke: #d9485f;
  stroke-width: 1.25;
  transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
}

.hq-observed-tag-text {
  fill: #7f1d1d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.hq-observed-point {
  fill: #d92d20;
  stroke: #ffffff;
  stroke-width: 1.5;
  transition: fill 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease, filter 0.18s ease;
}

.hq-observed-item.is-current-match .hq-observed-point {
  fill: #ff5b00;
  stroke: #fff7cc;
  stroke-width: 2.6;
  filter: drop-shadow(0 0 10px rgba(255, 91, 0, 0.85));
}

.hq-observed-item.is-current-match .hq-observed-point-halo {
  opacity: 0.5;
}

.hq-observed-item.is-current-match .hq-observed-tag-bg {
  fill: #fff1a8;
  stroke: #ff5b00;
}

.hq-observed-item.is-current-match .hq-observed-tag-text {
  fill: #7c2d12;
}

.hq-observed-item.is-recent-match .hq-observed-point {
  animation: hq-point-core-pulse 0.9s ease-in-out infinite;
}

.hq-observed-item.is-recent-match .hq-observed-point-halo {
  animation: hq-point-halo-pulse 1.1s ease-out infinite;
}

.hq-observed-item.is-recent-match .hq-observed-tag-bg {
  animation: hq-tag-flash 0.9s ease-in-out infinite;
}

.hq-observed-item.is-recent-match .hq-observed-tag-line {
  stroke: #ff5b00;
  stroke-width: 1.7;
}

@keyframes hq-point-core-pulse {
  0% {
    transform: scale(1);
    fill: #ff5b00;
    filter: drop-shadow(0 0 0 rgba(255, 91, 0, 0));
  }
  50% {
    transform: scale(1.9);
    fill: #ffe066;
    filter: drop-shadow(0 0 14px rgba(255, 208, 0, 0.95));
  }
  100% {
    transform: scale(1);
    fill: #ff5b00;
    filter: drop-shadow(0 0 0 rgba(255, 91, 0, 0));
  }
}

@keyframes hq-point-halo-pulse {
  0% {
    opacity: 0.72;
    transform: scale(0.7);
  }
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

@keyframes hq-tag-flash {
  0% {
    fill: #fff1a8;
    stroke: #ff5b00;
  }
  50% {
    fill: #ff8f1f;
    stroke: #c81e1e;
  }
  100% {
    fill: #fff1a8;
    stroke: #ff5b00;
  }
}

.hq-point-tooltip {
  position: fixed;
  z-index: 1200;
  max-width: min(240px, calc(100vw - 24px));
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(11, 42, 68, 0.94);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(11, 42, 68, 0.28);
  pointer-events: none;
  white-space: nowrap;
}

.hq-plot-viewer {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  padding: max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background: rgba(7, 20, 33, 0.88);
  backdrop-filter: blur(3px);
}

.hq-plot-viewer[hidden] {
  display: none;
}

.hq-plot-viewer-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.hq-plot-viewer-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
}

.hq-plot-viewer-title-wrap {
  min-width: 0;
}

.hq-plot-viewer-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
}

.hq-plot-viewer-help {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
}

.hq-plot-viewer-close {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.hq-plot-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(173, 196, 224, 0.26);
  border-radius: 18px;
  background: #08121f;
  touch-action: none;
  overscroll-behavior: contain;
  cursor: grab;
}

.hq-plot-viewer-stage:active {
  cursor: grabbing;
}

.hq-plot-viewer-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.hq-plot-viewer-svg {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.hq-plot-viewer-svg .hq-plot-label {
  fill: #f8fbff;
  font-size: 15px;
  font-weight: 800;
  paint-order: stroke fill;
  stroke: rgba(8, 18, 31, 0.92);
  stroke-width: 2.8px;
  stroke-linejoin: round;
}

.hq-plot-viewer-svg .hq-plot-caption {
  fill: #ffffff;
  font-size: 18px;
  font-weight: 800;
  paint-order: stroke fill;
  stroke: rgba(8, 18, 31, 0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.hq-plot-viewer-svg .hq-plot-axis {
  stroke: #f1f6fb;
}

@media (max-width: 640px) {
  .hq-plot-thumb-hint {
    right: 10px;
    bottom: 10px;
    font-size: 0.72rem;
  }

  .hq-plot-viewer-help {
    font-size: 0.72rem;
  }

  .hq-plot-viewer-svg .hq-plot-label {
    font-size: 13px;
    stroke-width: 2.4px;
  }

  .hq-plot-viewer-svg .hq-plot-caption {
    font-size: 16px;
    stroke-width: 2.6px;
  }
}

button {
  padding: 10px 12px;
  border: 1px solid #0b2a44;
  border-radius: 8px;
  background: #fff;
  color: #0b2a44;
}

button.primary {
  background: #0b2a44;
  color: #fff;
}

button.danger {
  border-color: #b42318;
  background: #fff;
  color: #b42318;
}

button.danger:not(:disabled):hover,
button.danger:not(:disabled):focus-visible {
  background: #fff4f2;
}

button.danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.obs-detail-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.obs-detail-actions button {
  width: 100%;
}

/* ===== 繝｢繝ｼ繝€繝ｫ ===== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  z-index: 1000;
}

.modal.show {
  display: flex;
}

.modal-panel {
  width: min(640px, 100%);
  background: #fff;
  color: #0b2a44;
  border-radius: 14px;
  border: 1px solid #dfe7f3;
  padding: 12px;

  /* 逕ｻ髱｢蜀・↓蜿弱ａ縺ｦ縲√・縺ｿ蜃ｺ縺励◆繧峨ヱ繝阪Ν閾ｪ菴薙′繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ */
  max-height: calc(var(--vh) * 100 - 32px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
  .modal-panel {
    max-height: calc(100dvh - 32px);
  }
}


.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #e7eef9;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.modal-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

/* 繧ｿ繧､繝医Ν蟆上＆繧・*/
.modal-header h3 {
  margin: 0;
  font-size: 0.9rem;
}

#trialTitle {
  font-size: 1rem;
}

.modal-title-avg {
  font-size: 0.78rem;
  color: #38506a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trial-depth-ratios {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #38506a;
  font-variant-numeric: tabular-nums;
}

.trial-depth-ratios > span {
  white-space: nowrap;
}

.modal-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  color: #0b2a44;
}

/* 2繧ｫ繝ｩ繝ﾃ・陦後ヵ繧ｩ繝ｼ繝 */
.trial-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2繧ｫ繝ｩ繝 */
  gap: 8px 12px;
}

.trial-field {
  display: grid;
  gap: 3px;
}

/* 蟆上＆繧√Λ繝吶Ν・・・蜉・*/
.trial-field label {
  font-weight: 700;
  font-size: 0.8rem;
}

.trial-field input {
  padding: 4px 6px;
  border: 1px solid #0b2a44;
  border-radius: 8px;
  font-size: 0.9rem;
  width: 95%;
}

.modal-note {
  min-height: 1.25em;
  color: #4d6c2f;
  margin: 8px 0;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

/* 繝｢繝ｼ繝€繝ｫ蜀・・DW / 豌ｷ蠅・・繧ｿ繝ｳ縺碁∈謚樒憾諷九・縺ｨ縺阪・濶ｲ */
#trialDw.selected,
#trialIbStart.selected,
#trialIbEnd.selected {
  background: #0b2a44;
  color: #fff;
}

/* 萓具ｼ壹Δ繝ｼ繝€繝ｫ蜀・〒 selected 縺御ｻ倥＞縺溘・繧ｿ繝ｳ縺ｯ濶ｲ螟画峩 */
.modal-actions button.selected {
  /* 蜈・・ DW 繝懊ち繝ｳ縺ｨ蜷後§濶ｲ */
  background-color: #0b2a44;
  color: #fff;
}




/* ===== 蜈･蜉帙Δ繝ｼ繝€繝ｫ・壻ｸ矩Κ繝懊ち繝ｳ繧貞ｰ代＠繧ｳ繝ｳ繝代け繝医↓ ===== */
#trialModal .modal-actions-row > button {
    padding: 6px 5px;
    font-size: 0.7rem;
}

/* モーダル保存ボタンを強調表示 */
#trialModal #trialSave {
  margin-left: 0;
  padding: 8px 18px;
  font-size: 0.95rem;
  font-weight: 800;
  border-width: 2px;
  box-shadow: none;
}

#trialModal .modal-actions-row.modal-actions-row-save #trialSave {
  width: 100%;
}
/**/


.qav-summary-table,
.qav-main-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

/* 蜈ｨ繧ｻ繝ｫ 1px 縺ｮ邱・*/
.qav-summary-table th,
.qav-summary-table td,
.qav-main-table th,
.qav-main-table td {
  border: 1px solid #d0d3d8;
  padding: 5px 7px;
  line-height: 1.35;
  text-align: center;
}

/* 繧ｵ繝槭Μ繝ｼ驛ｨ蛻・*/
.qav-summary-table th {
  background: #f7f7f7;
  font-weight: 600;
}
.qav-summary-table td {
  height: 32px;
  font-weight: 600;
}

.qav-main-table .qav-integrated-summary-labels th {
  background: #f7f7f7;
  font-weight: 700;
}

.qav-main-table .qav-integrated-summary-values td {
  height: 32px;
  background: #fff;
  font-weight: 700;
  border-bottom: 2px solid #b7c3cf;
}

/* 繝｡繧､繝ｳ陦ｨ繝倥ャ繝€ */
.qav-main-table .group-header {
  background: #f7f7f7;
  font-weight: 700;
}

.qav-main-table thead tr.qav-column-header th,
.qav-main-table thead tr.qav-time-header th {
  background: #fafafa;
  font-weight: 600;
}

/* 1霍晞屬=荳頑ｮｵ/荳区ｮｵ縺ｮ2陦後ｒ隕九ｄ縺吶￥縺吶ｋ・郁ｷ晞屬繝壹い蜊倅ｽ阪〒逋ｽ/繧ｰ繝ｬ繝ｼ・・*/
.qav-main-table tbody tr.qav-pair-white td {
  background: #ffffff;
}

.qav-main-table tbody tr.qav-pair-gray td {
  background: #f4f6f9;
}

.qav-main-table tbody tr.qav-row-top td {
  border-bottom: 0;
}

.qav-main-table tbody tr.qav-row-bottom td {
  border-top: 0;
}

/* rowspan=2 縺ｧ邨仙粋縺吶ｋ繧ｻ繝ｫ縺ｯ荳狗ｽｫ邱壹ｒ菫晄戟 */
.qav-main-table tbody tr.qav-row-top td.qav-rowspan2 {
  border-bottom: 1px solid #d0d3d8;
  vertical-align: middle;
}

/* 譁ｭ髱｢遨・ FS陦後・Upper/Lower繧ｷ繝輔ヨ邨仙粋蠅・阜 */
.qav-main-table td.qav-section-upper-shift {
  border-bottom: 1px dotted #9aa3ad !important;
}

.qav-main-table td.qav-section-lower-shift {
  border-top: 1px dotted #9aa3ad !important;
}

/* 断面積(平均水深/区分幅/区分断面)は行ペア色を無視して常に白 */
.qav-main-table tbody td.qav-section-bg-white {
  background: #ffffff !important;
}

/* 鬮倥＆隱ｿ謨ｴ: 邨仙粋繧ｻ繝ｫ繧貞性繧€陦後・鬮倥＆繧呈純縺医ｋ */
.qav-main-table tbody tr.qav-row-top,
.qav-main-table tbody tr.qav-row-bottom {
  height: 18px;
}

.qav-main-table tbody tr.qav-row-top td,
.qav-main-table tbody tr.qav-row-bottom td {
  height: 18px;
}

.qav-main-table tbody td.qav-rowspan2 {
  min-height: 36px;
  vertical-align: middle;
}

/* 荳区ｮｵ髢句ｧ九・ rowspan 縺ｧ繧ょ｢・阜邱壹ｒ菫昴▽ */
.qav-main-table tbody tr.qav-row-bottom td.qav-rowspan2 {
  border-top: 1px solid #d0d3d8;
}

/* 豐ｳ蟾晉憾豕∝・繧貞ｺ・￥縺吶ｋ */
.qav-main-table th.qav-status-header,
.qav-main-table td.qav-status-cell {
  width: 96px;
}

.qav-main-table td.qav-status-cell {
  text-align: center;
  position: relative;
  overflow: visible;
}

.qav-main-table col.qav-col-status {
  width: 96px;
}

.qav-main-table td.qav-status-cell .qav-status-icon {
  height: 55px;
  width: auto;
  color: #0b2a44;
  display: block;
  position: absolute;
  left: 60%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.output-sync-status {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #5b6472;
}

.output-sync-status[data-state="synced"] {
  color: #17643c;
}

.output-sync-status[data-state="failed"] {
  color: #9a3412;
}

.output-sync-status[data-state="pending"],
.output-sync-status[data-state="syncing"] {
  color: #1d4ed8;
}

.output-pending-list {
  margin-top: 10px;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.output-pending-list[hidden] {
  display: none !important;
}

.output-pending-list__title {
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #0b2a44;
}

.output-pending-list__items {
  list-style: none;
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.output-pending-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.output-pending-list__main {
  min-width: 0;
  font-size: 0.86rem;
  color: #24384f;
  overflow-wrap: anywhere;
}

.output-pending-list__badge {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1d4ed8;
}

.output-pending-list__item[data-state="failed"] .output-pending-list__badge {
  color: #9a3412;
}

.hq-observed-item.is-local-only .hq-observed-point,
.hq-observed-item.is-local-only .hq-observed-tag-bg {
  stroke: #d97706;
}

.hq-observed-item.is-local-only .hq-observed-tag-bg {
  fill: #fff4df;
}

.hq-observed-item.is-local-only .hq-observed-tag-text {
  fill: #8a4b00;
}

.qav-main-table td.qav-status-cell .qav-status-icon-top {
  top: -30px;
  transform: translateX(-50%) scaleY(2.0);
}

.qav-main-table td.qav-status-cell .qav-status-icon-bottom {
  top: 18px;
  transform: translateX(-50%) scaleY(-2.0);
}

.qav-main-table td.qav-status-cell .qav-status-sep {
  margin: 0 2px;
}

/* ===== 蜃ｺ蜉帙ユ繝ｼ繝悶Ν・壽ｨｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ逕ｨ繝ｩ繝・ヱ繝ｼ ===== */

.qav-main-scroll {
  margin-top: 10px;
}

#hwOutputTable.qav-main-table {
  min-width: 760px;
}

/* 繧ｹ繝槭・縺ｪ縺ｩ讓ｪ蟷・′迢ｭ縺・→縺阪↓讓ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ・九ヵ繧ｩ繝ｳ繝亥ｰ上＆繧・*/
@media (max-width: 768px) {
  .qav-main-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .qav-main-table {
    min-width: 1100px; /* 蛻玲焚縺ｫ蜷医ｏ縺帙※蠢・ｦ√↑繧芽ｪｿ謨ｴ */
    font-size: 12px;
  }

  #hwOutputTable.qav-main-table {
    min-width: 760px;
  }

  .qav-main-table th,
  .qav-main-table td {
    padding: 4px 5px;
    white-space: nowrap; /* 謚倥ｊ霑斐＆縺壽ｨｪ縺ｫ豬√☆ */
  }
}

/* ===== 繝上Φ繝舌・繧ｬ繝ｼ繝｡繝九Η繝ｼ・亥承繝峨Ο繝ｯ繝ｼ・・===== */

.app-menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1200;
}

.app-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 82vw);
  background: #f7fbff;
  color: #0b2a44;
  border-left: 1px solid #dfe7f3;
  transform: translateX(100%);
  transition: transform 160ms ease;
  z-index: 1201;

  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 12px 12px 12px;
}

.app-menu.open{
  transform: translateX(0);
}

.app-menu__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e7eef9;
}

.app-menu__brand{
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.app-menu__icon{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 5px;
  object-fit: contain;
  border: 1px solid #d7e1ee;
  border-radius: 8px;
  background: #fff;
}

.app-menu__title{
  line-height: 1.1;
  font-weight: 700;
}

.app-menu__subtitle{
  margin-top: 2px;
  color: #46627f;
  font-size: 0.82rem;
  font-weight: 600;
}

.app-menu__close{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: #fff;
  border: 1px solid #d7e1ee;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  color: #0b2a44;
}

.app-menu__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-menu__item{
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 1px solid #c8d8ea;
  border-radius: 8px;
  background: #fff;
  color: #0b2a44;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(11, 42, 68, 0.08);
}

.app-menu__item:active{
  background: #e9f2fb;
}

body.menu-open{
  overflow: hidden;
}

/* ===== info.html・郁ｦｳ貂ｬ謇€讀懃ｴ｢・・===== */
body.gps-page main{
  padding: 12px;
}

.gps-screen{
  padding: 12px 12px 24px;
}

.gps-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 6px;
}

.gps-title{
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.gps-status{
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* GPS谺・ｼ壽ｨｪ荳ｦ縺ｳ + / 蛹ｺ蛻・ｊ・・.65rem・・*/
.gps-inline{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.65rem;
  line-height: 1.25;
  margin: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}

.gps-inline-item{
  white-space: nowrap;
  opacity: 0.92;
}

.gps-inline-sep{
  margin: 0 0.45em;
  opacity: 0.55;
}

.gps-inline .gps-meta{
  font-size: inherit;
  opacity: 0.98;
}

/* 譌ｧUI縺梧ｮ九▲縺ｦ縺・※繧りｦ九∴縺ｪ縺・ｈ縺・↓・亥ｿｵ縺ｮ縺溘ａ・・*/
.gps-kv-grid{ display:none; }

.gps-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.gps-actions button{
  padding: 9px 10px;
  font-size: 0.95rem;
}

.gps-hint{
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* 繝悶Ο繝・け・郁ｿ大ｍ / 蜷咲ｧｰ讀懃ｴ｢ / 繝・ヰ繝・げ・・*/
.spot-block{
  margin-top: 12px;
  border: 1px solid #dfe7f3;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.spot-block--compact{
  padding: 10px;
}

.spot-block__title{
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.spot-block__status{
  font-size: 0.82rem;
  opacity: 0.85;
  margin-bottom: 8px;
}

/* 隕ｳ貂ｬ謇€蜷肴､懃ｴ｢・壼・蜉・陦鯉ｼ九・繧ｿ繝ｳ陦鯉ｼ井ｸ区ｮｵ・・*/
.name-input-row{
  display: flex;
  gap: 8px;
}

.name-input-row input{
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
}

.name-actions{
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.name-actions button{
  padding: 9px 10px;
  font-size: 0.9rem;
}

/* 繝・ヰ繝・げ蜈･蜉幢ｼ夂強縺・判髱｢縺ｯ邵ｦ荳ｦ縺ｳ */
.debug-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 560px){
  .debug-row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.debug-row input{
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
}

.debug-actions{
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.debug-actions button{
  padding: 9px 10px;
  font-size: 0.9rem;
}

/* 隕ｳ貂ｬ謇€繧ｫ繝ｼ繝・*/
.spot-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.spot-item{
  border: 1px solid #dbe6f5;
  background: #f6f8fb;
  border-radius: 12px;
  padding: 10px;
}

.spot-head{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.spot-name{
  font-weight: 700;
}

.spot-type{
  font-size: 0.75rem;
  padding: 2px 8px;
  border: 1px solid #0b2a44;
  border-radius: 999px;
  background: #e3edf8;
  color: #0b2a44;
  font-weight: 700;
  white-space: nowrap;
}

.spot-meta{
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.9;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.spot-actions{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.spot-actions a{
  text-decoration: none;
}

/* 繧ｹ繝槭・蜷代￠・壹き繝ｼ繝牙・繝懊ち繝ｳ繧貞ｰ代＠蟆上＆繧・*/
@media (max-width: 768px){
  .spot-actions button{
    padding: 8px 10px;
    font-size: 0.9rem;
  }
}


/* --- GPS谺・ｒ1陦後↓蝗ｺ螳夲ｼ・.65rem + / 蛹ｺ蛻・ｊ --- */
.gps-inline{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  font-size: 0.65rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}

.gps-inline-item{
  white-space: nowrap;
}

.gps-inline-sep{
  margin: 0 0.45em;
  opacity: 0.6;
}

.gps-inline .gps-meta{
  font-size: inherit;
  opacity: 0.98;
}


/* --- 霑大ｍ縺ｮ隕ｳ貂ｬ謇€繧呈､懃ｴ｢ 繝懊ち繝ｳ繧貞､ｧ縺阪￥ --- */
#gpsGet{
  width: 100%;
  padding: 14px 14px;
  font-size: 1.05rem;
  font-weight: 800;
}

@media (min-width: 520px){
  #gpsGet{
    width: auto;
    padding: 12px 16px;
    font-size: 1.05rem;
  }
}


/* ===== info.html・郁ｦｳ貂ｬ謇€讀懃ｴ｢・芽ｿｽ蜉隱ｿ謨ｴ ===== */

/* 迥ｶ諷具ｼ壹Λ繝吶Ν縺ｨ蛟､繧呈ｨｪ荳ｦ縺ｳ・域隼陦後＠縺ｪ縺・ｼ・*/
.gps-status-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.gps-status-label{
  opacity: 0.9;
}

.gps-status-value{
  font-weight: 800;
}

/* 豐ｳ蟾昴き繝｡繝ｩ髯､螟悶メ繧ｧ繝・け */
.gps-check{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 700;
}

.gps-check input{
  width: 18px;
  height: 18px;
}

/* GPS谺・・蠢・★1陦鯉ｼ・ 蛹ｺ蛻・ｊ・・*/
.gps-inline{
  flex-wrap: nowrap !important;
}

/* ===== info.html: 隕ｳ貂ｬ謇€隧ｳ邏ｰ繝｢繝ｼ繝€繝ｫ・・odal-overlay譁ｹ蠑擾ｼ・===== */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top))
           max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
  z-index: 1300;
  overscroll-behavior: contain;
}

/* hidden 螻樊€ｧ縺ｧ遒ｺ螳溘↓豸医☆ */
.modal-overlay[hidden]{ display:none; }

/* info.html 縺ｮ荳ｭ霄ｫ縺ｯ .modal-panel / .modal-header / .modal-body 讒矩€ */
.modal-overlay .modal-panel{
  position: relative;
  background: #fff;
  width: min(720px, 100%);
  border-radius: 14px;
  border: 1px solid #dfe7f3;
  padding: 12px;

  /* 笘・縺薙％縺碁㍾隕・ｼ夂判髱｢蜀・↓蜿弱ａ縺ｦ 窶懈悽譁・□縺鯛€・繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ */
  max-height: calc(var(--vh) * 100 - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@supports (height: 100dvh) {
  .modal-overlay .modal-panel{
    max-height: calc(100dvh - 32px);
  }
}

.modal-overlay .modal-body{
  flex: 1 1 auto;
  min-height: 0; /* 笘・flex 蜀・せ繧ｯ繝ｭ繝ｼ繝ｫ縺ｮ蠢・育ｴ・*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== info.html: 隕ｳ貂ｬ謇€隧ｳ邏ｰ繝｢繝ｼ繝€繝ｫ蜀・陦ｨ遉ｺ ===== */

.detail-grid{
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 8px 10px;
  align-items: start;
  font-size: 0.92rem;
}
.detail-k{ font-weight: 800; opacity: 0.9; }
.detail-v{ font-variant-numeric: tabular-nums; }

.detail-img-wrap{ margin-top: 12px; }
.detail-img-title{ font-weight: 800; margin-bottom: 6px; }
.detail-img{
  width: 100%;
  height: auto;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  background: #f6f8fb;
}

.detail-status{
  margin-top: 8px;
  font-size: 0.82rem;
  opacity: 0.85;
}

/* ===== 隕ｳ貂ｬ謇€隧ｳ邏ｰ繝｢繝ｼ繝€繝ｫ・壼・逕ｻ髱｢蛹厄ｼ・detailOverlay 縺縺托ｼ・===== */
#detailOverlay{
  align-items: stretch;
  justify-content: stretch;
  padding: 0; /* 蜈ｨ逕ｻ髱｢縺ｪ縺ｮ縺ｧ菴咏區縺ｪ縺暦ｼ・afe-area 縺ｯ荳ｭ縺ｧ蜃ｦ逅・ｼ・*/
}

/* 荳ｭ霄ｫ・・modal-panel・峨ｒ蜈ｨ逕ｻ髱｢縺ｫ */
#detailOverlay .modal-panel{
  width: 100vw;
  height: calc(var(--vh) * 100);
  max-height: none;

  border-radius: 0;
  border: 0;

  padding: 0;       /* 繝倥ャ繝€/譛ｬ譁・〒蛟句挨縺ｫ菴咏區繧剃ｻ倥￠繧・*/
  overflow: hidden; /* 譛ｬ譁・・繧偵せ繧ｯ繝ｭ繝ｼ繝ｫ縺ｫ縺吶ｋ */
  display: flex;
  flex-direction: column;
}

@supports (height: 100dvh) {
  #detailOverlay .modal-panel{
    height: 100dvh;
  }
}

/* 繝倥ャ繝€繧貞ｸｸ縺ｫ陦ｨ遉ｺ・磯哩縺倥ｋ繝懊ち繝ｳ縺瑚ｦ句､ｱ繧上ｌ縺ｪ縺・ｼ・*/
#detailOverlay .modal-header{
  flex: 0 0 auto;
  margin-bottom: 0;
  background: #fff;

  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    10px
    max(12px, env(safe-area-inset-left));
}

/* 譛ｬ譁・□縺代せ繧ｯ繝ｭ繝ｼ繝ｫ */
#detailOverlay .modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  padding:
    12px
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}



/* ===== 豌ｴ菴阪ち繝厄ｼ・I・・===== */

.wl-wrap{
  margin-top: 6px;
}

.wl-breadcrumb{
  margin: 6px 0 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.wl-crumb-sep{
  margin: 0 0.45em;
  opacity: 0.6;
}

.wl-grid2{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.wl-field-compact{
  margin: 0;
}

.wl-label-sm{
  font-size: 0.8rem;
}

.wl-method-note{
  margin: 2px 0 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 700;
  color: #805100;
}

.wl-hw-method{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.wl-hw-method-option{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(11, 42, 68, 0.2);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

.wl-hw-method-option input[type="radio"]{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #1f4b99;
}

.wl-hw-method-option span{
  min-width: 0;
  overflow-wrap: anywhere;
}

.wl-readonly{
  background: #f6f8fb;
}

.wl-addline{
  margin-top: 4px;
  font-weight: 800;
  opacity: 0.9;
}


/* 蜉邂怜€､・壽焔蜈･蜉婉I */
.wl-addmode{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.wl-addmode-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}

#wlAddManualOn{
  width: 18px;
  height: 18px;
}

/* 逕ｻ髱｢螟悶・縺ｿ蜃ｺ縺鈴亟豁｢・亥・蜉帙・蟶ｸ縺ｫ100%・・*/
#wlReadStart,
#wlReadEnd,
#wlObsStart,
#wlObsEnd,
#wlMethod,
#wlAddManual{
  width: 100%;
  box-sizing: border-box;
}

/* grid繧｢繧､繝・Β縺檎ｸｮ繧√ｉ繧後★縺ｯ縺ｿ蜃ｺ縺吶・繧帝亟縺・*/
.wl-grid2 > *{
  min-width: 0;
}

.wl-card{
  margin-top: 10px;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  background: #f6f8fb;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.wl-values{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.wl-val{
  font-size: 1.35rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.wl-formulas{
  font-weight: 800;
  opacity: 0.92;
}


/* ===== 豌ｴ菴阪ち繝厄ｼ亥ｼｷ蛻ｶ2繧ｫ繝ｩ繝 + 菴咏區繝ｦ繝ｼ繝・ぅ繝ｪ繝・ぅ・・===== */
.wl-mt-10{ margin-top: 10px; }
.wl-mt-12{ margin-top: 12px; }

.wl-decision{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #d0d3d8;
}

.wl-val--decision{
  font-size: 1.55rem;
}

.wl-formulas small{
  font-weight: 700;
  opacity: 0.92;
}

/* ===== 豌ｴ菴阪ち繝厄ｼ壽ｰｴ菴崎｡ｨ遉ｺ縺ｮ蜊倅ｽ・"m"・亥ｰ上＆繧・ｼ・===== */
.wl-val::after{
  content: " m";
  font-size: 0.75em;
  font-weight: 700;
  opacity: 0.85;
  margin-left: 0.15em;
}