.study-detail-page { width:min(1160px,calc(100% - 48px)); margin:0 auto; padding:98px 0 64px; }
.detail-top { display:flex; justify-content:flex-end; gap:16px; margin-bottom:28px; font-size:13px; color:#68686f; }
.detail-top>span { font-size:12px; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:64px; align-items:start; }
.detail-main { min-width:0; }
.detail-intro .study-title-row { margin:12px 0 14px; gap:14px; }
.detail-intro .study-title-row>h1 { margin:0; }
.detail-intro .category { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#68686f; }
.detail-intro h1 { margin:12px 0 14px; font-size:42px; line-height:1.2; letter-spacing:-.045em; word-break:keep-all; }
.detail-intro>p { margin:0; font-size:18px; font-weight:550; color:var(--red); line-height:1.7; word-break:keep-all; }
.intro-meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px; font-size:13px; color:#68686f; }
.intro-meta span:first-child { color:var(--ink); font-weight:650; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:20px; }
.section-heading h2 { margin:0; font-size:22px; letter-spacing:-.035em; line-height:1.4; }
.section-heading>span { font-size:12px; color:#68686f; white-space:nowrap; }
.people-section { margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
.hosts { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.host { display:grid; grid-template-columns:112px minmax(0,1fr); align-content:start; align-items:start; gap:8px 24px; }
.host img,.host .host-fallback { grid-column:1; grid-row:1 / span 3; width:112px; height:112px; object-fit:cover; border-radius:50%; background:#e6e3df; }
.host h3 { margin:0 0 4px; font-size:18px; letter-spacing:-.02em; }
.host-role { margin:0; font-size:12px; color:#68686f; }
.host-intro { grid-column:2; margin:0; font-size:14px; line-height:1.75; color:#505057; word-break:keep-all; }
.host-note { grid-column:2; color:#68686f; font-size:12px; }
.participant-example { margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.participant-title { margin:0 0 10px; font-size:13px; font-weight:650; }
.participant-title span { margin-left:8px; font-size:11px; color:#68686f; font-weight:400; }
.participant-row { display:flex; align-items:center; gap:10px; font-size:12px; color:#505057; }
.participant-avatars { display:flex; padding-left:0; }
.participant-avatars img { width:32px; height:32px; border:2px solid var(--paper); border-radius:50%; }
.participant-avatars img+img { margin-left:-6px; }
.participant-example>p { margin:0; max-width:145px; font-size:11px; line-height:1.6; color:#68686f; word-break:keep-all; }
.outcomes-section { margin-top:32px; padding:28px 0 0; border-top:1px solid var(--line); }
.outcome-lead { margin:0 0 22px; font-size:30px; font-weight:650; line-height:1.45; letter-spacing:-.04em; }
.outcome-lead>span { color:var(--red); }
.outcome-lines>div { display:flex; gap:18px; align-items:baseline; padding:10px 0; }
.line-number { color:var(--red); font-size:12px; font-weight:700; }
.outcome-lines p { margin:0; color:#505057; font-size:14px; line-height:1.7; word-break:keep-all; }
.section-nav { display:flex; gap:26px; border-bottom:1px solid var(--line); margin-top:42px; padding-bottom:14px; font-size:13px; font-weight:650; }
.section-nav a:hover { color:var(--red); }
.detail-section { padding-top:38px; scroll-margin-top:88px; }
.section-description { margin:0 0 10px; color:#505057; font-size:15px; line-height:1.75; word-break:keep-all; }
.draft-note { margin:0 0 22px; font-size:12px; color:#68686f; }
.session-list { border-top:1px solid var(--line); }
.session-list details { border-bottom:1px solid var(--line); }
.session-list summary { display:flex; align-items:center; gap:20px; padding:18px 0; cursor:pointer; list-style:none; font-size:15px; font-weight:600; }
.session-list summary::-webkit-details-marker { display:none; }
.session-number { flex-shrink:0; font-size:12px; color:#68686f; font-weight:500; }
.session-toggle { margin-left:auto; font-size:23px; color:#68686f; line-height:1; transition:transform .2s ease; }
.session-list details[open] .session-toggle { transform:rotate(45deg); }
.session-content { padding:0 0 20px 56px; font-size:14px; color:#505057; line-height:1.7; }
.session-content p { margin:0 0 8px; }
.session-content .session-action { margin:0; color:#68686f; font-size:13px; }
.plain-list { padding-left:20px; margin:0; font-size:15px; color:#505057; line-height:1.9; }
.plain-list li { padding-left:4px; margin-bottom:8px; }
.reassurance { margin:18px 0 0; font-size:14px; font-weight:600; }
.prepare-list { margin:0; }
.prepare-list>div { display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.7; }
.prepare-list dt { color:#68686f; }
.prepare-list dd { margin:0; word-break:keep-all; }
.detail-aside { position:relative; align-self:stretch; }
.study-visual { position:relative; margin:0 0 18px; }
.study-visual>img { display:block; width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; border-radius:18px; }
.visual-actions { position:absolute; right:12px; top:12px; display:flex; gap:8px; }
.icon-button { position:relative; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid #ffffff70; padding:0; border-radius:50%; color:#fff; background:#252525a6; cursor:pointer; transition:background .24s ease; }
.icon-button:hover { background:#252525d9; }
.icon-button svg { width:24px; height:24px; flex-shrink:0; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.share-button svg { transform:translateX(-1px); }
.interest-button[aria-pressed=true] { background:var(--red); }
.interest-button[aria-pressed=true]>svg { fill:currentColor; }
.preview-heart { position:absolute; pointer-events:none; inset:0; display:grid; place-items:center; color:var(--red); animation:preview-heart-float .8s ease-out both; }
.preview-heart svg { width:15px; height:15px; fill:currentColor; stroke:white; stroke-width:1; }
.preview-heart:nth-of-type(1) { --drift:-18px; }
.preview-heart:nth-of-type(2) { --drift:0px; }
.preview-heart:nth-of-type(3) { --drift:18px; }
@keyframes preview-heart-float { 0% { opacity:0; transform:scale(.6); } 18% { opacity:1; } 100% { opacity:0; transform:translate(var(--drift,0),-45px) scale(1.1); } }
.join-panel { position:sticky; top:92px; padding:24px; border:1px solid #e2e2df; border-radius:16px; background:#fff; }
.recruiting { display:flex; align-items:center; gap:7px; color:var(--red); font-size:12px; font-weight:700; }
.status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.join-panel h2 { margin:18px 0 9px; font-size:23px; line-height:1.3; letter-spacing:-.04em; }
.join-lead { margin:0 0 22px; color:#68686f; font-size:14px; line-height:1.7; }
.join-facts { margin:0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.join-facts>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:13px; }
.join-facts>div:last-child { margin-bottom:0; }
.join-facts dt { color:#68686f; }
.join-facts dd { margin:0; font-weight:600; text-align:right; }
.join-facts small { color:#68686f; font-weight:400; font-size:11px; }
.recruiting-period { margin:20px 0; text-align:center; color:#68686f; line-height:1.6; }
.recruiting-period>span { display:block; margin-bottom:4px; font-size:13px; font-weight:600; }
.recruiting-period strong { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px; font-size:18px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.recruiting-period time { white-space:nowrap; }
.join-button,.dialog-confirm,.mobile-join button { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:12px 18px; border:0; border-radius:8px; background:var(--red); color:#fff; font-size:14px; font-weight:700; text-align:center; cursor:pointer; transition:background .2s ease; }
.join-button:hover,.dialog-confirm:hover,.mobile-join button:hover { background:var(--red-deep); }
.preview-disclaimer { margin:12px 0 0; text-align:center; font-size:10px; line-height:1.6; color:#68686f; }
.mobile-join { display:none; }
.study-detail-page button:focus-visible,.study-detail-page summary:focus-visible,.join-dialog button:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.people-section,.outcomes-section { scroll-margin-top:88px; }
@media(max-width:1020px) and (min-width:821px) { .detail-layout { grid-template-columns:minmax(0,1fr) 290px; gap:32px; } .detail-intro h1 { font-size:36px; } .host h3 { font-size:17px; } }
@media(max-width:820px) {
  .study-detail-page { width:calc(100% - 32px); padding-top:84px; padding-bottom:42px; }
  .detail-top { margin-bottom:22px; }
  .detail-layout { display:flex; flex-direction:column; gap:0; }
  .detail-main,.detail-aside { display:contents; }
  .detail-intro { order:0; }
  .detail-intro h1 { font-size:31px; }
  .detail-intro>p { font-size:16px; }
  .intro-meta { font-size:12px; gap:5px 12px; }
  .study-visual { display:none; }
  .study-visual>img { aspect-ratio:2/1; max-height:240px; }
  .people-section { order:2; width:100%; margin-top:28px; padding-top:0; border:0; }
  .outcomes-section { order:3; width:100%; }
  .section-nav { order:4; width:100%; gap:24px; margin-top:32px; }
  .detail-section { order:5; width:100%; padding-top:32px; scroll-margin-top:130px; }
  .join-panel { position:static; order:6; width:100%; margin-top:32px; }
  .study-detail-page .join-panel>.join-button { display:none; }
  .section-heading h2 { font-size:20px; }
  .section-heading { margin-bottom:18px; }
  .hosts { gap:26px; }
  .host { grid-template-columns:88px minmax(0,1fr); gap:7px 18px; }
  .host img,.host .host-fallback { width:88px; height:88px; }
  .host h3 { font-size:16px; }
  .host-role { font-size:11px; word-break:keep-all; }
  .host-intro { font-size:13px; }
  .host-note { font-size:11px; }
  .participant-example>p { max-width:115px; font-size:10px; }
  .participant-title span { display:block; margin:3px 0 0; }
  .outcome-lead { font-size:27px; }
  .session-list summary { gap:14px; font-size:14px; padding:17px 0; }
  .session-content { padding-left:0; }
  .prepare-list>div { grid-template-columns:85px minmax(0,1fr); gap:12px; font-size:13px; }
  .detail-footer { width:calc(100% - 32px); padding-bottom:116px; }
  .mobile-join { display:flex; align-items:center; justify-content:space-between; gap:16px; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#f7f7f5f2; backdrop-filter:blur(16px); }
  .mobile-join>div { flex:1; min-width:0; font-size:13px; font-weight:650; }
  .mobile-join strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; font-weight:inherit; }
  .mobile-join p { margin:3px 0 0; font-size:11px; color:#68686f; font-weight:400; white-space:nowrap; }
  .study-detail-page .mobile-join .join-button { flex-shrink:0; width:auto; min-width:145px; }
  .people-section,.outcomes-section { scroll-margin-top:130px; }
}
@media(max-width:360px) { .host { grid-template-columns:80px minmax(0,1fr); gap:7px 14px; } .host img,.host .host-fallback { width:80px; height:80px; } .participant-example { gap:10px; } .detail-intro h1 { font-size:29px; } .mobile-join { gap:8px; } .study-detail-page .mobile-join .join-button { min-width:130px; font-size:13px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .preview-toast,.preview-toast.is-visible,.session-toggle,.icon-button { transition:none; } .preview-heart { display:none; animation:none; } }

.host-fallback { display:grid; place-items:center; font-size:22px; }

.study-detail-page { width:min(1160px,calc(100% - 48px)); }
.study-detail-page .study-detail-actions { position:static; flex:0 0 auto; align-items:center; gap:6px; margin:0; }
.study-detail-page .study-detail-actions>button { position:relative; inset:auto; z-index:auto; width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--line); border-radius:50%; color:#55555d; background:#fff; }
.study-detail-page .study-detail-actions>button:hover { background:#eeede9; color:var(--ink); }
.study-detail-page .study-detail-actions>.study-interest[aria-pressed=true],.study-detail-page .study-detail-actions>.study-interest[aria-pressed=true]:hover { background:#fbf0f2; color:var(--red); border-color:#eac8ce; }
.study-action-icon { position:relative; display:block; width:20px; height:20px; }
.study-detail-page .study-detail-actions .study-action-icon>svg { position:absolute; inset:0; width:20px; height:20px; transform:none; stroke-width:1.6; }
@media(max-width:360px) { .detail-intro .study-title-row { gap:10px; } }
.study-detail-page .join-button { border-radius:8px; background:var(--red); color:#fff; text-decoration:none; border:0; }
.study-detail-page .join-button:disabled { cursor:default; opacity:.55; }
.join-note { margin:12px 0; color:var(--muted); text-align:center; font-size:12px; }
.detail-original { min-width:0; overflow-wrap:anywhere; }
.study-additional-text { margin:0; font-size:15px; line-height:1.9; white-space:pre-wrap; color:#505057; }
.participant-initial { display:grid; place-items:center; width:32px; height:32px; border:2px solid var(--paper); border-radius:50%; background:#e6e3df; font-size:12px; }
.host-fallback { display:grid; place-items:center; font-size:22px; }
.host img { overflow:hidden; }
@media(max-width:820px) { .study-detail-page { width:calc(100% - 32px); } .study-detail-page ~ .site-footer { padding-bottom:100px; } }

.host .host-portrait { grid-column:1; grid-row:1 / span 3; display:block; width:112px; height:112px; border-radius:50%; overflow:hidden; background:#e6e3df; }
.host .host-portrait img { display:block; width:100%; height:100%; }
@media(max-width:820px) { .host .host-portrait { width:88px; height:88px; } }
@media(max-width:360px) { .host .host-portrait { width:80px; height:80px; } }

@media(max-width:820px) { body:has(.study-detail-page:not(.study-edit-page)) #knet-fab { bottom:calc(100px + env(safe-area-inset-bottom)); } }

body:has(.study-detail-page:not(.study-edit-page)) { padding-top:0; }
.study-detail-page:not(.study-edit-page) { --study-header-height:64px; width:100%; margin:0; padding-top:var(--study-header-height); }
.study-hero { width:100%; height:clamp(210px,38svh,440px); margin:0; overflow:hidden; background:#dddcd5; }
.study-hero video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.study-hero-content { width:min(1160px,calc(100% - 48px)); margin:0 auto; padding-top:48px; }
.study-hero-content>.detail-intro { margin-bottom:40px; }
.study-hero-content .people-section { margin-top:0; padding-top:0; border:0; }
.study-hero-content .join-panel { top:calc(var(--study-header-height) + 24px); }
.study-hero-content .detail-section,.study-hero-content .people-section,.study-hero-content .outcomes-section { scroll-margin-top:calc(var(--study-header-height) + 24px); }
@media(max-width:1250px) { .study-detail-page:not(.study-edit-page) { --study-header-height:104px; } }
@media(max-width:820px) {
  .study-hero { height:clamp(160px,29svh,280px); }
  .study-hero-content { width:calc(100% - 32px); padding-top:32px; }
  .study-hero-content>.detail-intro { margin-bottom:32px; }
}
@media(max-width:760px) { .study-detail-page:not(.study-edit-page) { --study-header-height:100px; } }