/* Instagram feed post, iOS layout (Mobbin, 2026): 32px avatar header, an
   edge-to-edge 4:5 carousel with a 1/12 pill and dots, heart + comment row,
   likes count, the caption of the slide on screen, "댓글 모두 보기", time.
   The comments sheet mirrors the app's bottom sheet. */
/* The photo is always the full 2:3 frame edge to edge; the section is at
   least one screen tall and whatever is left goes to the space under the text,
   above the RSVP capsule. */
.theme-modern .feed-section{display:block;min-height:var(--chapter-height,100svh);padding:calc(env(safe-area-inset-top) + 2px) 0 max(72px,calc(env(safe-area-inset-bottom) + 66px));background:#fff;color:#000}
.feed-post{width:100%;font-size:14px;line-height:1.4}
.feed-text{display:contents}
.feed-head{display:flex;align-items:center;gap:10px;padding:4px 8px 6px 12px}
.feed-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.feed-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.25}
.feed-who b{font-weight:650;font-size:15px;letter-spacing:-.01em}
.feed-who span{font-size:12px;color:#000}
.feed-icon{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:#000;cursor:pointer;-webkit-tap-highlight-color:transparent}
.feed-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feed-icon svg circle{fill:currentColor;stroke:none}
/* Media: 4:5 like a portrait post. */
.feed-media{position:relative;aspect-ratio:2/3;background:#000;overflow:hidden}
.feed-track{position:absolute;inset:0;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.feed-track::-webkit-scrollbar{display:none}
.feed-track:focus-visible{outline:2px solid #0095f6;outline-offset:-2px}
.feed-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;background:#000}
.feed-slide img{display:block;width:100%;height:100%;object-fit:cover}
.feed-slide[data-landscape]{background:#0f0f10}
.feed-slide[data-landscape] img{object-fit:contain}
.feed-caption{line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.feed-caption.is-open{display:block;-webkit-line-clamp:unset}
/* 더 보기 sits at the end of the second line over a white fade, like the app. */
.caption-more{position:absolute;right:0;bottom:0;margin:0;padding:0 0 0 28px;border:0;background:linear-gradient(90deg,rgb(255 255 255 / 0),#fff 40%);color:#737373;font:inherit;font-size:14px;line-height:1.45;cursor:pointer}
.caption-more[hidden]{display:none}
.feed-count{position:absolute;top:12px;right:12px;padding:4px 9px;border-radius:14px;background:rgb(0 0 0 / .62);color:#fff;font-size:12px;font-weight:500;letter-spacing:.02em;opacity:1;transition:opacity .35s;pointer-events:none}
.feed-media.is-idle .feed-count{opacity:0}
.feed-burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0}
.feed-burst svg{width:96px;height:96px;fill:#fff;filter:drop-shadow(0 4px 14px rgb(0 0 0 / .35))}
.feed-burst.is-on{animation:feed-burst .8s cubic-bezier(.22,1,.36,1)}
@keyframes feed-burst{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.08)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
/* Actions row with the dots centred like the app. */
.feed-actions{position:relative;display:flex;align-items:center;padding:2px 4px 0 6px}
.feed-like[aria-pressed="true"] svg path{fill:#ff3040;stroke:#ff3040}
.feed-like.is-popping svg{animation:feed-pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes feed-pop{0%{transform:scale(.6)}60%{transform:scale(1.22)}100%{transform:scale(1)}}
.feed-dots{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center;gap:4px;pointer-events:none}
.feed-dots span{width:6px;height:6px;border-radius:50%;background:#dbdbdb;transition:background .2s,transform .2s;display:none}
.feed-dots span.is-visible{display:block}
.feed-dots span.is-small{transform:scale(.66)}
.feed-dots span.is-current{background:#0095f6}
.feed-likes{margin:2px 12px 0;font-size:14px}
.feed-likes b{font-weight:600}
.feed-captions{position:relative;margin:3px 12px 0}
.feed-caption{margin:0}
.feed-caption[hidden]{display:none}
.feed-caption b{font-weight:600;margin-right:4px}
.feed-comments-link{display:block;margin:4px 12px 0;padding:0;border:0;background:none;color:#737373;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.feed-time{margin:3px 12px 0;font-size:11px;color:#737373}
.feed-comments-link{margin-top:3px}
/* Comments sheet: a grip, a 16px "Comments" title, rows with name + time,
   text and the like count, a heart on the right, an emoji row and
   "OO님으로 댓글 달기..." and one-level reply threads. */
.theme-modern .feed-comments{position:fixed;inset:auto 0 var(--comments-viewport-bottom,0px);width:100%;max-width:480px;height:min(65svh,var(--comments-viewport-height,100svh));max-height:var(--comments-viewport-height,100svh);margin:0 auto;padding:0;border:0;border-radius:16px 16px 0 0;background:#fff;color:#000;display:none;flex-direction:column;overflow:hidden;transform:translateY(0);transition:transform .42s cubic-bezier(.32,.72,0,1)}
.theme-modern .feed-comments.is-offscreen{transform:translateY(100%);transition-duration:.28s;transition-timing-function:cubic-bezier(.4,0,1,1)}
.theme-modern .feed-comments[open]{display:flex}
/* Let the list shrink/scroll while the header and composer stay reachable. */
.theme-modern .feed-comments>.sheet-grip,.theme-modern .feed-comments>h2,.comment-form{flex-shrink:0}
.theme-modern .feed-comments.is-viewport-compact .emoji-row{display:none}
.theme-modern .feed-comments.is-dragging{transition:none}
.theme-modern .feed-comments::backdrop{background:rgb(0 0 0 / .35);backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .42s cubic-bezier(.32,.72,0,1)}
.theme-modern .feed-comments.is-offscreen::backdrop{background:rgb(0 0 0 / 0);transition-duration:.28s}
.sheet-grip{padding:10px 0 4px;touch-action:none;cursor:grab}
.sheet-grip span{display:block;width:36px;height:4px;margin:0 auto;border-radius:2px;background:#dbdbdb}
.theme-modern .feed-comments h2{margin:0;padding:4px 0 12px;text-align:center;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;border-bottom:1px solid #efefef}
.comment-list{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;padding:8px 0;list-style:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.comment-list:empty{display:none}
.comment-empty{min-height:0;overflow-y:auto;margin:auto;padding:24px;color:#737373;font-size:14px;text-align:center;line-height:1.6}
.comment-empty[hidden]{display:none}
.comment{display:grid;grid-template-columns:32px 1fr auto;column-gap:12px;padding:10px 16px}
.comment-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tone,#c7c7cc);color:#fff;font-size:11px;font-weight:600;letter-spacing:-.02em;line-height:1;flex:none}
.comment-body{min-width:0;font-size:14px;line-height:1.35}
.comment-meta{color:#737373;font-size:12px}
.comment-meta b{color:#000;font-weight:600;margin-right:6px;font-size:13px}
.comment-text{margin:1px 0 0;word-break:break-word}
.comment-actions{display:flex;align-items:center;gap:16px;margin-top:2px;min-height:20px;font-size:12px;font-weight:600;line-height:1;color:#737373}
.comment-actions:empty{display:none}
.comment-heart{align-self:start;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:#000;cursor:pointer}
.comment-heart svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.comment-heart[aria-pressed="true"] svg{fill:#ff3040;stroke:#ff3040}
.comment-heart small{display:block;font-size:11px;color:#737373;line-height:1;margin-top:2px}
/* Composer: keep breathing room above the keyboard and respect the home indicator.
   The name bubble shares this inset so it stays anchored above the input. */
.comment-form{--comment-bottom-space:max(20px,env(safe-area-inset-bottom,0px));border-top:1px solid #efefef;padding:12px 16px var(--comment-bottom-space);background:#fff}
.emoji-row{display:flex;justify-content:space-between;padding:4px 2px 10px}
.emoji-row button{width:36px;height:36px;padding:0;border:0;background:none;font-size:26px;line-height:1;cursor:pointer}
/* One composer row. The avatar is the name control: with no name it shows
   "?" with a + badge; tapping it opens a bubble above the row with a name
   field and a check, so the comment being written stays visible. */
.comment-form{position:relative}
.comment-row{display:flex;align-items:center;gap:10px}
.author-avatar{position:relative}
.author-avatar-button{border:0;padding:0;cursor:pointer;font:inherit;font-size:11px;font-weight:600;transition:transform .2s}
.author-avatar-button:active{transform:scale(.92)}
.author-avatar.is-empty{background:#e6e6e6;color:#6e6e6e;font-size:15px;font-weight:600;padding:0 3px 2px 0}
.author-avatar.is-empty::after{content:'+';position:absolute;right:-4px;bottom:-4px;width:14px;height:14px;border-radius:50%;background:#0095f6;color:#fff;font-size:12px;line-height:13px;font-weight:600;text-align:center;border:2px solid #fff;box-sizing:content-box;padding:0}
.author-avatar-button.is-empty.is-nudging{animation:author-nudge .9s cubic-bezier(.36,.07,.19,.97)}
@keyframes author-nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.author-bubble{position:absolute;left:16px;right:16px;bottom:calc(44px + var(--comment-bottom-space) + 12px);z-index:2;padding:10px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .08),0 8px 28px rgb(0 0 0 / .18);transform-origin:16px calc(100% + 8px);transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.34,1.3,.64,1)}
.author-bubble::after{content:'';position:absolute;left:14px;bottom:-6px;width:12px;height:12px;border-radius:2px;background:#fff;transform:rotate(45deg);box-shadow:3px 3px 6px rgb(0 0 0 / .06)}
.author-bubble[hidden]{display:block;opacity:0;transform:translateY(6px) scale(.92);pointer-events:none;visibility:hidden;transition:opacity .16s,transform .16s,visibility 0s .16s}
.author-bubble-row{display:flex;align-items:center;gap:8px}
.comment-author,.comment-input{flex:1 1 auto;min-width:0;height:44px;margin:0;padding:0 16px;border:1px solid #dbdbdb;border-radius:22px;font:inherit;font-size:16px;background:#fff}
.comment-author{height:40px;padding:0 14px;background:#fafafa}
.comment-author::placeholder,.comment-input::placeholder{color:#8e8e8e}
.author-hint{margin:2px 4px 8px;font-size:12px;color:#737373;line-height:1.4}
.author-hint[hidden]{display:none}
.comment-form input:focus{outline:none;border-color:#a8a8a8}
.comment-send{width:36px;height:36px;border:0;border-radius:50%;background:#0095f6;color:#fff;display:grid;place-items:center;flex:none;transition:opacity .2s}
.comment-send:disabled{opacity:.35}
.comment-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.feed-like.is-popping svg,.feed-burst.is-on,.author-avatar-button.is-nudging{animation:none}.feed-dots span,.theme-modern .feed-comments,.theme-modern .feed-comments::backdrop,.author-bubble{transition:none}}
@media(forced-colors:active){.feed-dots span{background:GrayText}.feed-dots span.is-current{background:Highlight}.comment-send{background:Highlight;color:HighlightText}}
.comment-avatar.couple-avatar{object-fit:cover;background:#eee}
.author-avatar-button:disabled{opacity:1;cursor:default}
.comment.is-reply{margin-left:44px;grid-template-columns:28px 1fr auto;column-gap:10px}
.comment.is-reply>.comment-avatar{width:28px;height:28px}
.comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.comment-meta b{margin-right:2px}
.couple-badge{display:inline-block;color:#0095f6;font-size:10px;font-weight:600;margin-right:3px}
.comment-text{white-space:pre-wrap}
.comment-reply-context{display:block;color:#737373;font-size:11px;margin:2px 0}
.comment-reply{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;min-height:24px}
.comment-reply-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fafafa;margin:-12px -16px 12px;padding:8px 16px;color:#737373;font-size:12px}
.comment-reply-bar[hidden],.comment-feedback[hidden]{display:none}
.comment-reply-bar button{border:0;background:none;color:#737373;font-size:22px;width:32px;height:28px;padding:0;cursor:pointer}
.comment-feedback{margin:8px 0 0;color:#ad384b;font-size:12px;line-height:1.4}