/* public/css/hangul-name.css — 名前→ハングル変換ツール */
.hm-name{
  --haneul:#329eff; --bada:#1b6fd1; --gyul:#ff8a3d; --ink:#12263a;
  --hn-line:#d9e9fb; --hn-soft:#f2f8ff; --hn-muted:#5b6b7c;
  --hn-ko:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.hm-name .hn-head{margin:0 0 1.2rem}
.hm-name .hn-lead{color:var(--hn-muted);line-height:1.8;margin:.4rem 0 0}
.hn-tool{background:#fff;border:1px solid var(--hn-line);border-radius:16px;padding:1.2rem;margin-bottom:2rem;box-shadow:0 4px 18px rgba(18,38,58,.06)}
.hn-fields{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.hn-field{display:flex;flex-direction:column;gap:.35rem;font-weight:700;color:var(--ink);font-size:.9rem;margin:0}
.hn-field input{border:2px solid var(--hn-line);border-radius:10px;padding:.75rem .9rem;font-size:1.1rem;outline:none;width:100%;color:var(--ink);background:#fff}
.hn-field input:focus{border-color:var(--haneul)}
.hn-hint{font-size:.82rem;color:var(--hn-muted);margin:.6rem 0 .9rem}
.hn-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--hn-line);background:#fff;color:var(--ink);border-radius:999px;padding:.6rem 1.1rem;font-weight:700;font-size:.92rem;cursor:pointer;text-decoration:none;line-height:1.2}
.hn-btn:hover{border-color:var(--haneul);color:var(--haneul)}
.hn-btn-main{background:var(--gyul);border-color:var(--gyul);color:#fff;width:100%;padding:.85rem 1rem;font-size:1rem}
.hn-btn-main:hover{color:#fff;border-color:var(--gyul);opacity:.92}
.hn-error{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:10px;background:#fff4ec;color:#b4520f;font-size:.9rem;line-height:1.6}
.hn-result{margin-top:1.4rem}
.hn-main{text-align:center;background:var(--hn-soft);border-radius:14px;padding:1.4rem 1rem}
.hn-main-label{margin:0;color:var(--hn-muted);font-size:.88rem;font-weight:700}
.hn-main-name{margin:.3rem 0 .1rem;font-size:clamp(2.2rem,9vw,3.4rem);font-weight:900;color:var(--ink);font-family:var(--hn-ko);letter-spacing:.04em;word-break:keep-all;line-height:1.3}
.hn-main-kana{margin:0 0 .9rem;color:var(--hn-muted);font-weight:700}
.hn-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.hn-block{margin-top:1.8rem}
.hn-block-title{font-size:1.05rem;font-weight:800;color:var(--ink);margin:0 0 .6rem;padding-left:.6rem;border-left:4px solid var(--haneul)}
.hn-note{font-size:.85rem;color:var(--hn-muted);line-height:1.7;margin:.4rem 0 .8rem}
.hn-word{margin-bottom:.9rem}
.hn-word-label{font-size:.8rem;font-weight:700;color:var(--hn-muted);margin-bottom:.35rem}
.hn-steps{display:flex;flex-wrap:wrap;gap:.45rem;align-items:flex-start}
.hn-step{border:1px solid var(--hn-line);border-radius:10px;padding:.45rem .6rem;min-width:64px;text-align:center;background:#fff}
.hn-step-src{font-size:.85rem;color:var(--hn-muted)}
.hn-step-out{font-size:1.35rem;font-weight:800;color:var(--ink);font-family:var(--hn-ko)}
.hn-step-note{font-size:.72rem;color:var(--bada);margin-top:.25rem;max-width:150px;line-height:1.45;text-align:left}
.hn-variants{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.hn-variant{display:flex;align-items:center;gap:.7rem;border:1px solid var(--hn-line);border-radius:12px;padding:.6rem .8rem;background:#fff}
.hn-variant-text{font-size:1.3rem;font-weight:800;color:var(--ink);font-family:var(--hn-ko);min-width:6em}
.hn-variant-label{flex:1;font-size:.8rem;color:var(--hn-muted);line-height:1.5}
.hn-variant.is-base .hn-variant-label{color:var(--bada);font-weight:700}
.hn-variant .hn-btn{padding:.4rem .8rem;font-size:.8rem;flex-shrink:0}
.hn-themes{display:flex;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap}
.hn-themes .hn-btn.is-active{border-color:var(--haneul);color:var(--haneul);background:var(--hn-soft)}
.hn-card-img{display:block;width:100%;max-width:420px;margin:0 auto;border-radius:14px;box-shadow:0 6px 24px rgba(18,38,58,.15);aspect-ratio:1/1;background:var(--hn-soft)}
.hn-card-actions{margin-top:.9rem}
.hn-parts{list-style:none;padding:0;margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.45rem}
.hn-part{border:1px solid var(--hn-line);border-radius:10px;padding:.45rem .7rem;background:#fff;font-family:var(--hn-ko)}
.hn-part b{font-size:1.2rem;color:var(--ink);margin-right:.35rem}
.hn-part span{color:var(--hn-muted);font-size:.9rem}
.hn-links{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem}
.hn-cta{margin-top:1.1rem;padding:1rem;border-radius:12px;background:var(--hn-soft);text-align:center}
.hn-cta p{margin:0 0 .7rem;font-size:.9rem;color:var(--ink);line-height:1.7}
.hn-cta .hn-btn-main{max-width:360px}
.hn-table-wrap{overflow-x:auto;margin:.6rem 0 1rem}
.hn-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:480px}
.hn-table th,.hn-table td{border:1px solid var(--hn-line);padding:.45rem .5rem;text-align:center}
.hn-table th{background:var(--hn-soft);color:var(--ink);font-weight:700}
.hn-table td{font-family:var(--hn-ko);font-weight:700;color:var(--ink)}
@media (max-width:560px){
  .hn-fields{grid-template-columns:1fr}
  .hn-tool{padding:1rem}
  .hn-variant{flex-wrap:wrap}
  .hn-variant-label{flex-basis:100%;order:3}
}

/* ---------- タブ ---------- */
.hn-tabs{display:flex;gap:.5rem;margin:0 0 1rem;flex-wrap:wrap}
.hn-tabs .hn-btn.is-active{border-color:var(--haneul);color:var(--haneul);background:var(--hn-soft)}

/* ---------- 韓国風の名前メーカー ---------- */
.hn-field select{border:2px solid var(--hn-line);border-radius:10px;padding:.7rem .9rem;font-size:1rem;width:100%;color:var(--ink);background:#fff;outline:none}
.hn-field select:focus{border-color:var(--haneul)}
.hmk-lead{margin-top:0}
.hmk-group{margin:.9rem 0}
.hmk-label{font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:.4rem}
.hmk-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.hmk-chips .hn-btn.is-active{border-color:var(--haneul);color:var(--haneul);background:var(--hn-soft)}
.hmk-submit{margin-top:.4rem}
.hmk-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.hmk-item{border:1px solid var(--hn-line);border-radius:14px;padding:1rem;background:#fff;text-align:center}
.hmk-item.is-selected{border-color:var(--haneul);box-shadow:0 0 0 2px rgba(50,158,255,.15)}
.hmk-name{font-family:var(--hn-ko);font-weight:900;font-size:2rem;color:var(--ink);letter-spacing:.04em;line-height:1.3}
.hmk-hanja{font-weight:700;color:var(--hn-muted);font-size:.95rem}
.hmk-kana{font-weight:700;color:var(--ink);margin-top:.15rem}
.hmk-meaning{margin:.4rem 0 .5rem;font-size:.88rem;color:var(--hn-muted);line-height:1.6}
.hmk-reasons{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-bottom:.7rem}
.hmk-reasons span{font-size:.75rem;background:var(--hn-soft);color:var(--bada);border-radius:999px;padding:.2rem .6rem;font-weight:700}
.hmk-item .hn-btn{padding:.45rem .9rem;font-size:.85rem}
.hmk-more{margin-top:.9rem;text-align:center}
@media (min-width:720px){
  .hmk-list{grid-template-columns:1fr 1fr}
}