/* =========================================================
   無料命式算出（page-templates/tpl-meishiki.php）
   テーマの色・部品（--main / --deep / --ink-b / .btn / .tbl …）をそのまま使う
   ========================================================= */

/* ---------- 入力フォーム ---------- */
.mk-entry{padding-bottom:70px}
.mk-form{background:#fff;border:1px solid var(--line);border-top:4px solid var(--main);
  padding:38px 44px 34px;max-width:680px}
.mk-form .mk-label{display:block;font-size:15.5px;font-weight:700;color:var(--ink-b);margin-bottom:10px}
.mk-form .mk-sex{display:flex;gap:12px}
.mk-form .mk-sex label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);padding:13px 10px;font-size:16px;font-weight:400;color:var(--ink);
  margin:0;cursor:pointer;border-radius:2px;transition:border-color .18s,background-color .18s}
.mk-form .mk-sex label:has(input:checked){border-color:var(--main);background:var(--tint);font-weight:700;color:var(--ink-b)}
.mk-form .mk-sex input{accent-color:var(--deep);width:18px;height:18px;margin:0}
.mk-form .mk-date{display:flex;align-items:center;gap:8px}
.mk-form .mk-date select{width:auto;flex:1;min-width:0;padding:13px 10px}
.mk-form .mk-date select:first-child{flex:1.5}
.mk-form .mk-date span{font-size:15px;color:var(--muted);white-space:nowrap}
.mk-form .submit{margin-top:30px}
.mk-form .submit .btn{min-width:280px;font-size:17px}
.mk-err{color:#c0392b;font-size:15px;margin-top:4px}
.mk-privacy{text-align:center;font-size:13.5px;color:var(--muted);margin-top:16px}

/* ---------- 結果 ---------- */
.mk-result:focus{outline:none}
.mk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.mk-card{background:#fff;border:1px solid var(--line);padding:30px 30px 26px}
.mk-card h4{font-size:18.5px;font-weight:700;color:var(--ink-b);margin:0 0 16px;
  padding-left:12px;border-left:4px solid var(--main);line-height:1.5}
.mk-card h4.mk-gap{margin-top:34px}
.mk-hint{font-size:13.5px;color:var(--muted);margin-top:12px}

/* 陰占 */
.mk-insen{width:100%;border-collapse:collapse;table-layout:fixed}
.mk-insen th{font-size:13px;font-weight:700;color:var(--muted);padding:0 0 8px;letter-spacing:.2em}
.mk-insen td{text-align:center;font-size:28px;font-weight:700;color:var(--ink-b);
  border:1px solid var(--line);background:var(--tint);padding:14px 0;letter-spacing:.12em}
.mk-tenchu{margin-top:14px;font-size:15px;color:var(--muted)}
.mk-tenchu b{display:inline-block;margin-left:8px;background:var(--deep);color:#fff;
  font-size:15px;padding:3px 14px;border-radius:2px;letter-spacing:.06em}

/* 人体図 */
.mk-body{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mk-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:84px;border:1px solid var(--line);background:#fff;border-radius:2px;
  font-family:inherit;color:var(--ink-b);cursor:pointer;padding:8px 4px;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.mk-cell:hover{border-color:var(--main);box-shadow:0 4px 14px rgba(30,75,128,.14);transform:translateY(-1px)}
.mk-cell.is-empty{background:repeating-linear-gradient(135deg,#fff 0 8px,var(--tint) 8px 9px);cursor:default}
.mk-cell.is-shusei{background:#fff}
.mk-cell.is-jusei{background:var(--tint)}
.mk-place{font-size:12px;color:var(--main);letter-spacing:.14em;font-weight:700}
.mk-name{font-size:18.5px;font-weight:700;letter-spacing:.06em}

/* 大運 */
.mk-taiun{width:100%;border-collapse:collapse;font-size:15px}
.mk-taiun th{background:var(--tint);color:var(--ink-b);font-weight:700;font-size:13.5px;
  padding:10px 6px;border:1px solid var(--line)}
.mk-taiun td{text-align:center;padding:9px 6px;border:1px solid var(--line)}
.mk-taiun td:first-child{font-family:"Montserrat","Segoe UI",Arial,sans-serif;color:var(--muted);font-size:14px}
.mk-taiun td:nth-child(2){font-weight:700;color:var(--ink-b);letter-spacing:.08em}
.mk-link{border:0;background:none;padding:0;font:inherit;color:var(--deep);cursor:pointer;
  border-bottom:1px dashed var(--main)}
.mk-link:hover{color:var(--ink-b);border-bottom-style:solid}

/* 中心の星・天中殺 */
.mk-core{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;margin-top:28px}
.mk-core>div{background:#fff;border:1px solid var(--line);border-top:4px solid var(--main);padding:28px 30px}
.mk-core__en{font-family:"Montserrat","Segoe UI",Arial,sans-serif;font-size:12px;letter-spacing:.16em;
  font-weight:600;color:var(--main);margin-bottom:8px}
.mk-core h4{font-size:20.5px;font-weight:700;color:var(--ink-b);margin:0 0 12px}
.mk-core h4 b{font-size:26px;margin-left:6px}
.mk-core p{font-size:15.5px;color:#3f4b57}
.mk-m-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.mk-m-tags span{background:var(--tint);border:1px solid var(--line);color:var(--ink-b);
  font-size:13.5px;padding:3px 12px;border-radius:2px}

/* 鑑定への導線 */
.mk-next{margin-top:28px;background:var(--ink-b);color:#fff;padding:36px 40px;text-align:center}
.mk-next h4{font-size:22px;font-weight:700;margin:0 0 12px}
.mk-next p{font-size:15.5px;opacity:.92;max-width:680px;margin:0 auto 24px}
.mk-next .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.mk-next .btn.pri{background:#fff;color:var(--ink-b);box-shadow:none}
.mk-next .btn.pri:hover{background:var(--tint)}
.mk-next .btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.mk-next .btn.sec:hover{background:#fff;color:var(--ink-b);border-color:#fff}

/* ---------- 解説 ---------- */
.tbl.mk-parts th{width:220px}
.mk-stars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mk-stars--jusei{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:10px}
.mk-star{background:#fff;border:1px solid var(--line);border-top:3px solid var(--main);padding:22px 24px 24px}
.mk-star__meta{font-size:13px;color:var(--main);font-weight:700;letter-spacing:.06em;margin-bottom:6px}
.mk-star__meta b{font-family:"Montserrat","Segoe UI",Arial,sans-serif;font-size:16px}
.mk-star h4{font-size:20px;font-weight:700;color:var(--ink-b);margin:0 0 4px}
.mk-star h4 small{font-size:12.5px;font-weight:400;color:var(--muted);margin-left:8px}
.mk-star__key{font-size:14px;font-weight:700;color:#4d5b68;margin-bottom:8px}
.mk-star p{font-size:15px;color:#4d5b68}

/* ---------- モーダル ---------- */
.mk-modal{border:0;padding:0;max-width:560px;width:calc(100% - 32px);border-radius:2px;
  border-top:4px solid var(--main);box-shadow:0 20px 60px rgba(20,40,70,.3)}
.mk-modal::backdrop{background:rgba(20,40,70,.5)}
.mk-modal__in{position:relative;padding:34px 34px 30px}
.mk-modal__close{position:absolute;right:10px;top:8px;width:40px;height:40px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.mk-modal__close:hover{color:var(--ink-b)}
.mk-modal h4{font-size:24px;font-weight:700;color:var(--ink-b);margin:0 0 12px}
.mk-modal h4 small{font-size:14px;font-weight:400;color:var(--muted);margin-left:4px}
.mk-modal p{font-size:15.5px;color:#3f4b57;line-height:1.95}
.mk-m-sub{font-size:13px!important;color:var(--main)!important;font-weight:700;letter-spacing:.1em;margin-bottom:4px}
.mk-m-key{font-weight:700;color:var(--ink-b)!important;margin-bottom:8px}

/* ---------- スマートフォン ---------- */
@media (max-width:900px){
  .mk-form{padding:26px 18px 24px}
  .mk-form .submit .btn{min-width:0;width:100%}
  .mk-grid,.mk-core{grid-template-columns:1fr;gap:18px}
  .mk-core{margin-top:18px}
  .mk-card{padding:22px 16px 20px}
  .mk-core>div{padding:22px 18px}
  .mk-insen td{font-size:23px;padding:12px 0}
  .mk-cell{min-height:72px}
  .mk-name{font-size:16px;letter-spacing:.02em}
  .mk-taiun{font-size:14px}
  .mk-taiun th{font-size:12px;padding:8px 2px}
  .mk-taiun td{padding:8px 2px}
  .mk-next{padding:28px 18px;margin-top:18px}
  .mk-next h4{font-size:19px}
  .mk-next .btns{flex-direction:column}
  .mk-stars,.mk-stars--jusei{grid-template-columns:1fr;gap:14px}
  .mk-modal__in{padding:30px 20px 24px}
}