@layer components{.photo-view{max-width:1400px;margin:0 auto;padding:var(--s-2xl) var(--s-md) var(--s-xl)}.photo-layout{display:grid;grid-template-columns:1fr;gap:var(--s-xl)}@media(min-width:1280px){.photo-layout{grid-template-columns:2.5fr 1fr;align-items:start}}.photo-frame{background:var(--c-surf);display:flex;align-items:center;justify-content:center;padding:var(--s-sm)}.photo-frame picture{border:1px solid var(--c-border)}.photo-frame img{max-width:100%;max-height:85vh;width:auto;height:auto;object-fit:contain;display:block}.photo-info{display:flex;flex-direction:column;gap:var(--s-lg)}@media(min-width:1280px){.photo-info{position:sticky;top:calc(50px + env(safe-area-inset-top,0px) + var(--s-lg));align-self:start}}.pi-idx{font-family:var(--ff-h);font-size:var(--f-mega);font-weight:700;color:var(--c-green);line-height:.75;opacity:.1}.pi-title{font-family:var(--ff-h);font-size:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.95;margin-top:calc(var(--s-sm)*-1)}.pi-body{font-family:var(--ff-serif);font-size:var(--f-body);color:var(--c-text);line-height:1.75;font-style:italic;max-width:48ch}.pi-body p+p{margin-top:var(--s-md)}.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-sm) var(--s-md);border-top:1px solid var(--c-border);padding-top:var(--s-md)}.mk{font-size:var(--f-xs);color:var(--c-dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1px}.mk:after{content:"_";color:var(--c-green)}.mv{font-family:var(--ff-h);font-size:var(--f-sm);letter-spacing:.04em;text-transform:uppercase}.tag-list{display:flex;flex-wrap:wrap;gap:var(--s-xs)}.tag-chip{font-size:var(--f-xs);padding:4px 12px;border:1px solid var(--c-border);letter-spacing:.06em;transition:all var(--t-f)}.actions{display:flex;gap:var(--s-sm);border-top:1px solid var(--c-border);padding-top:var(--s-md)}.act-btn{font-size:var(--f-sm);letter-spacing:.1em;text-transform:uppercase;padding:8px 20px;border:1px solid var(--c-border);display:inline-flex;align-items:center;gap:var(--s-xs);transition:all var(--t-f)}.act-btn svg{width:15px;height:15px}.comments-section{padding:var(--s-xl) var(--s-md)}.comments-label{font-size:var(--f-xs);color:var(--c-green-dim);letter-spacing:.15em;text-transform:uppercase;padding-bottom:var(--s-md);display:flex;align-items:center;gap:var(--s-sm)}.comments-label:before{content:"//";color:var(--c-cyan);margin-right:2px}.comments-label:after{content:"";flex:1;height:1px;border-top:1px solid var(--c-border)}.comments-label .count{color:var(--c-dim);margin-left:var(--s-xs)}.comment-form{margin-bottom:var(--s-xl);padding:var(--s-md);border:1px solid var(--c-border);transition:border-color var(--t-fast)}.comment-form:focus-within{border-color:var(--c-green)}.comment-form-label{font-size:var(--f-xs);color:var(--c-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s-sm)}.comment-form-label:before{content:"// ";color:var(--c-cyan)}.comment-textarea{font-family:var(--ff-body);font-size:var(--f-small);width:100%;min-height:100px;resize:vertical;background:transparent;border:none;color:var(--c-text);line-height:1.6;outline:none;letter-spacing:.02em}.comment-textarea::placeholder{color:var(--c-dim)}.comment-form-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s-sm);padding-top:var(--s-sm);border-top:1px solid var(--c-border)}.comment-form-hint{font-size:var(--f-xs);color:var(--c-dim);font-style:italic;font-family:var(--ff-serif)}.comment-submit{font-size:var(--f-small);letter-spacing:.12em;text-transform:uppercase;padding:8px 24px;border:1px solid var(--c-green-dim);background:transparent;cursor:pointer;transition:all var(--t-fast)}.comment-submit:disabled{opacity:.3;pointer-events:none}.comment-list{display:flex;flex-direction:column}.comment{padding:var(--s-md) 0;border-bottom:1px solid var(--c-border)}.comment:last-child{border-bottom:none}.comment.replies{padding-left:var(--s-lg)}.comment-head{display:flex;align-items:center;gap:var(--s-sm);margin-bottom:var(--s-sm)}.comment-avatar{width:32px;height:32px;display:grid;place-items:center;font-family:var(--ff-heading);font-size:var(--f-xs);font-weight:700;color:var(--c-text);flex-shrink:0;background:var(--c-surface)}.comment-avatar.author-highlight{background:linear-gradient(135deg,var(--c-green),var(--c-cyan))}.comment-meta{display:flex;flex-direction:column;gap:1px;flex:1}.comment-author{font-family:var(--ff-heading);font-size:var(--f-small);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.comment-author .badge{font-family:var(--ff-body);font-size:var(--f-xs);color:var(--c-green-dim);letter-spacing:.08em;font-weight:400;margin-left:var(--s-xs)}.comment-time{font-size:var(--f-xs);color:var(--c-dim)}.comment-body{font-family:var(--ff-serif);font-size:var(--f-body);color:var(--c-text-soft);line-height:1.7;font-style:italic;max-width:65ch}.comment-actions{display:flex;gap:var(--s-md);margin-top:var(--s-sm)}.comment-action{font-family:var(--ff-body);font-size:var(--f-xs);color:var(--c-dim);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:4px;transition:color var(--t-fast);cursor:pointer}.comment-action:hover{color:var(--c-green)}.comment-action svg{width:13px;height:13px}.no-comments{font-family:var(--ff-serif);font-size:var(--f-small);color:var(--c-dim);font-style:italic;padding:var(--s-lg) 0;text-align:center}.reply-form{margin-top:var(--s-sm);padding-top:var(--s-sm);border-top:1px solid var(--c-border)}.reply-form .comment-textarea{min-height:60px}.comment-toast{position:fixed;bottom:var(--s-lg);left:50%;transform:translate(-50%) translateY(20px);background:var(--c-text);color:var(--c-bg);font-family:var(--ff-body);font-size:var(--f-small);padding:var(--s-sm) var(--s-md);letter-spacing:.06em;opacity:0;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);z-index:9999;pointer-events:none}.comment-toast.visible{opacity:1;transform:translate(-50%) translateY(0)}}