@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap";:root{--ink:#191713;--muted:#746f65;--canvas:#f4f0e7;--paper:#fffdf8;--line:#dcd5c8;--calendar-line:#e4b8ad;--red:#b72925;--red-soft:#f8e6df;--green:#276b4f;--green-soft:#e2efe8;--black:#191713;--shadow:0 20px 60px #382d1914;--sans:"DM Sans", system-ui, sans-serif;--display:"Manrope", "DM Sans", system-ui, sans-serif;color:var(--ink);background:radial-gradient(circle at 92% 0%, #b7292514, transparent 28%), var(--canvas);font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}::selection{color:#fff;background:var(--red)}main{width:min(100% - 24px,760px);margin:0 auto;padding:22px 0 38px}.date-nav{justify-content:center;gap:8px;margin-bottom:14px;display:flex}.date-nav button,.date-nav label{box-sizing:border-box;background:#fffdf8;border:1px solid #d9d1c2;border-radius:7px;height:40px}.date-nav button{color:#191713;cursor:pointer;min-width:40px;padding:0 12px;font-size:16px;font-weight:800}.date-nav button:hover{border-color:#b3211c}.date-nav label{align-items:center;padding:0 10px;display:flex;position:relative}.date-nav label span{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}.date-nav input{color:#191713;background:0 0;border:0;outline:0;min-width:0;font-size:16px;font-weight:700}.date-nav .today{color:#fff9e9;background:#b3211c;border-color:#b3211c}.calendar-page{background:#fff;border:2px solid #d6322d;overflow:hidden;box-shadow:0 24px 70px #3b2c1824}.calendar-header{text-align:center;border-bottom:1px solid #edc2ba;padding:16px 30px 15px;position:relative}.calendar-header:after{content:"發";z-index:0;color:#b729250b;font-size:150px;font-weight:900;position:absolute;top:40px;left:50%;transform:translate(-50%)}.calendar-header>*{z-index:1;position:relative}.calendar-brand{color:#b3211c;letter-spacing:.08em;justify-content:center;align-items:center;gap:8px;margin-bottom:10px;font-size:20px;font-weight:900;display:flex}.tile{color:#fff;background:#1d6849;border-radius:4px;place-items:center;width:25px;height:25px;font-size:14px;display:grid}.date-title{color:#e22820;letter-spacing:.02em;margin:0;font-size:clamp(43px,12vw,70px);font-weight:400;line-height:1}.date-title strong{font-family:var(--display);font-size:1.12em;font-weight:700}.lunar{color:#4b914d;margin:8px 0 0;font-size:24px;font-weight:700}.day-pillar{color:#b3211c;margin:4px 0 0;font-size:24px;font-weight:800}.calendar-content{padding:4px 30px 8px}.calendar-row{border-bottom:1px solid #efd8d3;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:20px;min-height:66px;display:grid}.calendar-row h2{color:#d72b25;text-align:center;border:2px solid #43a14f;border-radius:5px;justify-self:start;margin:0;font-size:24px;line-height:1.15;display:grid}.calendar-row h2 small{color:#fff;letter-spacing:.08em;background:#43a14f;padding:2px 6px;font-size:11px}.seat,.colors{align-items:center;gap:15px;display:flex}.seat strong{color:#d72b25;white-space:nowrap;font-size:34px}.seat strong span{color:#8e625d;font-size:16px;font-weight:700;line-height:1}.colors strong{color:#be6d29;font-size:40px;line-height:1}.chart-row{padding:10px 0}.twelve-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;display:grid}.zodiac-grid>div{justify-items:center;gap:3px;display:grid}.animal-dot{color:#fff;background:#318b50;border-radius:50%;place-items:center;width:28px;height:28px;font-size:14px;font-weight:900;display:grid}.animal-dot.lucky,.calendar-key i.lucky{background:#df332b}.animal-dot.caution,.calendar-key i.caution{background:#181818}.zodiac-grid small{color:#bb3a32;font-size:14px;font-weight:800}.hours-grid>div{color:#318b50;justify-items:center;gap:1px;padding-bottom:12px;display:grid;position:relative}.hours-grid>div.lucky{color:#df332b}.hours-grid>div.caution{color:#181818}.hours-grid strong{font-size:19px}.hours-grid span{font-size:14px}.hours-grid i{border-bottom:9px solid;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;bottom:0}.years-row{border-bottom:0;align-items:start}.years-row h2{margin-top:5px}.year-column{color:#fff;background:#318b50;border-radius:2px;justify-items:center;min-width:0;padding-bottom:3px;display:grid;overflow:hidden}.years-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;width:100%}.year-column.lucky{background:#df332b}.year-column.caution{background:#181818}.year-column span{text-align:center;background:#ffffff1f;border-bottom:1px solid #ffffff59;width:100%;padding:3px 0;font-size:16px;font-weight:900}.year-column strong{font-family:var(--display);padding:2px 0;font-size:15px;line-height:1.12}.calendar-key{color:#725c58;background:#fff9f3;border-top:1px solid #efd8d3;justify-content:center;gap:24px;padding:7px 18px;font-size:15px;font-weight:700;display:flex}.calendar-key span{align-items:center;gap:5px;display:inline-flex}.calendar-key i{background:#318b50;border-radius:50%;width:8px;height:8px}.disclaimer{color:#776e65;text-align:center;margin:13px auto 0;font-size:14px;line-height:1.5}@media (width<=540px){main{width:min(100% - 12px,760px);padding-top:10px}.date-nav{gap:5px;margin-bottom:8px}.date-nav button{min-width:36px;padding:0 9px}.date-nav label{flex:1;min-width:0}.date-nav input{width:100%}.calendar-page{border-width:1px}.calendar-header{padding:14px 12px 12px}.calendar-brand{margin-bottom:8px}.date-title{font-size:clamp(40px,15vw,60px)}.lunar{font-size:18px;line-height:1.5}.day-pillar{font-size:17px}.calendar-content{padding:3px 9px 7px}.calendar-row{grid-template-columns:51px minmax(0,1fr);gap:6px;min-height:52px}.calendar-row h2{font-size:18px}.calendar-row h2 small{padding-inline:3px;font-size:7px}.seat,.colors{gap:9px}.seat strong{font-size:18px}.colors strong{font-size:13px}.chart-row{padding:7px 0}.twelve-grid{gap:1px}.animal-dot{width:clamp(17px,5.8vw,22px);height:clamp(17px,5.8vw,22px);font-size:10px}.zodiac-grid small{font-size:9px}.hours-grid strong{font-size:13px}.hours-grid span{font-size:9px}.hours-grid i{border-bottom-width:7px;border-left-width:4px;border-right-width:4px}.year-column span,.year-column strong{font-size:10px}.years-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:1px}.calendar-key{gap:15px}}@media (width<=350px){.date-nav .today{display:none}.calendar-row{grid-template-columns:45px minmax(0,1fr)}.animal-dot{width:18px;height:18px}}