.journal-page{background:var(--canvas-100);min-height:100vh}.journal{max-width:720px;margin:0 auto;padding:var(--space-3) var(--space-2) calc(88px + env(safe-area-inset-bottom))}.journal__head{padding:var(--space-2) 0 var(--space-4);border-bottom:1px solid var(--hairline);margin-bottom:var(--space-4)}.journal__kicker{display:block;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-widest);color:var(--lantern-700);margin-bottom:var(--space-1)}.journal__title{margin:0 0 var(--space-1);font-family:var(--font-mincho);font-size:var(--text-h1);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);color:var(--ink-900)}.journal__supp{margin:0;font-family:var(--font-mincho);font-size:var(--text-small);color:var(--ink-500)}.journal__otd{margin-bottom:var(--space-5)}.journal__otd-head{display:flex;align-items:center;gap:var(--space-1);margin:0 0 var(--space-2);font-family:var(--font-mincho);font-size:var(--text-h3);font-weight:var(--weight-bold);color:var(--ink-800)}.journal__otd-icon{flex:0 0 auto;color:var(--lantern-500)}.journal__otd-list{list-style:none;margin:0;padding:0 var(--space-2);margin-inline:calc(-1 * var(--space-2));display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--space-2);scrollbar-width:none}.journal__otd-list::-webkit-scrollbar{display:none}.journal__otd-item{flex:0 0 auto;width:78%;max-width:320px;scroll-snap-align:start}.journal__otd-card{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--lantern-50);border:1px solid var(--hairline);border-radius:var(--radius-xl);overflow:hidden}.journal__otd-card:focus-visible{outline:2px solid var(--lantern-500);outline-offset:2px}.journal__otd-thumb{display:block;aspect-ratio:16 / 9;overflow:hidden}.journal__otd-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.journal__otd-body{padding:var(--space-2) var(--space-3) var(--space-3)}.journal__otd-label{display:inline-block;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-wide);color:var(--lantern-700);margin-bottom:4px}.journal__otd-date{display:block;font-family:var(--font-mono);font-size:var(--text-label);color:var(--ink-400);margin-bottom:2px}.journal__otd-title{display:block;font-family:var(--font-mincho);font-size:var(--text-body);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--ink-800)}.jb__controls{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--canvas-100);padding:var(--space-2) var(--space-2) var(--space-2);margin-inline:calc(-1 * var(--space-2));margin-bottom:var(--space-2);border-bottom:1px solid var(--hairline);box-shadow:var(--elevation-rest)}.jb__search{position:relative;display:flex;align-items:center}.jb__search-icon{position:absolute;left:12px;display:inline-flex;color:var(--ink-400);pointer-events:none}.jb__search-input{width:100%;min-height:var(--tap-target-min);padding:0 36px;font-family:var(--font-sans);font-size:16px;color:var(--ink-900);background:var(--canvas-50);border:1px solid var(--hairline-strong);border-radius:var(--radius-pill)}.jb__search-input:focus-visible{outline:2px solid var(--lantern-500);outline-offset:1px;border-color:transparent}.jb__search-clear{position:absolute;right:6px;width:32px;height:32px;border:none;border-radius:var(--radius-circle);background:var(--canvas-300);color:var(--ink-600);font-size:16px;line-height:1;cursor:pointer}.jb__filters{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}.jb__seg{display:inline-flex;background:var(--canvas-200);border-radius:var(--radius-pill);padding:2px}.jb__seg-btn{border:none;background:transparent;padding:8px 16px;min-height:44px;font-family:var(--font-sans);font-size:var(--text-small);color:var(--ink-500);border-radius:var(--radius-pill);cursor:pointer}.jb__seg-btn.is-active{background:var(--canvas-50);color:var(--ink-900);font-weight:var(--weight-medium);box-shadow:var(--elevation-rest)}.jb__select{min-height:44px;padding:0 var(--space-2);font-family:var(--font-sans);font-size:var(--text-small);color:var(--ink-700);background:var(--canvas-50);border:1px solid var(--hairline-strong);border-radius:var(--radius-pill)}.jb__toggle{display:inline-flex;align-items:center;gap:var(--space-0_5);min-height:44px;padding:0 var(--space-2);font-family:var(--font-sans);font-size:var(--text-small);color:var(--ink-600);background:var(--canvas-50);border:1px solid var(--hairline-strong);border-radius:var(--radius-pill);cursor:pointer}.jb__toggle.is-active{background:var(--lantern-50);color:var(--lantern-700);border-color:var(--lantern-300)}.jb__tags{display:flex;flex-wrap:nowrap;gap:var(--space-1);margin-top:var(--space-2);padding-inline:var(--space-2);margin-inline:calc(-1 * var(--space-2));overflow-x:auto;scroll-padding-inline:var(--space-2);scrollbar-width:none;-webkit-overflow-scrolling:touch}.jb__tags::-webkit-scrollbar{display:none}.jb__tag{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:4px 14px;font-family:var(--font-sans);font-size:var(--text-label);color:var(--ink-500);background:var(--canvas-50);border:1px solid var(--hairline);border-radius:var(--radius-pill);white-space:nowrap;cursor:pointer}.jb__tag.is-active{background:var(--ink-800);color:var(--canvas-50);border-color:var(--ink-800)}.jb__statusbar{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-2)}.jb__count{font-family:var(--font-mono);font-size:var(--text-label);color:var(--ink-400)}.jb__clear{border:none;background:transparent;font-family:var(--font-sans);font-size:var(--text-label);color:var(--lantern-700);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.jb__group{margin-bottom:var(--space-4)}.jb__group-head{margin:0 0 var(--space-2);font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-wider);color:var(--ink-400)}.jb__posts{list-style:none;margin:0;padding:0}.jb-post{padding:var(--space-3) 0;border-bottom:1px solid var(--hairline)}.jb-post:last-child{border-bottom:none}.jb-post__head{display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1)}.jb-post__avatar{flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-circle);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mincho);font-weight:var(--weight-bold);font-size:var(--text-body);color:var(--canvas-50);background:var(--ink-500)}.jb-post__avatar--ryoya{background:var(--ryoya-500)}.jb-post__avatar--mako{background:var(--mako-500)}.jb-post__id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.jb-post__name{font-family:var(--font-mincho);font-size:var(--text-small);font-weight:var(--weight-bold);color:var(--ink-900)}.jb-post__meta{font-family:var(--font-sans);font-size:var(--text-label);color:var(--ink-400)}.jb-post__type{flex:0 0 auto;align-self:flex-start;padding:2px 8px;border-radius:var(--radius-pill);background:var(--canvas-150);border:1px solid var(--hairline);font-family:var(--font-sans);font-size:var(--text-label);color:var(--ink-500)}.jb-post__media,.journal__otd-thumb{background-color:var(--canvas-200);background-repeat:no-repeat;background-position:center;background-size:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23b9b1a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E")}.jb-post__media{display:block;margin:var(--space-1) 0;aspect-ratio:4 / 5;border-radius:var(--radius-lg);overflow:hidden}.jb-post__media img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.jb-post__content{display:block;text-decoration:none}.jb-post__title{display:block;font-family:var(--font-mincho);font-size:var(--text-body);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--ink-900)}.jb-post__text{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font-family:var(--font-mincho);font-size:var(--text-small);line-height:var(--leading-body);color:var(--ink-600)}.jb-post--photo .jb-post__text{-webkit-line-clamp:2;line-clamp:2}.jb-post__tags{display:flex;flex-wrap:wrap;gap:var(--space-0_5) var(--space-1);margin-top:var(--space-1)}.jb-post__tag{font-family:var(--font-sans);font-size:var(--text-label);color:var(--lantern-700)}.jb-post__media:focus-visible,.jb-post__content:focus-visible{outline:2px solid var(--lantern-500);outline-offset:2px;border-radius:var(--radius-sm)}.jb__empty{text-align:center;padding:var(--space-8) var(--space-3);font-family:var(--font-mincho)}.jb__empty-icon{display:inline-flex;color:var(--lantern-500);opacity:.7}.jb__empty-title{margin:var(--space-2) 0 var(--space-1);font-size:var(--text-h3);color:var(--ink-800)}.jb__empty-desc{margin:0;font-size:var(--text-small);color:var(--ink-500)}.jb__empty-cta{margin-top:var(--space-2);display:inline-flex;align-items:center;min-height:var(--tap-target-min);padding:8px 24px;border:none;border-radius:var(--radius-pill);background:var(--lantern-500);color:var(--canvas-50);font-family:var(--font-sans);font-size:var(--text-small);font-weight:var(--weight-bold);text-decoration:none;cursor:pointer;transition:background var(--duration-press) var(--ease-out)}.jb__empty-cta:hover{background:var(--lantern-600)}.jb__empty-cta--ghost{background:transparent;color:var(--lantern-700);border:1px solid var(--hairline-strong)}.jb__empty-cta--ghost:hover{background:var(--canvas-150)}@media(prefers-reduced-motion:reduce){.jb__empty-cta,.jb__toggle{transition:none}}