:root{--bg:#f4f2ee;--card:#fff;--ink:#1b1c1e;--sub:#6a6d73;--line:#e4e0d8;--accent:#1f7a68;--accent-soft:#e1f0eb;--gold:#b7791f;--gold-soft:#fbf1df;--hot:#c2410c;--hot-soft:#fdece3;--radius:16px;--side:max(260px,20vw)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111315;--card:#1b1e21;--ink:#ececec;--sub:#9da1a7;--line:#2b2f33;--accent:#5fc9ae;--accent-soft:#183129;--gold:#e0b25a;--gold-soft:#3a2f1c;--hot:#f0895a;--hot-soft:#3b2519}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 "Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit}button{font:inherit}
.xbtn{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:700;font-size:14px;padding:8px 15px;border-radius:999px;white-space:nowrap;border:0;cursor:pointer}
.xbtn.big{font-size:16px;padding:13px 24px}
/* 왼쪽 20%: 프로필 + 바다 연출 */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--side);background:#04121f;color:#e8f4f8;display:flex;flex-direction:column;overflow:hidden;z-index:10}
.side canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.prof{pointer-events:none}.prof a,.prof button,.prof img{pointer-events:auto}
.prof{position:relative;z-index:2;padding:22px 20px 18px;background:linear-gradient(#04121fee 70%,#04121f00)}
.prof .av{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #7fe3ff55;box-shadow:0 0 24px #3cc8ff44;background:#0b2236}
.prof .nm{font-weight:800;font-size:19px;margin:10px 0 0;letter-spacing:-.01em}
.prof .hd{color:#8fb6c6;font-size:14px}
.prof .ff{display:flex;gap:14px;font-size:14px;color:#8fb6c6;margin:10px 0 12px}
.prof .ff b{color:#fff;font-size:15px}
.prof .live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3ddc97;margin-right:5px;box-shadow:0 0 8px #3ddc97;vertical-align:1px}
.prof .xbtn{background:#e8f4f8;color:#04121f}
.cos-tip{position:absolute;z-index:3;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .15s;background:#061827ee;border:1px solid #7fe3ff55;border-radius:10px;padding:7px 10px;font-size:13px;line-height:1.4;color:#eaf7fb;box-shadow:0 6px 20px #0008}
.cos-tip small{display:block;color:#8fc6d6;font-size:11px;margin-bottom:2px}
.cos-lb{position:absolute;z-index:2;left:0;top:0;pointer-events:none;font-size:11px;font-weight:700;white-space:nowrap;text-shadow:0 0 6px #000;transition:opacity .3s}
.side{touch-action:pan-y}
.gctl{position:absolute;right:12px;bottom:40px;z-index:5;display:flex;gap:6px}
.gctl button{width:36px;height:36px;border-radius:11px;border:1px solid #9fb8ff44;background:#0d1626d9;color:#e6efff;font-size:17px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.gctl button:hover{border-color:#a88cff;color:#fff}
.ghint{position:absolute;left:14px;bottom:46px;z-index:4;font-size:11.5px;color:#8fa6c4;pointer-events:none;max-width:55%}
.side,.feed,#ripple{transition:width .45s cubic-bezier(.2,.9,.25,1),margin-left .45s cubic-bezier(.2,.9,.25,1),left .45s cubic-bezier(.2,.9,.25,1),height .45s cubic-bezier(.2,.9,.25,1)}
body.gbig{--side:50vw}
body.gbig .side canvas{touch-action:none}
.warp{position:fixed;inset:0;width:100vw;height:100vh;z-index:200;background:#02060e;cursor:pointer}
.prof .site{display:block;margin-top:14px;font-size:13px;color:#8fb6c6;text-decoration:none}
.side .foot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 20px;font-size:11.5px;color:#6f93a3;background:linear-gradient(#04121f00,#04121fcc)}
.side .foot a{color:#9cc3d3}
/* 오른쪽 80%: 글 목록 */
.feed{margin-left:var(--side);min-height:100vh;padding:0 28px 60px}
.bar{position:sticky;top:0;z-index:5;background:var(--bg);padding:18px 0 10px;border-bottom:1px solid var(--line)}
.bar .row{display:flex;gap:10px;align-items:center}
.bar h1{font-size:18px;margin:0 8px 0 0;white-space:nowrap;letter-spacing:-.02em}
.search{flex:1;min-width:0;font:inherit;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.sel{font:inherit;font-size:14px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 2px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:12px;cursor:pointer;transition:transform .12s,border-color .15s,background .15s}
.chip b{font-size:12.5px;font-weight:700;color:var(--sub);background:var(--bg);border-radius:999px;padding:1px 8px;min-width:28px;text-align:center}
.chip:hover{border-color:var(--accent)}.chip:active{transform:scale(.96)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}.chip.on b{background:#ffffff33;color:#fff}
.grid.swap{animation:gridIn .35s ease-out}@keyframes gridIn{from{opacity:.2;transform:translateY(8px)}}
.count{color:var(--sub);font-size:13.5px;padding:12px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;padding:14px 0 30px}
.card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 15px;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.card:hover{border-color:var(--accent);box-shadow:0 10px 28px #00000014}
.card .tx{flex:1;min-width:0}
.card h2{font-size:16.5px;line-height:1.45;margin:0 0 5px;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--sub);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .th{position:relative;flex:0 0 76px;width:76px;height:76px;border-radius:12px;overflow:hidden;background:var(--line)}
.card .th img{width:100%;height:100%;object-fit:cover;display:block}
.card .th .play{width:28px;height:28px}.card .th .play:after{border-width:6px 0 6px 10px;margin-left:3px}
.card.feat{border:2px solid var(--accent)}
.meta,.m-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--sub);margin-bottom:6px}
.tag{border-radius:6px;padding:1px 7px;font-weight:600}
.t-cat{background:var(--accent-soft);color:var(--accent)}.t-star{background:var(--gold-soft);color:var(--gold)}
.t-hot{background:var(--hot-soft);color:var(--hot)}.t-buried{background:var(--gold-soft);color:var(--gold)}.t-feat{background:var(--accent);color:#fff}
.t-pin{background:var(--ink);color:var(--bg)}.t-sub{background:#7c3aed;color:#fff}
.top{padding:22px 0 6px}
.pins{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.card.pin{border:2px solid var(--ink);opacity:1}.card.pin p{display:block;-webkit-line-clamp:unset;overflow:visible}.card.pin h2{font-size:19px}.card.pin .th{flex-basis:110px;width:110px;height:110px}
.subbox{margin-top:14px;padding:16px 18px;border-radius:var(--radius);background:linear-gradient(135deg,#f3edff,#e9f6f2);border:1px solid #d9cdf7}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .subbox{background:linear-gradient(135deg,#231a38,#132a25);border-color:#3a2d5c}}
.sb-h{display:flex;align-items:center;justify-content:space-between;gap:10px}.sb-k{font-weight:800;font-size:17px}
.subbox p{margin:6px 0 10px;font-size:14.5px;color:var(--sub)}
.minis{display:flex;flex-wrap:wrap;gap:8px}
.mini{font-size:13.5px;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini:hover{border-color:var(--accent)}
.aboutm{display:none;font-size:14px;color:var(--sub);margin-bottom:12px}.aboutm b{color:var(--ink)}.aboutm .mini{display:inline-block;margin-top:6px}
.about{margin:14px 0 0;font-size:13px;color:#a9cad7}.about b{color:#fff;font-size:13.5px}
.about ul{margin:6px 0 6px;padding-left:16px}.about li{margin:2px 0}
.ab-more{color:#7fe3ff;text-decoration:none;font-weight:700}
.decks-h{font-weight:800;font-size:15px;margin:22px 0 10px;letter-spacing:.02em}
.decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.deck{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.papers{position:relative;display:block;height:118px;margin:6px 8px 10px}
.pp{position:absolute;inset:0;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 6px 18px #0000001a;overflow:hidden;
transform:translateY(calc(var(--k) * -7px)) rotate(calc((var(--k) - 1) * 4deg)) scale(calc(1 - var(--k) * .04));z-index:calc(3 - var(--k));transition:transform .45s cubic-bezier(.2,.9,.25,1.3)}
.pp img{width:100%;height:64%;object-fit:cover;display:block;background:var(--line)}
.pp i{display:block;font-style:normal;font-size:12px;line-height:1.35;padding:6px 9px;color:var(--sub);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.deck:hover .pp,.deck:focus-visible .pp{transform:translateY(calc(var(--k) * -16px - 4px)) rotate(calc((var(--k) - 1) * 9deg)) translateX(calc((var(--k) - 1) * 14px))}
.deck:active .papers{transform:scale(.94);transition:transform .1s}
.dk{display:flex;flex-direction:column;padding:0 4px}.dk b{font-size:15.5px}.dk small{color:var(--sub);font-size:12.5px;line-height:1.45}
.dk em{font-style:normal;font-size:12px;color:var(--accent);font-weight:700;margin-top:2px}
.deck.on .pp{transform:translateY(calc(var(--k) * -24px - 8px)) rotate(calc((var(--k) - 1) * 14deg)) translateX(calc((var(--k) - 1) * 26px))}
.deck.on .dk b{color:var(--accent)}
.colbar{display:none;align-items:center;gap:10px;padding:12px 0 0;font-weight:700}.colbar.show{display:flex}
.colbar small{color:var(--sub);font-weight:400}.colbar button{margin-left:auto;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer}
.card.flung{animation:none;opacity:1}
.deck.soon{cursor:default;opacity:.6}.deck.soon .pp i{text-align:center;padding-top:44px;font-weight:700}.deck.soon:hover .pp{transform:translateY(calc(var(--k) * -7px)) rotate(calc((var(--k) - 1) * 4deg)) scale(calc(1 - var(--k) * .04))}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.play:after{content:'';margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.more{text-align:center}.more button{font-weight:700;padding:10px 22px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
/* 팝업 글 창 */
.modal{position:fixed;inset:0;z-index:50;display:none}
.modal.show{display:block}
.modal .dim{position:absolute;inset:0;background:#05101acc;backdrop-filter:blur(3px);opacity:0;transition:opacity .28s}
.modal.open .dim{opacity:1}
.modal .panel{position:absolute;left:50%;top:50%;width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;background:var(--card);border-radius:20px;
box-shadow:0 30px 80px #0008;padding:30px 32px 26px;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:transform .34s cubic-bezier(.2,.9,.25,1.15),opacity .22s}
.modal.open .panel{transform:translate(-50%,-50%) scale(1);opacity:1}
.modal .x{position:sticky;top:-12px;float:right;margin:-14px -16px 0 0;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.m-title{font-size:clamp(21px,3vw,27px);line-height:1.38;margin:6px 0 14px;letter-spacing:-.02em}
.m-body{font-size:16.5px;line-height:1.85;white-space:pre-wrap}
.m-body a{color:var(--accent)}
.m-body.cut{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 7em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 7em),transparent);padding-bottom:1em}
.m-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:16px 0 4px}
.ph{position:relative;display:block;overflow:hidden;border-radius:12px;background:var(--line)}
.ph img{display:block;width:100%;max-height:420px;object-fit:cover;filter:blur(7px) saturate(.9);transform:scale(1.06);transition:filter .3s}
.ph:hover img{filter:blur(5px)}
.ph.clear img{filter:none;transform:none;max-height:none}
.m-rel{margin:26px -4px 0;padding-top:18px;border-top:1px solid var(--line)}
.m-rel h3{font-size:15px;margin:0 4px 10px;color:var(--sub);font-weight:700;letter-spacing:.02em}
.rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rel{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;text-decoration:none;background:var(--bg);opacity:0;transform:translateY(18px) scale(.96)}
.modal.open .rel,.rel.on{animation:relIn .55s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(.28s + var(--i) * .08s)}
@keyframes relIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.rel:hover{border-color:var(--accent)}
.rt{flex:0 0 48px;height:48px;border-radius:10px;overflow:hidden;background:var(--line)}.rt img{width:100%;height:100%;object-fit:cover;display:block}
.rx{min-width:0;font-size:14px;line-height:1.4}.rx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
.rc{display:block;font-size:11.5px;color:var(--accent);font-weight:700}
#mBody{transition:opacity .18s}#mBody.swap{opacity:0}
#ripple{position:fixed;top:0;right:0;bottom:0;left:var(--side);width:calc(100% - var(--side));height:100%;pointer-events:none;z-index:0}
.feed{position:relative}.bar,.grid,.more{position:relative;z-index:1}
.card{will-change:transform}
.card{opacity:0}.card.in{opacity:1;animation:cardIn .7s cubic-bezier(.2,.9,.25,1.1) backwards;animation-delay:var(--d,0s)}
@keyframes cardIn{from{opacity:0;transform:translateY(34px) scale(.95)}}
@media (prefers-reduced-motion:reduce){.card{opacity:1}.card.in{animation:none}}
.m-hint{display:none;text-align:center;color:var(--sub);font-size:12.5px;margin:14px 0 0}
@media (max-width:860px){.m-hint{display:block}.modal .panel:before{content:'';display:block;width:42px;height:5px;border-radius:3px;background:var(--line);margin:-12px auto 14px}}
.ph.ov{display:block}.ph.ov img{min-height:200px}
.ovw{position:relative;display:flex;z-index:1;margin-top:-55px}  /* 이미지 아래에 붙은 가로 띠: 높이 110px 중 위쪽 절반은 이미지 하단과 겹침 */
.ph.ov{background:#111214}.ph.ov img{border-radius:0}
.ovw .xcard{margin:0;width:100%;min-height:110px;align-items:flex-end;gap:12px;padding:12px 22px 14px 14px;border-radius:0;background:linear-gradient(#11121400,#111214d9 42%,#111214 70%);color:#fff;box-shadow:none}
.ovw .xc-go{margin-bottom:2px}
.ovw .xc-tx{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:0;align-items:baseline}
.ovw .xc-tx b{font-size:16px}.ovw .xc-tx small{grid-column:1/3;font-size:13px;line-height:1.4}
.ovw .xc-st{grid-row:1;grid-column:2;white-space:nowrap;font-size:11.5px;opacity:.7;margin:0}
.ph.ov:hover .xcard{transform:none}
.ovw .xc-ic{flex-basis:38px;height:38px;border-radius:11px;background:#fff;color:#111}.ovw .xc-ic svg{width:18px;height:18px}
.ovw .xc-tx small{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovw .xc-go{flex-basis:46px;height:46px}.ovw .xc-go i{width:9px;height:9px;margin:-4.5px 0 0 -7px;border-width:3px}
.ph .lbl{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.66);color:#fff;font-weight:700;font-size:13px;padding:7px 13px;border-radius:999px;white-space:nowrap}
.m-cta{text-align:center;margin:18px 0 4px}
.xcard{display:flex;align-items:center;gap:16px;margin:22px 0 6px;padding:20px 22px;border-radius:18px;background:var(--ink);color:var(--bg);text-decoration:none;
box-shadow:0 10px 30px #0000002a;transition:transform .2s,box-shadow .2s}
.xcard:hover{transform:translateY(-2px);box-shadow:0 16px 40px #00000038}
.xc-ic{flex:0 0 52px;height:52px;border-radius:14px;background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center}
.xc-ic svg{width:26px;height:26px}
.xc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.xc-tx b{font-size:19px;letter-spacing:-.01em}.xc-tx small{font-size:14.5px;opacity:.82}
.xc-st{font-size:13px;opacity:.65;margin-top:3px}
.xc-go{position:relative;flex:0 0 58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:radial-gradient(circle at 32% 28%,#ffffff 0,#dff7f0 22%,#5fd3b6 62%,#1f7a68 100%);
box-shadow:inset -5px -7px 12px #0b3b31aa,inset 4px 5px 8px #ffffffb0,0 6px 16px #5fd3b655;animation:xcBob 2.4s ease-in-out infinite;transform-style:preserve-3d}
.xc-go:before,.xc-go:after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #5fd3b6;animation:xcRing 1.8s ease-out infinite}
.xc-go:after{animation-delay:.9s}
.xc-go i{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -9px;border-top:3.5px solid #06302a;border-right:3.5px solid #06302a;border-radius:2px;
transform:rotate(45deg);opacity:0;animation:xcFlow 1.3s cubic-bezier(.4,0,.2,1) infinite;filter:drop-shadow(1px 1px 0 #ffffff88)}
.xc-go i:nth-child(2){animation-delay:.22s}.xc-go i:nth-child(3){animation-delay:.44s}
@keyframes xcFlow{0%{opacity:0;transform:translateX(-12px) rotate(45deg) scale(.7)}35%{opacity:1}70%{opacity:1;transform:translateX(6px) rotate(45deg) scale(1)}100%{opacity:0;transform:translateX(14px) rotate(45deg) scale(.8)}}
@keyframes xcRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.75);opacity:0}}
@keyframes xcBob{0%,100%{transform:perspective(200px) rotateY(-14deg) translateX(0)}50%{transform:perspective(200px) rotateY(14deg) translateX(4px)}}
.xcard:hover .xc-go{animation-duration:1.2s}.xcard:hover .xc-go i{animation-duration:.8s}
@media (prefers-reduced-motion:reduce){.xc-go,.xc-go:before,.xc-go:after,.xc-go i{animation:none}.xc-go i{opacity:1}.xc-go i:nth-child(1){margin-left:-14px}.xc-go i:nth-child(3){margin-left:-4px}}
@media (max-width:860px){.xc-go{flex-basis:48px;height:48px}.xcard{padding:16px;gap:12px}.xc-ic{flex-basis:44px;height:44px}.xc-tx b{font-size:17px}.xc-tx small{font-size:13.5px}}
.m-cta p{color:var(--sub);font-size:13.5px;margin:10px 0 0}
.seo{position:absolute;left:-9999px}
/* 좁은 화면: 연출 영역은 위쪽 띠로 */
@media (max-width:860px){
#ripple{left:0;width:100%}
body.gbig .side{height:68vh}.gctl{bottom:12px;right:10px}.ghint{display:none;bottom:20px}body.gbig .ghint{display:block}body.gbig .prof{opacity:.25}
.bar{position:static}.chip{font-size:14px;padding:7px 12px}
.decks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:4px 16px 8px;scrollbar-width:none}.decks::-webkit-scrollbar{display:none}.deck{flex:0 0 46%;scroll-snap-align:start}.papers{height:100px}
.about{display:none}.aboutm{display:block}.top{padding-top:14px}.pins{grid-template-columns:1fr}.card.pin .th{flex-basis:84px;width:84px;height:84px}
.side{position:relative;width:auto;height:230px}
.prof{padding:16px 16px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;background:linear-gradient(#04121fdd,#04121f55)}
.prof .av{width:52px;height:52px;grid-row:span 2}.prof .nm{margin:0;font-size:17px}.prof .ff{grid-column:1/3;margin:8px 0}.prof .xbtn{grid-column:1/3;justify-self:start}
.prof .site,.side .foot{display:none}
.feed{margin-left:0;padding:0 16px 50px}.bar h1{display:none}.grid{grid-template-columns:1fr}
.modal .panel{top:auto;bottom:0;left:0;width:100%;max-height:92vh;border-radius:20px 20px 0 0;padding:24px 18px 22px;transform:translateY(60%);}
.modal.open .panel{transform:translateY(0)}
}