/* ============================================================
   中華民國曆轉換 — shared stylesheet
   Utilitarian calculator-site layout: flat colours, system
   fonts, boxed forms, dense data tables, right sidebar.
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,"Microsoft JhengHei","PingFang TC","Heiti TC",sans-serif;
  font-size:15px;line-height:1.55;color:#111;background:#fff;
}
a{color:#0b57a4;text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- top bar ---------- */
.topbar{background:#16437e}
.topbar .inner{max-width:1120px;margin:0 auto;padding:0 14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font-size:25px;font-weight:bold;color:#fff;padding:11px 0;letter-spacing:.5px}
.brand span{color:#8ec63f}
.brand:hover{text-decoration:none}
.topnav{display:flex;flex-wrap:wrap}
.topnav a{color:#fff;padding:15px 15px;font-size:15px;display:block}
.topnav a:hover{background:#1d5296;text-decoration:none}
.topnav a.active{background:#6aa84f}
.topnav a.lang{background:#0d2f5c;font-size:13px;border-left:1px solid #2a5a9c}
.topnav a.lang:hover{background:#1d5296}

/* ---------- layout ---------- */
.page{max-width:1120px;margin:0 auto;padding:0 14px 10px;display:flex;gap:24px;align-items:flex-start}
.main{flex:1 1 auto;min-width:0}
.side{flex:0 0 300px}
@media(max-width:880px){
  .page{flex-direction:column;gap:0;align-items:stretch}
  .main,.side{flex:1 1 auto;width:100%;max-width:100%}
  /* wide content must scroll inside itself, never the page body */
  table.data{min-width:520px}
  .tablescroll{overflow-x:auto}
}

.crumb{font-size:13px;color:#666;padding:9px 0 2px}
.crumb a{color:#0b57a4}
h1{font-size:26px;color:#16437e;margin:6px 0 8px}
h2{font-size:19px;color:#16437e;margin:24px 0 6px;border-bottom:1px solid #ddd;padding-bottom:4px}
h3{font-size:15px;margin:16px 0 2px;color:#222}
p{margin:8px 0}
.lead{margin:4px 0 14px}
.small{font-size:13px;color:#666}

/* ---------- form box ---------- */
.formbar{background:#4a7ab5;color:#fff;padding:7px 12px;font-size:14px;text-align:center}
.formbox{border:1px solid #ccc;border-top:none;background:#eee;padding:14px}
table.inputs{border-collapse:collapse;max-width:100%}
table.inputs th{font-weight:bold;font-size:13px;padding:1px 5px;text-align:center;color:#444}
table.inputs td{padding:3px 3px}
td.lbl{font-weight:bold;text-align:right;padding-right:9px;white-space:nowrap}
input[type=number],input[type=text],select{
  border:1px solid #7a7a7a;padding:5px 6px;font-size:15px;font-family:inherit;background:#fff;color:#000
}
input[type=number]{width:76px}
input[type=number].yr{width:88px}
.unit{color:#444;padding:0 2px}
.btnrow{margin-top:12px}
.btn{border:none;padding:9px 24px;font-size:16px;color:#fff;background:#4c8c2b;cursor:pointer;font-family:inherit}
.btn:hover{background:#3f7522}
.btn.grey{background:#9b9b9b;margin-left:6px}
.btn.grey:hover{background:#888}
.chk{font-size:14px;margin-top:9px;color:#333}
.swap{color:#0b57a4;cursor:pointer;font-size:16px;user-select:none}

/* tabs (lunar page) */
.tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:0}
.tabs button{
  border:1px solid #ccc;border-bottom:none;background:#e4e4e4;color:#222;
  padding:8px 18px;font-size:15px;font-family:inherit;cursor:pointer;margin-right:3px
}
.tabs button.active{background:#16437e;color:#fff;border-color:#16437e}
.pane{display:none}.pane.active{display:block}

/* ---------- results ---------- */
.resultbox{
  border:1px solid #ccc;border-top:3px solid #4c8c2b;background:#f7f7f7;
  padding:14px;margin:16px 0;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap
}
.res-left{flex:1 1 300px;min-width:0}
.res-right{flex:0 0 auto;text-align:center;padding-top:2px}
.bigres{font-size:21px;font-weight:bold;color:#16437e;margin:0 0 10px}
table.res{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid #e2e2e2}
table.res th{text-align:left;font-weight:normal;color:#555;padding:6px 9px;border-bottom:1px solid #e8e8e8;width:40%;white-space:nowrap;background:#fbfbfb}
table.res td{padding:6px 9px;border-bottom:1px solid #e8e8e8;font-weight:bold}
table.res tr:last-child th,table.res tr:last-child td{border-bottom:none}

/* red chop — sits beside the results, not adrift in whitespace */
.chop{
  display:inline-block;border:2px solid #b3271e;color:#b3271e;background:#fff;
  padding:11px 8px;writing-mode:vertical-rl;text-orientation:upright;
  font-size:15px;letter-spacing:.12em;line-height:1.45;font-weight:bold;white-space:nowrap
}
.chop-cap{font-size:12px;color:#777;margin-top:6px}
.err{color:#b3271e;font-size:14px;margin-top:8px}

/* ---------- data tables ---------- */
.scrollbox{max-height:360px;overflow:auto;border:1px solid #ccc}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{background:#16437e;color:#fff;padding:6px 8px;text-align:center;position:sticky;top:0;white-space:nowrap}
table.data td{padding:5px 8px;border-bottom:1px solid #e0e0e0;text-align:center;white-space:nowrap}
table.data tbody tr:nth-child(even) td{background:#f6f6f6}
table.data tr.now td{background:#fff3cd;font-weight:bold}
table.data tr.past td{color:#999}
table.data td.left{text-align:left;white-space:normal}
.tag{display:inline-block;font-size:11px;padding:1px 6px;margin-left:5px;border:1px solid #bbb;background:#fff;color:#555}
.tag.makeup{border-color:#4c8c2b;color:#3f7522}
.tag.lunar{border-color:#b3271e;color:#b3271e}

/* stats strip */
.stats{display:flex;gap:12px;margin:14px 0;flex-wrap:wrap}
.stat{flex:1 1 120px;border:1px solid #ccc;background:#f7f7f7;padding:10px;text-align:center}
.stat .n{font-size:22px;font-weight:bold;color:#16437e}
.stat .t{font-size:12px;color:#666}

/* countdown */
.countbox{border:1px solid #ccc;border-top:3px solid #b3271e;background:#f7f7f7;padding:12px;text-align:center;margin:14px 0}
.countbox .lbl{font-size:13px;color:#666}
.countbox .big{font-size:30px;font-weight:bold;color:#b3271e;line-height:1.2}
.countbox .nm{font-size:15px;font-weight:bold}

/* year tabs */
.yeartabs{margin:14px 0 0}
.yeartabs button{border:1px solid #ccc;background:#e4e4e4;color:#222;padding:7px 16px;font-size:14px;font-family:inherit;cursor:pointer;margin-right:4px}
.yeartabs button.active{background:#16437e;color:#fff;border-color:#16437e}

/* ---------- related links ---------- */
.related{border:1px solid #ccc;margin:22px 0 0;padding:10px 12px}
.related .rt{font-weight:bold;margin-bottom:6px;font-size:14px}
.related a{display:inline-block;background:#16437e;color:#fff;padding:6px 13px;margin:3px 5px 3px 0;font-size:14px}
.related a:hover{background:#1d5296;text-decoration:none}

/* ---------- sidebar ---------- */
.panel{border:1px solid #ccc;margin-bottom:16px}
.panel .ph{background:#16437e;color:#fff;padding:7px 10px;font-weight:bold;font-size:15px}
.panel .pb{padding:10px 12px}
.linkcols{display:flex;flex-wrap:wrap}
.linkcols a{flex:1 1 45%;padding:4px 2px;font-size:14px}
dl.quick{margin:0;font-size:14px}
dl.quick dt{color:#666;font-size:12px;margin-top:7px}
dl.quick dt:first-child{margin-top:0}
dl.quick dd{margin:0;font-weight:bold}

/* ---------- ads ---------- */
.adslot{margin:14px 0;min-height:90px;display:flex;align-items:center;justify-content:center;border:1px dashed #ccc;background:#fafafa;color:#aaa;font-size:12px}
.adslot ins{display:block;width:100%}

/* ---------- footer ---------- */
.footer{background:#16437e;color:#c6d3e4;margin-top:26px;padding:15px 0;font-size:13px}
.footer .inner{max-width:1120px;margin:0 auto;padding:0 14px;text-align:center}
.footer a{color:#fff;margin:0 7px}

/* ============================================================
   Mobile form overrides — MUST stay at the end of this file.
   The base input widths are declared later than the layout
   @media block above, so equal-specificity overrides only win
   if they come last. Keeps converter rows (especially
   japan.html, which adds an era <select>) inside a 375px
   viewport instead of forcing the page to scroll sideways.
   ============================================================ */
@media(max-width:880px){
  input[type=number]{width:56px}
  input[type=number].yr{width:68px}
  select{padding:5px 4px;max-width:110px}
  table.inputs td{padding:2px}
  table.inputs th{padding:1px 2px}
  td.lbl{padding-right:5px}
  #ghint{white-space:normal}
}