body{margin:0}*{margin:0;padding:0;box-sizing:border-box}.viewer-container{font-family:Shippori Mincho,Times New Roman,serif;background:#2c3e50;color:#fff;overflow:hidden;height:100vh;height:100dvh;display:flex;flex-direction:column}.loading{display:flex;align-items:center;justify-content:center;height:100vh;font-size:1.2em;color:#95b3d7}.header{background:#1e3a5f;padding:6px 15px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #00000080;z-index:1000;flex-shrink:0}.header h1{font-size:.85em;font-weight:300}.controls{display:flex;gap:8px;align-items:center}.slide-counter{background:#ffffff1a;padding:3px 10px;border-radius:12px;font-size:.75em;white-space:nowrap}.slide-viewer{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:10px;overflow:hidden;touch-action:pan-y pinch-zoom}.slide{width:100%;height:100%;background:#e8eef4;border-radius:8px;box-shadow:0 10px 40px #00000080;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.slide.active{display:flex}.slide.slide-forward{animation:slideInRight .35s ease-out}.slide.slide-backward{animation:slideInLeft .35s ease-out}@keyframes slideInRight{0%{opacity:0;transform:translate(-50%,-50%) translate(60px)}to{opacity:1;transform:translate(-50%,-50%) translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50%,-50%) translate(-60px)}to{opacity:1;transform:translate(-50%,-50%) translate(0)}}.slide-title{align-items:center;justify-content:center;padding:20px}.title-box{background:#1e3a5f;padding:30px 40px;border-radius:12px;box-shadow:5px 5px 20px #0003;text-align:center;max-width:100%}.title-box h1{color:#e8eef4;font-size:clamp(20px,5vw,56px);margin-bottom:15px;font-weight:700;line-height:1.3}.title-box .subtitle{color:#95b3d7;font-size:clamp(14px,3vw,28px);font-style:italic}.title-box .subtitle-note{margin-top:15px;font-size:1.2em;color:#aab}.slide-content{padding:15px;overflow-y:auto}.slide-content .container{display:flex;flex-direction:column;width:100%;height:100%}.slide-content .header-bar{background:#1e3a5f;padding:6px 20px;border-radius:8px;margin-bottom:15px;flex-shrink:0}.slide-content .header-bar h1{color:#e8eef4;font-size:clamp(14px,2.5vw,20px);font-weight:700}.slide-content .content-box{background:#fff;padding:10px;border-radius:8px;flex:1;box-shadow:3px 3px 10px #0000001a;overflow-y:auto;display:flex;flex-direction:column}.slide.advice-collapsed .content-box{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.slide.advice-collapsed .main-info{margin:0;padding:0;border:none;width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.slide.advice-collapsed .poet{font-size:clamp(22px,4.4vw,35px);margin-bottom:14px}.slide.advice-collapsed .poem{font-size:clamp(26px,5.2vw,42px);line-height:1.8}.slide.advice-collapsed .poem-image{max-width:clamp(140px,25vw,240px);max-height:clamp(140px,25vw,240px)}.slide.advice-collapsed .hexagram{font-size:clamp(22px,4.4vw,35px)}.hint-text{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:clamp(11px,1.6vw,13px);color:#5b6b7a;background:#f4f8fbe6;padding:4px 10px;border-radius:12px;border:1px solid #D7E1EA;pointer-events:none;white-space:nowrap}.main-info{margin-bottom:15px}.poet{color:#b84c3a;font-size:clamp(16px,3vw,24px);margin-bottom:10px;font-weight:700}.poem{color:#2c2c2c;font-size:clamp(14px,2.5vw,20px);margin-bottom:15px;line-height:1.6}.poem-image-wrapper{display:flex;justify-content:center;margin-bottom:15px;padding-bottom:15px;border-bottom:1px dashed #ddd}.poem-image{max-width:180px;max-height:180px;width:auto;height:auto;border-radius:8px;box-shadow:2px 2px 10px #00000026}.hexagram-box{background:linear-gradient(135deg,#2c3e50,#3a5169);padding:12px 18px;border-radius:6px;margin-bottom:15px;border-left:4px solid #C9A84C}.hexagram{color:#c9a84c;font-size:clamp(16px,3vw,26px);font-weight:700}.reason{color:#4a4a4a;font-size:clamp(14px,2.5vw,20px);line-height:1.5;margin-bottom:15px}.advice-section{margin-top:5px;padding-top:15px;border-top:2px solid #E8EEF4}.advice-section h3{color:#1e3a5f;font-size:clamp(14px,2.5vw,18px);margin-bottom:10px;font-weight:700;display:flex;align-items:center}.advice-section h3:before{content:"☰";margin-right:8px;font-size:1.2em;color:#c9a84c}.advice-content{color:#2c3e50;font-size:clamp(13px,2.2vw,17px);line-height:1.7;background:#f4f8fb;padding:15px;border-radius:8px;border-left:5px solid #C9A84C}.advice-content h4{color:#1e3a5f;font-size:1.05em;font-weight:700;margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid #D7E1EA}.advice-content h4:first-child{margin-top:0}.advice-content p{margin:6px 0;line-height:1.7}.advice-content strong{color:#b84c3a}.nav-button{position:absolute;top:50%;transform:translateY(-50%);background:#ffffffe6;border:none;width:45px;height:45px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#1e3a5f;box-shadow:0 4px 15px #0000004d;transition:all .3s;z-index:100;-webkit-tap-highlight-color:transparent}.nav-button:active{transform:translateY(-50%) scale(.9);background:#1e3a5f;color:#fff}.nav-button:disabled{opacity:.3;cursor:not-allowed}.prev-button{left:10px}.next-button{right:10px}.thumbnail-button{background:#b84c3a;color:#fff;border:none;padding:4px 12px;border-radius:12px;cursor:pointer;font-size:.75em;font-weight:600;transition:all .3s;-webkit-tap-highlight-color:transparent}.thumbnail-button:active{transform:scale(.95);background:#8b3a2e}.thumbnail-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#1e3a5feb;z-index:2000;overflow-y:auto;-webkit-overflow-scrolling:touch}.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px;padding:70px 15px 20px}.thumbnail-item{background:#fff;border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .3s;box-shadow:0 4px 15px #0000004d;-webkit-tap-highlight-color:transparent}.thumbnail-item:active{transform:scale(.95)}.thumbnail-preview{background:#e8eef4;height:90px;display:flex;align-items:center;justify-content:center;font-size:.75em;color:#1e3a5f;padding:10px;text-align:center;font-weight:700;line-height:1.3}.thumbnail-label{padding:8px;text-align:center;background:#1e3a5f;color:#fff;font-size:.8em}.close-modal{position:fixed;top:15px;right:15px;background:#fff;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;color:#1e3a5f;box-shadow:0 4px 15px #0000004d;z-index:2001;-webkit-tap-highlight-color:transparent}.close-modal:active{transform:scale(.9)}.shortcuts{display:none}@media(min-width:1024px){.header{padding:15px 30px}.header h1{font-size:1.3em}.slide-counter{padding:5px 15px;font-size:.9em}.slide-viewer{padding:0}.slide{height:calc(100% - 40px);width:calc(100% - 40px);max-width:none!important;position:absolute!important;top:20px;left:20px;transform:none!important;border-radius:8px}.slide.slide-forward{animation:slideInRightDesktop .35s ease-out}.slide.slide-backward{animation:slideInLeftDesktop .35s ease-out}@keyframes slideInRightDesktop{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeftDesktop{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:translate(0)}}.slide-content{padding:20px;overflow-y:hidden;height:100%;display:flex;flex-direction:column}.slide-content .container{display:grid;grid-template-columns:1fr;height:100%;overflow:hidden}.slide-content .header-bar{padding:10px 35px;border-radius:10px;margin-bottom:20px;flex-shrink:0}.slide-content .content-box{padding:25px;border-radius:10px;display:grid;grid-template-columns:3fr 7fr;gap:30px;height:100%;overflow:hidden}.slide.advice-collapsed .content-box{display:flex;grid-template-columns:none}.main-info{padding-right:20px;border-right:1px dashed #ddd;border-bottom:none;margin-bottom:0;overflow-y:auto}.advice-section{padding-top:0;margin-top:0;border-top:none;overflow-y:auto;padding-right:5px;display:flex;flex-direction:column}.advice-content{flex:1}.title-box{padding:60px 80px;border-radius:16px}.nav-button{width:60px;height:60px;font-size:24px}.nav-button:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.prev-button{left:30px}.next-button{right:30px}.shortcuts{display:block;position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#000000b3;padding:10px 20px;border-radius:20px;font-size:.85em;opacity:.6;transition:opacity .3s}.shortcuts:hover{opacity:1}.thumbnail-button{padding:8px 20px;border-radius:20px;font-size:.9em}.thumbnail-button:hover{background:#8b3a2e;transform:scale(1.05)}.thumbnail-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;padding:80px 40px 40px}.thumbnail-item:hover{transform:scale(1.05)}.thumbnail-preview{height:120px;font-size:.7em}.close-modal{top:20px;right:20px;width:50px;height:50px;font-size:24px}.close-modal:hover{background:#f0f0f0}}