*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}a{color:inherit;text-decoration:none}ul,ol{list-style:none}button{cursor:pointer;background:none;border:none}:root{--color-bg: #f0f6ff;--color-surface: #ffffff;--color-surface-variant: #ddeeff;--color-border: #c0d8f0;--color-primary: #0d1a2b;--color-primary-light: #1e3a5f;--color-accent: #2979c2;--color-text: #0d1a2b;--color-text-secondary: #3d5a7a;--color-text-hint: #7a9ab8;--toolbar-height: 56px;--tabbar-height: 48px;--header-total: calc(var(--toolbar-height) + var(--tabbar-height));--toolbar-bg: #1a3a5c;--toolbar-text: #ffffff;--font-family: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-md: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--line-height-body: 1.8;--font-scale: 1;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--max-width: 640px;--shadow-sm: 0 1px 3px rgba(0,0,0,.1);--shadow-md: 0 2px 8px rgba(41,121,194,.18)}[data-theme=dark]{--color-bg: #080f18;--color-surface: #0f1e30;--color-surface-variant: #162840;--color-border: #1e3850;--color-primary: #e8f2ff;--color-primary-light: #a8c8f0;--color-accent: #5ba3e8;--color-text: #e8f2ff;--color-text-secondary: #8ab4d8;--color-text-hint: #4a7098;--toolbar-bg: #0a1828;--toolbar-text: #e8f2ff}html,body{height:100%;font-family:var(--font-family);font-size:calc(var(--font-size-base) * var(--font-scale));background-color:var(--color-bg);color:var(--color-text)}#root{height:100%;display:flex;flex-direction:column}.page{flex:1;display:flex;flex-direction:column;max-width:var(--max-width);width:100%;margin:0 auto}.page-content{flex:1;padding:var(--space-md);padding-top:calc(var(--header-total) + var(--space-md));overflow-y:auto}.page--no-tabbar .page-content{padding-top:calc(var(--toolbar-height) + var(--space-md))}.divider{height:1px;background:var(--color-border);margin:var(--space-md) 0}.home-section-title{font-size:var(--font-size-md);font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-md)}.sutra-tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);list-style:none;padding:0;margin:0}.sutra-tile{width:100%;display:flex;flex-direction:column;background:none;border:none;cursor:pointer;text-align:left;padding:0}.sutra-tile__cover{position:relative;width:100%;aspect-ratio:3 / 4;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:box-shadow .15s,background .15s;overflow:hidden;padding:8px 4px}.sutra-tile:hover .sutra-tile__cover{background:var(--color-surface-variant);box-shadow:var(--shadow-md)}.sutra-tile__cover-num{position:absolute;top:6px;left:8px;font-size:.68rem;font-weight:700;color:var(--color-text-hint);line-height:1}.sutra-tile__cover-symbol{font-size:2rem;line-height:1;letter-spacing:0}.sutra-tile__cover-title{font-size:.72rem;font-weight:600;color:var(--color-text-secondary);text-align:center;line-height:1.4;word-break:keep-all;padding:0 4px}.sutra-tile__info{padding:var(--space-xs) 2px 0;display:flex;flex-direction:column;gap:2px}.sutra-tile__title{font-size:.8rem;font-weight:600;color:var(--color-text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sutra-tile__category{font-size:.68rem;color:var(--color-text-hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tabbar{position:fixed;top:var(--toolbar-height);left:50%;transform:translate(-50%);width:100%;max-width:var(--max-width);height:var(--tabbar-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;z-index:99;box-shadow:0 1px 4px #00000014}.tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;cursor:pointer;color:var(--color-text-hint);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;padding:var(--space-xs) 0}.tabbar-item:hover{color:var(--color-text-secondary);background:var(--color-surface-variant)}.tabbar-item--active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.tabbar-label{font-size:.875rem;font-weight:500;letter-spacing:.02em}.toolbar{position:fixed;top:0;left:0;right:0;height:var(--toolbar-height);background:var(--toolbar-bg);color:var(--toolbar-text);display:flex;align-items:center;padding:0 var(--space-sm);z-index:100;box-shadow:var(--shadow-sm);max-width:var(--max-width);margin:0 auto}.toolbar__left,.toolbar__right{width:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toolbar__right{justify-content:flex-end}.toolbar__title{flex:1;text-align:center;font-size:var(--font-size-md);font-weight:600;letter-spacing:-.01em;line-height:1.3}.toolbar__subtitle{display:block;font-size:.7rem;font-weight:400;opacity:.75;letter-spacing:0}.toolbar-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--toolbar-text);font-size:1.25rem;transition:background .15s}.toolbar-btn:hover{background:#ffffff1a}.toolbar-btn--menu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;height:40px;padding:0}.hamburger-bar{display:block;width:18px;height:2px;background:currentColor;border-radius:2px}.home-section{margin-bottom:var(--space-xl)}.home-section-title{font-size:var(--font-size-md);font-weight:700;color:var(--color-text);margin:0 0 var(--space-md) 0;padding:0 var(--space-md)}.list-content{padding-top:calc(var(--toolbar-height) + var(--space-sm))}.search-input{display:block;width:100%;padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm);border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-base)}.tab-scroll{display:flex;gap:var(--space-xs);overflow-x:auto;padding-bottom:var(--space-sm);margin-bottom:var(--space-md);scrollbar-width:none}.tab-scroll::-webkit-scrollbar{display:none}.tab-btn{flex-shrink:0;padding:var(--space-xs) var(--space-md);border:1px solid var(--color-border);border-radius:20px;font-size:var(--font-size-sm);color:var(--color-text-secondary);background:var(--color-surface);white-space:nowrap;transition:all .15s}.tab-btn--active{background:var(--color-primary);color:var(--color-bg);border-color:var(--color-primary)}.sutra-list{display:flex;flex-direction:column;gap:var(--space-xs)}.sutra-card{width:100%;padding:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;text-align:left;transition:background .15s}.sutra-card:hover{background:var(--color-surface-variant)}.sutra-card__title{font-size:var(--font-size-md);font-weight:600;color:var(--color-text);margin-bottom:2px}.sutra-card__hanja{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:4px}.sutra-card__category{font-size:var(--font-size-sm);color:var(--color-text-hint)}.sutra-card__stats{display:flex;gap:var(--space-sm);margin-top:4px}.sutra-card__views{font-size:.75rem;color:var(--color-accent)}.sutra-card__comments{font-size:.75rem;color:var(--color-text-secondary)}.comment-box{margin-top:var(--space-md)}.comment-toggle{background:none;border:1px solid var(--color-border);border-radius:6px;padding:var(--space-xs) var(--space-sm);color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;width:100%;text-align:left}.comment-toggle:hover{background:var(--color-surface-variant)}.comment-body{margin-top:var(--space-sm);border:1px solid var(--color-border);border-radius:8px;padding:var(--space-md);background:var(--color-surface)}.comment-empty{color:var(--color-text-hint);font-size:var(--font-size-sm);text-align:center;padding:var(--space-sm) 0}.comment-list{list-style:none;padding:0;margin:0 0 var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}.comment-item{border-bottom:1px solid var(--color-border);padding-bottom:var(--space-sm)}.comment-meta{display:flex;gap:var(--space-sm);align-items:baseline;margin-bottom:var(--space-xs)}.comment-author{font-weight:600;font-size:var(--font-size-sm);color:var(--color-text)}.comment-date{font-size:.75rem;color:var(--color-text-hint)}.comment-content{font-size:var(--font-size-sm);color:var(--color-text);line-height:var(--line-height-body);margin:0 0 var(--space-xs)}.comment-like{background:none;border:none;color:var(--color-text-hint);font-size:.75rem;cursor:pointer;padding:0}.comment-like:hover{color:var(--color-accent)}.comment-form{display:flex;flex-direction:column;gap:var(--space-sm)}.comment-input{border:1px solid var(--color-border);border-radius:6px;padding:var(--space-sm);font-size:var(--font-size-sm);background:var(--color-bg);color:var(--color-text);font-family:var(--font-family)}.comment-input:focus{outline:2px solid var(--color-accent);border-color:transparent}.comment-input--text{resize:vertical}.comment-submit{align-self:flex-end;background:var(--color-accent);color:#fff;border:none;border-radius:6px;padding:var(--space-xs) var(--space-md);font-size:var(--font-size-sm);cursor:pointer}.comment-submit:disabled{opacity:.4;cursor:not-allowed}.tts-player{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max-width);background:var(--toolbar-bg);color:var(--toolbar-text);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);box-shadow:0 -2px 8px #0003;z-index:100;border-top:1px solid rgba(255,255,255,.08)}.tts-player--active{background:var(--color-accent)}.tts-btn{background:none;border:none;color:inherit;cursor:pointer;font-size:1rem;padding:var(--space-xs) var(--space-sm);border-radius:4px;opacity:.9;transition:opacity .15s;white-space:nowrap}.tts-btn:hover{opacity:1}.tts-btn:disabled{opacity:.3;cursor:not-allowed}.tts-btn--play{flex:1;font-size:var(--font-size-sm);text-align:center}.tts-info{font-size:var(--font-size-sm);opacity:.7;min-width:36px;text-align:right}.glossary-term{position:relative;color:var(--color-primary);border-bottom:1px dotted var(--color-primary);cursor:pointer;display:inline}.glossary-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);z-index:100;background:var(--color-text);color:var(--color-bg);border-radius:8px;padding:8px 12px;min-width:180px;max-width:260px;display:flex;flex-direction:column;gap:4px;font-size:var(--font-size-sm);line-height:1.5;box-shadow:0 4px 12px #0003;pointer-events:none;white-space:normal;word-break:keep-all}.glossary-tooltip strong{font-weight:700;font-size:var(--font-size-sm)}.page--with-tts .page-content{padding-bottom:80px}.detail-header{text-align:center;padding:var(--space-lg) 0 var(--space-md)}.detail-title{font-size:calc(var(--font-size-xl) * var(--font-scale));font-weight:700;color:var(--color-text);margin:0 0 var(--space-xs)}.detail-hanja{font-size:calc(var(--font-size-md) * var(--font-scale));color:var(--color-text-secondary);margin:0 0 var(--space-xs);font-style:italic}.detail-category{font-size:var(--font-size-sm);color:var(--color-text-hint);margin:0}.divider{height:1px;background:var(--color-border);margin:var(--space-lg) 0}.para-list{display:flex;flex-direction:column;gap:var(--space-lg)}.para-block{padding:var(--space-md);border-radius:10px;background:var(--color-surface);border:1px solid var(--color-border);transition:border-color .2s,box-shadow .2s}.para-block--active{border-color:var(--color-accent);box-shadow:0 0 0 2px #8b69142e}.para-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.para-section{font-size:var(--font-size-sm);font-weight:700;color:var(--color-accent);margin:0;letter-spacing:.04em}.para-tts-btn{background:none;border:1px solid var(--color-border);border-radius:4px;padding:2px 8px;font-size:.7rem;color:var(--color-text-secondary);cursor:pointer}.para-tts-btn:hover{background:var(--color-surface-variant);color:var(--color-accent)}.para-content{font-size:calc(var(--font-size-base) * var(--font-scale));color:var(--color-text);line-height:var(--line-height-body);white-space:pre-line}.sutra-comment-section{margin-top:var(--space-lg)}.sutra-comment-title{font-size:var(--font-size-md);color:var(--color-text);margin:0 0 var(--space-sm)}.empty-msg{text-align:center;color:var(--color-text-hint);padding:var(--space-xl)}.audio-now{margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-accent);color:#fff;border-radius:8px}.audio-now__label{font-size:var(--font-size-sm);font-weight:600;margin:0 0 2px}.audio-now__sub{font-size:.78rem;opacity:.85;margin:0;display:flex;align-items:center;gap:var(--space-sm)}.audio-stop-btn{background:#fff3;border:none;color:#fff;border-radius:4px;padding:2px var(--space-xs);font-size:.75rem;cursor:pointer;white-space:nowrap}.audio-stop-btn:hover{background:#ffffff59}.sutra-tile-wrap{position:relative;width:100%}.sutra-tile-wrap--active .sutra-tile__cover{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent)}.audio-tile-play-btn{position:absolute;bottom:28px;right:4px;width:28px;height:28px;border-radius:50%;background:var(--color-accent);color:#fff;border:none;font-size:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);transition:background .15s}.audio-tile-play-btn:hover{background:var(--color-primary)}.tts-spacer{height:16px}.settings-section{padding:var(--space-md) 0}.settings-section-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-md)}.option-group{display:flex;gap:var(--space-sm)}.option-btn{flex:1;padding:var(--space-sm) 0;border:1px solid var(--color-border);border-radius:8px;font-size:var(--font-size-base);color:var(--color-text);background:var(--color-surface);transition:all .15s}.option-btn--active{background:var(--color-primary);color:var(--color-bg);border-color:var(--color-primary)}.tts-slider{width:100%;accent-color:var(--color-primary);margin-bottom:var(--space-xs)}.tts-slider-labels{display:flex;justify-content:space-between;font-size:var(--font-size-sm);color:var(--color-text-hint)}.about-link{width:100%;padding:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;text-align:left;font-size:var(--font-size-base);color:var(--color-text);display:flex;justify-content:space-between;align-items:center}.about-link:after{content:"›";color:var(--color-text-hint)}.settings-user-email{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.about-section{padding:var(--space-md) 0}.about-hero{display:flex;flex-direction:column;align-items:center;padding:var(--space-xl) 0}.about-app-icon{width:80px;height:80px;border-radius:18px;background:var(--color-primary);color:#f5e6c8;font-size:1.75rem;font-weight:700;font-family:Georgia,serif;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md)}.about-app-name{font-size:var(--font-size-lg);font-weight:700;color:var(--color-text);margin-bottom:var(--space-xs)}.about-version{font-size:var(--font-size-sm);color:var(--color-text-hint)}.about-section-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-sm)}.about-list{display:flex;flex-direction:column;gap:var(--space-sm)}.about-list li{font-size:var(--font-size-base);color:var(--color-text);line-height:var(--line-height-body)}.opensource-list{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;overflow:hidden;gap:0}.opensource-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border)}.opensource-item:last-child{border-bottom:none}.opensource-name{font-size:var(--font-size-sm);color:var(--color-text)}.opensource-license{font-size:var(--font-size-sm);color:var(--color-text-hint)}.about-link-text{color:var(--color-primary);text-decoration:none;word-break:break-all}.about-link-text:hover{text-decoration:underline}.bookmark-card{display:flex;align-items:center;gap:var(--space-md)}.bookmark-card__emoji{font-size:1.75rem;flex-shrink:0;width:40px;text-align:center}.bookmark-card__info{flex:1;text-align:left}.bookmark-remove-btn{flex-shrink:0;background:none;border:none;font-size:1.25rem;color:var(--color-primary);cursor:pointer;padding:var(--space-xs);line-height:1}.bookmark-remove-btn:hover{opacity:.7}.login-content{display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--toolbar-height) + var(--space-xl))}.login-form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:var(--space-md)}.login-label{display:flex;flex-direction:column;gap:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:600}.login-input{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-base)}.login-input:focus{outline:none;border-color:var(--color-primary)}.login-error{font-size:var(--font-size-sm);color:#e53935}.login-submit{padding:var(--space-sm) var(--space-md);background:var(--color-primary);color:var(--color-bg);border:none;border-radius:8px;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:opacity .15s}.login-submit:disabled{opacity:.6;cursor:not-allowed}.login-notice{margin-top:var(--space-xl);font-size:var(--font-size-sm);color:var(--color-text-hint);text-align:center;max-width:320px}