*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--header-h: 52px;--divider-w: 6px;--paper: #f4f1ea;--paper-edit: #faf8f2;--paper-card: #fbf9f4;--ink: #211f1b;--ink-soft: #6f6857;--seal: #c8342a;--seal-deep: #a8281f;--line: rgba(33, 31, 27, .14);--line-strong: rgba(33, 31, 27, .5);--gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;--mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif}html,body{height:100%;font-family:var(--gothic);font-size:14px;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.5),transparent 60%),radial-gradient(120% 90% at 0% 100%,rgba(33,31,27,.035),transparent 55%)}.app-header{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 18px;background-color:#fbf9f4d9;-webkit-backdrop-filter:saturate(1.1) blur(2px);backdrop-filter:saturate(1.1) blur(2px);border-bottom:1px solid var(--line);flex-shrink:0}.app-title{display:inline-flex;align-items:center;gap:9px;font-family:var(--mincho);font-size:19px;font-weight:600;letter-spacing:.06em;color:var(--ink)}.app-title:before{content:"縦";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;background-color:var(--seal);color:#fbf9f4;font-size:13px;font-family:var(--mincho);box-shadow:inset 0 0 0 1px #00000014}.app-actions{display:flex;align-items:center;gap:7px}.paper-btn,.print-btn,.image-btn,.help-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 13px;border:1px solid var(--line-strong);border-radius:5px;background-color:transparent;color:var(--ink);font-family:var(--gothic);font-size:13px;letter-spacing:.02em;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.paper-btn:hover,.print-btn:hover,.image-btn:hover,.help-btn:hover{background-color:#211f1b0f;border-color:var(--ink)}.paper-btn:active,.print-btn:active,.image-btn:active,.help-btn:active{background-color:#211f1b1f}.paper-btn[aria-pressed=true],.paper-btn.is-active{background-color:var(--ink);border-color:var(--ink);color:var(--paper)}.print-btn{margin-left:6px}.help-btn{width:32px;padding:0;border-radius:50%;font-weight:700;color:var(--ink-soft)}.scroll-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 16px;border:1px solid var(--seal-deep);border-radius:5px;background-color:var(--seal);color:#fbf9f4;font-family:var(--gothic);font-size:13px;letter-spacing:.04em;cursor:pointer;transition:background-color .15s ease}.scroll-btn:hover{background-color:var(--seal-deep)}.scroll-btn:active{background-color:#7e2e20}.app-main{display:grid;grid-template-columns:var(--editor-w, 1fr) var(--divider-w) 1fr;height:calc(100dvh - var(--header-h));overflow:hidden}.pane-divider{width:var(--divider-w);height:100%;cursor:col-resize;background-color:var(--line);position:relative;transition:background-color .12s ease;touch-action:none}.pane-divider:hover,.pane-divider:focus-visible,.pane-divider.is-dragging{background-color:var(--ink);outline:none}.pane-divider:before{content:"";position:absolute;top:0;right:-4px;bottom:0;left:-4px}.editor{width:100%;height:100%;padding:20px 18px;border:none;background-color:var(--paper-edit);font-family:"SFMono-Regular","Menlo","Consolas",var(--gothic),monospace;font-size:14px;line-height:1.8;color:var(--ink);resize:none;outline:none;caret-color:var(--seal)}.editor::placeholder{color:var(--ink-soft)}.preview-pane{width:100%;height:100%;padding:28px 30px;background-color:var(--paper);color:var(--ink);overflow:auto}.tategaki{min-height:100%}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:none;align-items:center;justify-content:center;padding:24px;background-color:#211f1b6b;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.help-overlay.is-open{display:flex;animation:tatemd-fade .18s ease}.help-card{width:min(560px,100%);max-height:86vh;overflow:auto;background-color:var(--paper-card);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 64px #211f1b47;padding:28px 30px 30px;animation:tatemd-rise .22s ease}.help-card h2{font-family:var(--mincho);font-size:22px;font-weight:600;letter-spacing:.04em;color:var(--ink);border-bottom:2px solid var(--seal);padding-bottom:8px;margin-bottom:6px}.help-card dl{margin-top:14px;display:grid;grid-template-columns:max-content 1fr;gap:10px 16px;align-items:baseline}.help-card dt{font-weight:700;color:var(--seal-deep);font-size:13px;white-space:nowrap}.help-card dd{color:var(--ink);font-size:13px;line-height:1.7}.help-card .help-note{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:12px;line-height:1.7}.help-card kbd{font-family:SFMono-Regular,Menlo,monospace;font-size:11px;background:#211f1b0f;border:1px solid var(--line);border-radius:4px;padding:1px 5px}.help-close{float:right;margin:-6px -8px 0 0;width:30px;height:30px;border:none;border-radius:6px;background:transparent;color:var(--ink-soft);font-size:18px;cursor:pointer}.help-close:hover{background:#211f1b14;color:var(--ink)}.hint-band{position:fixed;left:50%;bottom:22px;transform:translate(-50%);z-index:40;display:none;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:11px 14px 11px 18px;background-color:var(--ink);color:var(--paper);border-radius:10px;box-shadow:0 14px 40px #211f1b57;font-size:13px;letter-spacing:.01em}.hint-band.is-open{display:flex;animation:tatemd-rise .26s ease}.hint-band .hint-text{line-height:1.6}.hint-band .hint-text b{color:#f3c9b0;font-weight:700}.hint-band .hint-close{flex-shrink:0;border:1px solid rgba(244,241,234,.4);background:transparent;color:var(--paper);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}.hint-band .hint-close:hover{background:#f4f1ea24}@keyframes tatemd-fade{0%{opacity:0}}@keyframes tatemd-rise{0%{opacity:0;transform:translateY(8px)}}.hint-band.is-open{animation-name:tatemd-rise-band}@keyframes tatemd-rise-band{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@media (max-width: 640px){.app-main{grid-template-columns:1fr;grid-template-rows:50vh 1fr;height:auto;min-height:calc(100dvh - var(--header-h));overflow:visible}.pane-divider{display:none}.editor{height:100%;border-bottom:1px solid var(--line)}.preview-pane{height:100%;overflow:auto}.app-title{font-size:17px}}@media (prefers-reduced-motion: reduce){.help-overlay.is-open,.help-card,.hint-band.is-open{animation:none}}.tategaki{writing-mode:vertical-rl;text-orientation:mixed;line-break:strict;text-align:justify;font-family:Hiragino Mincho ProN,Hiragino Mincho Pro,Yu Mincho,YuMincho,ヒラギノ明朝 ProN,游明朝,serif;font-size:1rem;line-height:2;letter-spacing:.05em;height:100%;overflow-x:auto;overflow-y:hidden}.tategaki p{text-indent:1em;margin-inline-start:1.5em}.tategaki p:first-child{margin-inline-start:0}.tategaki h1,.tategaki h2,.tategaki h3,.tategaki h4,.tategaki h5,.tategaki h6{font-weight:700;text-indent:0;margin-inline-start:2em;margin-inline-end:.5em}.tategaki h1{font-size:1.4em;letter-spacing:.1em}.tategaki h2{font-size:1.2em;letter-spacing:.1em}.tategaki h3{font-size:1.1em}.tategaki h4,.tategaki h5,.tategaki h6{font-size:1em}.tategaki blockquote{margin-inline:1.5em;padding-inline-start:1em;border-inline-start:3px solid #c0c0c0;color:#555;background:transparent;font-style:normal}.tategaki ul,.tategaki ol{margin-inline-start:1.5em;padding-inline-start:1em;list-style-position:inside}.tategaki li{text-indent:0}.tategaki hr{border:none;border-inline-start:1px solid #aaa;block-size:5em;margin-inline:1.5em}.tategaki pre,.tategaki table{writing-mode:horizontal-tb;text-orientation:mixed;max-inline-size:80vb;overflow-x:auto;margin-block:1em}.tategaki img{display:block;max-block-size:90%;max-inline-size:100%;block-size:auto;inline-size:auto;margin-block:1em;margin-inline:auto}.tategaki code{font-family:SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;background-color:#f0f0f0;padding:.1em .2em;border-radius:2px}.tategaki pre{margin-inline:1em;overflow-x:auto;background-color:#f5f5f5;padding:.75em 1em;border-radius:4px}.tategaki pre code{background-color:transparent;padding:0;font-size:.85em;writing-mode:inherit}.tategaki table{border-collapse:collapse;font-size:.9em}.tategaki th,.tategaki td{border:1px solid #ccc;padding:.4em .6em;text-align:left}.tategaki em{font-style:normal;-webkit-text-emphasis:dot;text-emphasis:dot;-webkit-text-emphasis-position:right;text-emphasis-position:right}.tategaki strong{font-weight:700}@media print{.app-header,.editor,.pane-divider{display:none!important}.app-main{display:block}.preview-pane{position:static;margin:0;padding:0;overflow:visible;width:100%;height:auto;background:none}.tategaki{block-size:auto;overflow:visible}body[data-paper=a5]:not([data-pdf-mode=scroll]) .tategaki{inline-size:180mm}body[data-paper=b6]:not([data-pdf-mode=scroll]) .tategaki{inline-size:152mm}html:has(body[data-pdf-mode=scroll]),body[data-pdf-mode=scroll]{margin:0!important;padding:0!important}body[data-pdf-mode=scroll] .app-main,body[data-pdf-mode=scroll] .preview-pane{margin:0!important;padding:0!important;overflow:visible!important}body[data-pdf-mode=scroll] .tategaki{break-inside:avoid;page-break-inside:avoid;overflow:visible}body[data-pdf-mode=scroll] .tategaki p{break-inside:avoid;page-break-inside:avoid}}