/* 調べ  style.css  version 2  2026-08-19 */

:root{
  --ground:#e7eff0;
  --surface:#ffffff;
  --ink:#14181a;
  --muted:#6a7478;
  --rule:#c3d0d3;
  --accent:#1c5a70;
  --beat:#a5802f;
  --warn:#8a3b2e;
  --gothic:"Hiragino Sans","ヒラギノ角ゴシック","Yu Gothic","游ゴシック体","Noto Sans JP","Meiryo",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Roboto Mono",monospace;
  --wrap:840px;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* 見出しの帯 */
.bar{border-bottom:1px solid var(--rule)}
.bar-in{display:flex;align-items:baseline;gap:16px;padding:18px 20px}
.logo{
  margin:0;
  font-size:26px;
  font-weight:700;
  letter-spacing:.28em;
  text-indent:.28em;
}
.tag{margin:0;font-size:13px;color:var(--muted);letter-spacing:.08em}

/* 入力 */
.entry{margin:36px 0 0}
.lab{display:block;font-size:13px;color:var(--muted);letter-spacing:.1em;margin-bottom:8px}
textarea{
  width:100%;
  padding:16px;
  border:1px solid var(--rule);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:17px;
  line-height:1.9;
  resize:vertical;
  border-radius:0;
}
textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}

.entry-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.count{font-family:var(--mono);font-size:12px;color:var(--muted)}

.btn{
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--ground);
  font-family:var(--gothic);
  font-size:15px;
  font-weight:700;
  letter-spacing:.16em;
  text-indent:.16em;
  padding:11px 28px;
  cursor:pointer;
  border-radius:0;
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.4;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

.quota{margin:12px 0 0;font-size:13px;color:var(--muted)}
.quota b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.quota button{
  border:1px solid var(--rule);background:transparent;color:var(--ink);
  font-family:var(--gothic);font-size:12px;padding:4px 12px;margin-left:10px;cursor:pointer;border-radius:0;
}

/* 進行中 */
.status{display:flex;align-items:center;gap:12px;margin:28px 0;font-size:14px;color:var(--muted)}
.spin{width:10px;height:10px;border:1px solid var(--accent);display:inline-block;animation:tick 1s steps(4) infinite}
@keyframes tick{0%{transform:rotate(0)}100%{transform:rotate(90deg)}}

/* 結果 */
.demo{margin:22px 0 0;padding:10px 14px;border:1px solid var(--rule);background:var(--surface);font-size:13px;color:var(--muted)}
.results{margin:20px 0 0}

.card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-bottom:none;
  padding:22px 22px 18px;
}
.card:last-child{border-bottom:1px solid var(--rule)}

@media (prefers-reduced-motion:no-preference){
  .card{animation:rise .34s ease both}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.card-name{font-size:15px;font-weight:700;letter-spacing:.14em}
.card-form{font-family:var(--mono);font-size:12px;color:var(--muted)}
.card-mark{margin-left:auto;font-size:12px;letter-spacing:.06em}
.card-mark.ok{color:var(--accent)}
.card-mark.ng{color:var(--warn)}

/* 句と拍尺 */
.ku{margin:0 0 14px}
.ku:last-child{margin-bottom:0}
.ku-text{font-size:21px;line-height:1.6;letter-spacing:.04em}
.ku-kana{font-size:12px;color:var(--muted);letter-spacing:.06em;margin-top:2px}
.ruler{display:flex;gap:3px;margin-top:7px;align-items:center;flex-wrap:wrap}
.beat{width:9px;height:9px;border:1px solid var(--beat)}
.beat.on{background:var(--beat)}
.beat.over{border-color:var(--warn);background:var(--warn)}
.beat.miss{border-color:var(--warn);background:transparent}
.ruler-n{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px}
.ruler-n.ng{color:var(--warn)}

/* 漢詩 */
.kanshi-line{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.kanshi-chars{display:flex;gap:10px}
.kanshi-ch{display:flex;flex-direction:column;align-items:center;width:30px}
.kanshi-ch span:first-child{font-size:25px;line-height:1.3}
.kanshi-ch .tone{font-size:11px;color:var(--beat);line-height:1}
.kanshi-ch .tone.ng{color:var(--warn)}
.kanshi-ch.rhyme span:first-child{border-bottom:2px solid var(--accent)}
.kudashi{font-size:14px;color:var(--ink);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule)}
.kudashi div{line-height:2}
.yaku{font-size:13px;color:var(--muted);margin-top:10px}

.after{display:flex;gap:12px;margin:24px 0 0;flex-wrap:wrap}

.about{margin:56px 0 40px;padding-top:22px;border-top:1px solid var(--rule)}
.about h2{font-size:15px;font-weight:700;letter-spacing:.1em;margin:0 0 10px}
.about p{margin:0 0 10px;font-size:14px;color:var(--muted)}
.about .fine{font-size:12px}

.foot{border-top:1px solid var(--rule);padding:20px 0;margin-top:20px}
.foot p{margin:0;font-size:12px;color:var(--muted);letter-spacing:.28em}

.err{border:1px solid var(--warn);background:var(--surface);padding:16px;font-size:14px;color:var(--warn)}

@media (max-width:520px){
  .logo{font-size:22px}
  .card{padding:18px 16px 14px}
  .ku-text{font-size:19px}
  .kanshi-ch{width:26px}
  .kanshi-ch span:first-child{font-size:22px}
  .kanshi-chars{gap:6px}
}