*{
  box-sizing:border-box;
}

:root{
  --bg:#f7f8f7;
  --surface:#ffffff;
  --surface-soft:#f4f6f5;

  --text:#19231e;
  --muted:#6e7a74;

  --green:#175b40;
  --green-hover:#10462f;
  --green-soft:#edf5f1;

  --border:#dde3df;
  --border-dark:#cfd8d3;

  --good:#157347;
  --warn:#9b6810;
  --bad:#b83d38;

  --radius:12px;
}

html{
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    "Noto Sans JP",
    sans-serif;
  line-height:1.7;
}

a{
  color:var(--green);
}

.wrap{
  width:min(1080px,calc(100% - 40px));
  margin-left:auto;
  margin-right:auto;
}

/* HEADER */

.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
}

.header-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  color:var(--green);
  font-size:20px;
  font-weight:750;
  text-decoration:none;
  letter-spacing:-.02em;
}

.system-status{
  display:inline-flex;
  align-items:center;
  padding:6px 11px;
  border:1px solid #d5e5dc;
  border-radius:999px;
  color:var(--green);
  background:#f6faf8;
  font-size:11px;
  letter-spacing:.08em;
}

/* MAIN */

.main{
  padding-top:28px;
  padding-bottom:60px;
}

.breadcrumb{
  margin:0 0 30px;
  color:var(--muted);
  font-size:13px;
}

.breadcrumb a{
  color:var(--muted);
  text-decoration:none;
}

.breadcrumb a:hover{
  color:var(--green);
}

/* HERO */

.hero{
  margin-bottom:32px;
}

.eyebrow{
  margin:0 0 10px;
  color:var(--green);
  font-size:12px;
  font-weight:750;
  letter-spacing:.12em;
}

.hero h1{
  margin:0;
  max-width:850px;
  color:var(--text);
  font-size:clamp(36px,5vw,64px);
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:800;
}

.hero > p:not(.eyebrow){
  max-width:780px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:16px;
}

/* MAIN TOOL CARD */

.diagnostic-panel{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:
    0 12px 32px rgba(28,53,40,.055);
}

.panel-top{
  min-height:52px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--border);
  background:#fff;
}

.panel-label{
  color:var(--green);
  font-size:11px;
  font-weight:750;
  letter-spacing:.12em;
}

.measurement-state{
  padding:5px 9px;
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
}

/* PRIMARY RESULT */

.offset-display{
  padding:48px 30px 34px;
  text-align:center;
  background:#fff;
}

.offset-display > *{
  margin-left:auto;
  margin-right:auto;
}

.offset-number{
  margin:4px 0 8px;
}

#offsetValue{
  display:inline-block;
  color:var(--text);
  font-size:clamp(58px,8vw,94px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:800;
}

#offsetUnit{
  margin-left:8px;
  color:var(--muted);
  font-size:20px;
  font-weight:600;
}

#offsetMessage{
  margin:14px auto 0;
  max-width:650px;
  color:var(--muted);
  font-size:15px;
}

/* STARTUP STATUS */

.boot-status{
  width:min(700px,100%);
  margin-top:26px;
  padding:12px 0 0;
}

.boot-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;
  color:var(--muted);
  font-size:11px;
}

.sample-track{
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#e8ecea;
}

.sample-progress{
  height:100%;
  background:var(--green);
  border-radius:999px;
}

/* SUMMARY */

.result-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--border);
  background:#fff;
}

.summary-item{
  min-width:0;
  padding:22px 24px;
  border-right:1px solid var(--border);
}

.summary-item:last-child{
  border-right:0;
}

.summary-item small{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:11px;
}

.summary-item strong{
  color:var(--text);
  font-size:17px;
}

.verdict-item{
  background:var(--green-soft);
}

#clockVerdict{
  color:var(--green);
}

/* REFERENCE CLOCK */

.reference-clock{
  margin:24px;
  padding:22px;
  text-align:center;
  background:var(--surface-soft);
  border-radius:10px;
}

.reference-clock small{
  display:block;
  color:var(--muted);
  font-size:11px;
}

.reference-clock strong{
  display:block;
  margin:3px 0;
  color:var(--text);
  font-size:34px;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
}

/* DETAIL VALUES */

.diagnostic-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin:0 24px 24px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--border);
}

.diagnostic-item{
  min-width:0;
  padding:18px;
  text-align:center;
  background:#fff;
}

.diagnostic-item small{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:10px;
}

.diagnostic-item strong{
  color:var(--text);
  font-size:18px;
  font-variant-numeric:tabular-nums;
}

/* BUTTONS */

.start-btn,
.copy-btn{
  min-height:52px;
  border-radius:9px;
  font-weight:700;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.start-btn{
  display:block;
  width:calc(100% - 48px);
  margin:0 24px 14px;
  border:1px solid var(--green);
  background:var(--green);
  color:#fff;
}

.start-btn:hover{
  border-color:var(--green-hover);
  background:var(--green-hover);
}

.start-btn:active{
  transform:translateY(1px);
}

.copy-btn{
  display:block;
  width:calc(100% - 48px);
  margin:0 24px 24px;
  border:1px solid var(--border-dark);
  background:#fff;
  color:var(--green);
}

.copy-btn:hover{
  background:var(--surface-soft);
}

/* INFORMATION BELOW TOOL */

.explain-card,
.notice-card{
  margin-top:22px;
  padding:28px 30px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
}

.explain-card h2,
.notice-card h2{
  margin-top:0;
  color:var(--text);
  font-size:22px;
}

.explain-card h3,
.notice-card h3{
  color:var(--text);
}

.explain-card p,
.explain-card li,
.notice-card p,
.notice-card li{
  color:var(--muted);
}

/* FOOTER */

.site-footer{
  margin-top:40px;
  padding:28px 0;
  border-top:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:12px;
}

.site-footer a{
  color:var(--green);
}

/* STATE COLORS */

#offsetValue.good,
#clockVerdict.good{
  color:var(--good);
}

#offsetValue.warn,
#clockVerdict.warn{
  color:var(--warn);
}

#offsetValue.bad,
#clockVerdict.bad{
  color:var(--bad);
}

/* MOBILE */

.mobile-break{
  display:none;
}

@media(max-width:760px){

  .wrap{
    width:min(100% - 28px,1080px);
  }

  .header-inner{
    min-height:62px;
  }

  .brand{
    font-size:17px;
  }

  .system-status{
    font-size:9px;
  }

  .main{
    padding-top:20px;
  }

  .breadcrumb{
    margin-bottom:24px;
  }

  .hero{
    margin-bottom:24px;
  }

  .hero h1{
    font-size:clamp(34px,11vw,50px);
  }

  .hero > p:not(.eyebrow){
    font-size:14px;
  }

  .mobile-break{
    display:block;
  }

  .panel-top{
    padding:0 18px;
  }

  .offset-display{
    padding:38px 18px 28px;
  }

  #offsetValue{
    font-size:clamp(52px,17vw,76px);
  }

  .result-summary{
    grid-template-columns:1fr;
  }

  .summary-item{
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .summary-item:last-child{
    border-bottom:0;
  }

  .reference-clock{
    margin:18px;
  }

  .reference-clock strong{
    font-size:28px;
  }

  .diagnostic-grid{
    grid-template-columns:1fr 1fr;
    margin:0 18px 18px;
  }

  .start-btn,
  .copy-btn{
    width:calc(100% - 36px);
    margin-left:18px;
    margin-right:18px;
  }

  .explain-card,
  .notice-card{
    padding:22px 20px;
  }
}

@media(max-width:430px){

  .diagnostic-grid{
    grid-template-columns:1fr 1fr;
  }

  .diagnostic-item{
    padding:15px 10px;
  }
}

/* === CLOCK MOBILE ACTION FLOW START === */

@media(max-width:760px){

  /*
   * スマホ時だけ診断パネルを縦方向の
   * 明示的な順序で表示する。
   */
  .diagnostic-panel{
    display:flex;
    flex-direction:column;
  }

  .panel-top{
    order:1;
  }

  /*
   * 主結果
   * +4.6 ms / 説明 / 同期バー
   */
  .offset-display{
    order:2;
    padding:
      30px 18px
      22px !important;
  }

  #offsetValue{
    font-size:
      clamp(
        54px,
        18vw,
        76px
      ) !important;
  }

  #offsetMessage{
    margin-top:
      10px !important;

    font-size:
      14px !important;
  }

  .boot-status{
    margin-top:
      20px !important;
  }

  /*
   * 再測定を主結果の直後へ。
   */
  .start-btn{
    order:3;

    width:
      calc(100% - 36px) !important;

    margin:
      0 18px
      18px !important;

    min-height:
      52px !important;
  }

  /*
   * 以下は詳細情報。
   */
  .result-summary{
    order:4;

    display:grid !important;
    grid-template-columns:
      1fr 1fr !important;
  }

  .summary-item{
    padding:
      16px 15px !important;

    border-right:
      1px solid
      var(--border) !important;

    border-bottom:
      1px solid
      var(--border) !important;
  }

  .summary-item:nth-child(2){
    border-right:
      0 !important;
  }

  /*
   * 3つ目は横幅いっぱい。
   */
  .summary-item:nth-child(3){
    grid-column:
      1 / -1;

    border-right:
      0 !important;

    border-bottom:
      0 !important;
  }

  .summary-item small{
    margin-bottom:
      2px !important;

    font-size:
      10px !important;
  }

  .summary-item strong{
    font-size:
      15px !important;
  }

  .reference-clock{
    order:5;

    margin:
      16px 18px !important;

    padding:
      16px !important;
  }

  .reference-clock strong{
    font-size:
      25px !important;
  }

  .diagnostic-grid{
    order:6;

    margin:
      0 18px
      18px !important;
  }

  .diagnostic-item{
    padding:
      13px 8px !important;
  }

  .diagnostic-item strong{
    font-size:
      16px !important;
  }

  /*
   * コピー等の補助ボタンは最後。
   */
  .copy-btn{
    order:7;
  }
}

/* === CLOCK MOBILE ACTION FLOW END === */

/* === CLOCK MOBILE SPACING FINAL START === */

@media(max-width:760px){

  /*
   * 測定日時の下を詰める
   */
  .result-summary{
    margin-bottom:0 !important;
  }

  .summary-item:nth-child(3){
    padding-top:14px !important;
    padding-bottom:12px !important;
  }

  /*
   * 推定現在時刻を少し上へ
   */
  .reference-clock{
    margin-top:6px !important;
    margin-bottom:14px !important;
  }

}

/* === CLOCK MOBILE SPACING FINAL END === */

/* === MEASUREMENT DATE NO WRAP === */

.summary-item:nth-child(3) strong{
  white-space:nowrap;
}

@media(max-width:760px){
  .summary-item:nth-child(3) strong{
    font-size:clamp(13px,3.6vw,15px) !important;
    white-space:nowrap;
  }
}