/* a_stampie — 우표 도장판 스킨. 모든 규칙은 #stp 아래로 한정(사이트 공통 CSS와 충돌 방지). 색·폰트·반경은 홈페이지 변수에서만 파생한다. */ #stp{--sp-accent:var(--btn-accent-bg); --sp-card:var(--card-bg-color); --sp-border:color-mix(in srgb,var(--content-font-color) 22%,transparent); --sp-radius:var(--card-border-radius); --sp-text:var(--content-font-color); --sp-sub:color-mix(in srgb,var(--content-font-color) 66%,var(--card-bg-color)); --sp-sub2:color-mix(in srgb,var(--content-font-color) 46%,var(--card-bg-color)); --sp-soft:color-mix(in srgb,var(--form-bg-color) 90%,var(--content-font-color)); --sp-title-font:var(--title-font-family); --sp-body:var(--content-font-family); --sp-tint:color-mix(in srgb,var(--sp-accent) 14%,transparent); --sp-sheet:var(--card-bg-color); --sp-grid:color-mix(in srgb,var(--content-font-color) 7%,transparent); --sp-slot:color-mix(in srgb,var(--content-font-color) 24%,transparent); --sp-binder:var(--btn-accent-bg); --sp-star:#DF1910; --sp-on-page:oklch(from var(--bg-color) clamp(0,calc((.62 - l)*1000),1) 0 0); --sp-on-page-sub:color-mix(in srgb,var(--sp-on-page) 72%,transparent); --sp-scrim:color-mix(in srgb,var(--bg-color) 58%,transparent); --sp-edge:color-mix(in srgb,var(--sp-on-page) 22%,transparent); --sp-ok:color-mix(in srgb,var(--success-color,#54cd9a) 55%,var(--content-font-color));} #stp button{font-family:inherit} #stp .sp-wrap{max-width:1080px;margin:0 auto;padding:26px 16px 110px} #stp .btn-main{background:var(--sp-accent);color:var(--btn-accent-text);border:0;padding:10px 20px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 6px 16px -6px var(--sp-accent);transition:transform .15s} #stp .btn-main:hover{transform:translateY(-1px)} #stp .btn-ghost{background:transparent;color:var(--sp-sub);border:1px solid var(--sp-border);padding:7px 14px;border-radius:999px;font-size:13px;cursor:pointer} #stp .btn-ghost:hover{color:var(--sp-accent);border-color:var(--sp-accent)} #stp .seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--sp-border);border-radius:14px;padding:3px;background:var(--sp-soft);gap:2px} #stp .seg button{border:0;background:none;padding:6px 14px;border-radius:999px;color:var(--sp-sub);font-size:13px;cursor:pointer;white-space:nowrap} #stp .seg button.on{background:var(--sp-accent);color:var(--btn-accent-text);font-weight:600} #stp .seg button:disabled{opacity:.45;cursor:not-allowed} #stp .seg.sm button{padding:4px 11px;font-size:12px} #stp .inp{width:100%;background:var(--sp-soft);border:1px solid var(--sp-border);border-radius:10px;padding:10px 12px;color:var(--sp-text);font:inherit;outline:none;transition:border-color .15s} #stp .inp:focus{border-color:var(--sp-accent)} #stp textarea.inp{resize:vertical;min-height:90px;line-height:1.65} #stp .chk{display:inline-flex;align-items:center;gap:6px;color:var(--sp-sub);font-size:13px;cursor:pointer} #stp .chk input{accent-color:var(--sp-accent)} #stp .grp{padding:20px 0;border-top:1px solid var(--sp-border)} #stp .grp:first-of-type{border-top:0;padding-top:2px} #stp .grp:last-child{padding-bottom:2px} #stp .grp>h3{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--sp-accent)} #stp .grp>.frames,#stp .grp>.fld+.opt-grid,#stp .grp>.opt-grid{margin-bottom:14px} #stp .grp>.opt-grid:last-child,#stp .grp>.fld:last-child{margin-bottom:0} #stp .grp .opt-grid{gap:16px 22px} #stp .grp .fld{margin-bottom:0} #stp .grp>.fld{margin-bottom:16px} #stp select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sp-sub) 50%),linear-gradient(135deg,var(--sp-sub) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px;cursor:pointer} #stp .font-pv{margin-top:8px;padding:10px 14px;border:1px dashed var(--sp-border);border-radius:10px;color:var(--sp-text);font-size:18px;text-align:center;background:var(--sp-soft)} #stp #sizes{grid-template-columns:repeat(6,1fr);gap:6px} #stp #sizes .frame{padding:10px 2px 8px;min-width:0} #stp #sizes{container-type:inline-size} #stp #sizes .st-wrap{--t:min(4px,calc(((100cqw - 30px)/6 - 10px)/23.5))} #stp #sizes .fr-th{height:68px} #stp .lays{display:grid;grid-template-columns:repeat(6,1fr);gap:6px} #stp .lay{width:auto;min-width:0} @media (max-width:760px){#stp .lays{grid-template-columns:repeat(3,1fr)} } #stp .crop{margin:0 0 20px;padding:0 0 20px;border-top:0;border-bottom:1px dashed var(--sp-border)} #stp #lays.lays{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%} #stp #lays .lay{width:auto;min-width:0} #stp .st-wrap[style*="--tcc"] .cap-t{color:var(--tcc)!important} #stp .tcol{display:inline-flex;align-items:center;gap:4px} #stp .tcol input{width:38px;height:38px;padding:3px;border:1px solid var(--sp-border);border-radius:10px;background:var(--sp-soft);cursor:pointer} #stp .tcol button{border:0;background:none;color:var(--sp-sub);font-size:16px;cursor:pointer;padding:0 2px} #stp .ctl-line .seg,#stp .ctl-line select.inp{height:38px;box-sizing:border-box} #stp .ctl-line .seg{align-items:center} #stp .ctl-line select.inp{padding-top:0;padding-bottom:0} #stp .card.fold>h2{cursor:pointer;user-select:none;margin-bottom:0} #stp .card.fold>h2::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--sp-sub);border-bottom:2px solid var(--sp-sub);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s} #stp .card.fold:not(.collapsed)>h2{margin-bottom:14px} #stp .card.fold.collapsed>h2::after{transform:rotate(-45deg)} #stp .card.fold.collapsed>*:not(h2){display:none!important} #stp .vis-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap} #stp #w-vis{display:flex;flex:1 1 320px} #stp #w-vis button{flex:1} #stp .tbtn{display:flex;cursor:pointer;user-select:none} #stp .tbtn input{display:none} #stp .tbtn span{display:flex;align-items:center;padding:0 16px;border:1px solid var(--sp-border);border-radius:14px;background:var(--sp-soft);color:var(--sp-sub);font-size:13px;white-space:nowrap;transition:.15s} #stp .tbtn:hover span{border-color:var(--sp-accent);color:var(--sp-accent)} #stp .tbtn input:checked+span{background:var(--sp-accent);border-color:var(--sp-accent);color:var(--btn-accent-text);font-weight:600} #stp #w-pw{margin-top:8px;max-width:260px} #stp .tcol code{font:600 13px ui-monospace,Consolas,monospace;color:var(--sp-sub);margin-left:6px;letter-spacing:.04em} #stp .cbox{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:6px 10px;border:1px solid var(--sp-border);border-radius:10px;background:var(--sp-soft);min-height:42px} #stp .cbox input[type=color]{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;flex:none} #stp .cbox code{font:600 12.5px ui-monospace,Consolas,monospace;color:var(--sp-sub);letter-spacing:.03em} #stp .cbox .mini{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto} #stp .cbox .mini button{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--sp-card);box-shadow:0 0 0 1px var(--sp-border);background:var(--c);padding:0;cursor:pointer} #stp .cbox .mini button.on{box-shadow:0 0 0 2px var(--sp-accent)} #stp .opt-grid.four{grid-template-columns:repeat(4,1fr);gap:10px} #stp .opt-grid.four .inp{padding-left:10px;padding-right:26px;font-size:13px} @media (max-width:760px){#stp .opt-grid.four{grid-template-columns:1fr 1fr} } #stp .ctl-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:34px} #stp .ctl-line select.inp{width:auto;min-width:210px} #stp .adv{margin-top:16px;border-top:1px solid var(--sp-border);padding-top:14px} #stp .adv summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--sp-sub)} #stp .adv[open] summary{margin-bottom:16px} #stp .card>.fld,#stp .card>.opt-grid{margin-bottom:18px} #stp .lay[data-v="free"] i::after{top:12px;left:5px;right:12px;opacity:.75} #stp .lay[data-v="free"] i{border-style:dashed} #stp .w-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px} #stp .w-top h1{margin:0;font:900 26px var(--sp-title-font)} #stp .w-top p{margin:2px 0 0;color:var(--sp-sub);font-size:13px} #stp .w-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start} #stp .w-left{display:flex;flex-direction:column;gap:16px;min-width:0} #stp .card{background:var(--sp-card);border:1px solid var(--sp-border);border-radius:var(--sp-radius);padding:18px 18px 16px} #stp .card>h2{margin:0 0 14px;font:800 15px var(--sp-body);display:flex;align-items:center;gap:9px} #stp .card>h2 em{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--sp-accent);color:var(--btn-accent-text);display:grid;place-items:center;font-size:12px} #stp .card>h2 small{font-weight:400;color:var(--sp-sub);font-size:12px} #stp .fld{margin-bottom:14px} #stp .fld:last-child{margin-bottom:0} #stp .lbl{font-size:12.5px;font-weight:700;margin-bottom:6px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} #stp .lbl small{font-weight:400;color:var(--sp-sub)} #stp .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} #stp .hint{font-size:12px;color:var(--sp-sub);margin-top:5px} #stp .hint.ok{color:var(--sp-ok)} #stp .hint.bad{color:var(--sp-accent)} #stp .gchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;align-items:center;font-size:13px;color:var(--sp-sub)} #stp .gchips b{color:var(--sp-text);font-weight:600} #stp .stars{display:flex;align-items:center;gap:2px} #stp .stars button{background:none;border:0;font-size:30px;line-height:1;color:var(--sp-slot);cursor:pointer;padding:0 1px;transition:transform .12s} #stp .stars button.on{color:var(--sp-star)} #stp .stars button:hover{transform:scale(1.2) rotate(-8deg)} #stp .stars .btn-ghost{margin-left:10px;padding:3px 10px;font-size:12px} #stp .stars .val{margin-left:8px;color:var(--sp-sub);font-size:13px;font-variant-numeric:tabular-nums} #stp .sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;user-select:none} #stp .sw input{display:none} #stp .sw .tr{width:38px;height:22px;border-radius:99px;background:var(--sp-slot);position:relative;transition:.2s} #stp .sw .tr::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--white);transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} #stp .sw input:checked+.tr{background:var(--sp-accent)} #stp .sw input:checked+.tr::after{left:19px} #stp .sw-row{display:flex;gap:22px;flex-wrap:wrap} #stp .notice{margin-top:10px;padding:9px 12px;border-radius:10px;background:var(--sp-tint);color:var(--sp-accent);font-size:12.5px;display:none} #stp .notice.on{display:block} #stp .imgf{padding:12px;border:1px solid var(--sp-border);border-radius:12px;background:color-mix(in srgb,var(--sp-soft) 55%,transparent)} #stp .imgf .seg{margin-bottom:9px} #stp .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px;border:1.5px dashed var(--sp-slot);border-radius:10px;cursor:pointer;color:var(--sp-sub);font-size:13px;text-align:center} #stp .drop:hover,#stp .drop.over{border-color:var(--sp-accent);color:var(--sp-accent);background:var(--sp-tint)} #stp .drop small{font-size:11.5px;opacity:.8} #stp .imgf-pv{display:none;margin-top:10px;gap:10px;align-items:center} #stp .imgf-pv.on{display:flex} #stp .imgf-pv .th{width:54px;height:54px;border-radius:8px;overflow:hidden;background:repeating-conic-gradient(var(--sp-slot) 0 25%,transparent 0 50%) 0 0/10px 10px;flex:none} #stp .imgf-pv .th img{width:100%;height:100%;object-fit:contain;display:block} #stp .imgf-info{flex:1;font-size:12px;color:var(--sp-sub);min-width:0} #stp .imgf-info b{color:var(--sp-ok)} #stp .imgf-act{display:flex;gap:5px} #stp .imgf-act button{font-size:11.5px;padding:3px 10px;border-radius:99px;border:1px solid var(--sp-border);background:var(--sp-card);color:var(--sp-sub);cursor:pointer} #stp .imgf-act button:hover{color:var(--sp-accent);border-color:var(--sp-accent)} #stp .crop{margin-top:12px;display:none;gap:16px;align-items:flex-start;flex-wrap:wrap;padding-top:12px;border-top:1px dashed var(--sp-border)} #stp .crop.on{display:flex} #stp .crop-box{position:relative;width:176px;background:var(--black);overflow:hidden;cursor:grab;touch-action:none;border-radius:4px;outline:2px solid var(--sp-accent);outline-offset:2px;flex:none} #stp .crop-box:active{cursor:grabbing} #stp .crop-box img{position:absolute;left:0;top:0;max-width:none;object-fit:cover;pointer-events:none;user-select:none} #stp .crop-box::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 33%,rgba(255,255,255,.35) 33% calc(33% + 1px),transparent calc(33% + 1px) 66%,rgba(255,255,255,.35) 66% calc(66% + 1px),transparent calc(66% + 1px)),linear-gradient(180deg,transparent 33%,rgba(255,255,255,.35) 33% calc(33% + 1px),transparent calc(33% + 1px) 66%,rgba(255,255,255,.35) 66% calc(66% + 1px),transparent calc(66% + 1px))} #stp .crop-side{flex:1;min-width:150px;font-size:12.5px;color:var(--sp-sub)} #stp .crop-side b{display:block;color:var(--sp-text);margin-bottom:3px;font-size:13px} #stp .crop-side input[type=range]{width:100%;accent-color:var(--sp-accent);margin:10px 0 6px} #stp .frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px} #stp .fr-th{height:84px;display:flex;align-items:center;justify-content:center} #stp .fld.dim{opacity:.35;pointer-events:none} #stp .frame{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 9px;border:1.5px solid var(--sp-border);border-radius:12px;background:var(--sp-soft);cursor:pointer;color:var(--sp-sub);font-size:12px} #stp .frame .st-wrap{pointer-events:none} #stp .frame.on{border-color:var(--sp-accent);color:var(--sp-accent);font-weight:700;background:var(--sp-tint)} #stp .swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center} #stp .swatches button{width:30px;height:30px;border-radius:50%;border:2px solid var(--sp-card);box-shadow:0 0 0 1px var(--sp-border);background:var(--c);cursor:pointer} #stp .swatches button.on{box-shadow:0 0 0 2.5px var(--sp-accent)} #stp .swatches input[type=color]{width:34px;height:30px;border:0;background:none;padding:0;cursor:pointer} #stp .lays{display:flex;gap:8px;flex-wrap:wrap} #stp .lay{width:68px;padding:9px 0 7px;border:1.5px solid var(--sp-border);border-radius:10px;background:var(--sp-soft);color:var(--sp-sub);font-size:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px} #stp .lay.on{border-color:var(--sp-accent);color:var(--sp-accent);font-weight:700;background:var(--sp-tint)} #stp .lay i{display:block;width:28px;height:36px;border:1.5px solid currentColor;border-radius:3px;position:relative;opacity:.9} #stp .lay i::after{content:"";position:absolute;left:3px;right:3px;height:6px;background:currentColor;border-radius:1px} #stp .lay[data-v="bottom"] i::after{bottom:3px} #stp .lay[data-v="top"] i::after{top:3px} #stp .lay[data-v="over"] i::after{bottom:3px;opacity:.55} #stp .lay[data-v="center"] i::after{top:14px} #stp .lay[data-v="none"] i::after{display:none} #stp .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px} #stp .ed{border:1px solid var(--sp-border);border-radius:12px;overflow:hidden;background:var(--sp-soft)} #stp .ed-bar{display:flex;flex-wrap:wrap;gap:3px;padding:6px;border-bottom:1px solid var(--sp-border);background:var(--sp-card);position:relative} #stp .ed-bar button{border:0;background:none;min-width:30px;height:30px;padding:0 8px;border-radius:7px;color:var(--sp-sub);font-size:13px;cursor:pointer} #stp .ed-bar button:hover{background:var(--sp-tint);color:var(--sp-accent)} #stp .ed-bar button.on{background:var(--sp-accent);color:var(--btn-accent-text)} #stp .ed-bar .sp{width:1px;background:var(--sp-border);margin:4px 3px} #stp .ed-pop{position:absolute;z-index:20;top:42px;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:12px;padding:8px;box-shadow:0 14px 30px -10px rgba(0,0,0,.4);display:none;flex-wrap:wrap;gap:4px;max-width:300px} #stp .ed-pop.on{display:flex} #stp .ed-pop button{width:auto;min-width:0;height:auto;padding:6px 10px;font-size:13px;border:1px solid var(--sp-border);border-radius:8px;white-space:nowrap} #stp .ed-area{min-height:230px;max-height:460px;overflow:auto;padding:14px 16px;outline:none;color:var(--sp-text)} #stp .ed-area:empty::before{content:attr(data-ph);color:var(--sp-sub2)} #stp .ed-area p{margin:0 0 .6em} #stp .ed-area blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid var(--sp-accent);background:var(--sp-tint)} #stp .ed-area img{max-width:90px;max-height:90px;border-radius:6px;margin:2px;vertical-align:middle} #stp .ed-src{display:none;width:100%;min-height:230px;border:0;background:#14181a;color:#d6ead6;font:12.5px/1.6 ui-monospace,Consolas,monospace;padding:14px 16px;outline:none;resize:vertical} #stp .ed.src .ed-src{display:block} #stp .ed.src .ed-area{display:none} #stp .ed-foot{padding:7px 12px;font-size:12px;color:var(--sp-sub);border-top:1px solid var(--sp-border);background:var(--sp-card);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap} #stp .w-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px} #stp .w-pane{position:sticky;top:62px;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:var(--sp-radius);overflow:hidden} #stp .pane-tabs{display:flex;border-bottom:1px solid var(--sp-border)} #stp .pane-tabs button{flex:1;padding:12px 6px;border:0;background:none;color:var(--sp-sub);font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent} #stp .pane-tabs button.on{color:var(--sp-accent);border-color:var(--sp-accent)} #stp .pane-body{max-height:calc(100vh - 140px);overflow:auto} #stp .pv-stamp-area{padding:26px 10px 20px;background-color:var(--sp-sheet);background-image:linear-gradient(var(--sp-grid) 1px,transparent 1px),linear-gradient(90deg,var(--sp-grid) 1px,transparent 1px);background-size:22px 22px;display:flex;justify-content:center;align-items:center;min-height:360px} #stp .pv-slot{border:1.5px dashed var(--sp-slot);border-radius:6px;padding:20px 26px 28px} #stp .pv-row{padding:14px 12px 18px;border-top:1px solid var(--sp-border)} #stp .pv-row h4{margin:0 0 12px;font-size:12px;letter-spacing:.1em;color:var(--sp-sub);font-weight:700} #stp .pv-strip{display:flex;justify-content:center;align-items:center;gap:12px;padding:10px 4px 14px;background:var(--sp-sheet);border-radius:8px} #stp .pv-strip .st-wrap{--t:7.5px} #stp .pv-strip .tilted{transform:rotate(-6deg) translateY(2px)} #stp .pv-body{padding:18px 18px 22px;min-height:300px} #stp .pv-empty{color:var(--sp-sub2);text-align:center;padding:60px 10px;font-size:13px} #stp .rbody{word-break:break-word} #stp .rbody img.zoom{max-width:100%;border-radius:10px;cursor:zoom-in;display:block;margin:.4em 0} #stp .rbody blockquote.tg-quote{margin:1em 0;padding:12px 16px;border-left:4px solid var(--sp-accent);background:var(--sp-tint);border-radius:0 10px 10px 0;font-style:italic} #stp .rbody .tg-bubble{display:inline-block;position:relative;background:var(--white);color:var(--gray-800);border:2px solid var(--gray-800);border-radius:18px;padding:8px 16px;margin:6px 0 14px;font-weight:600;box-shadow:3px 3px 0 var(--gray-800)} #stp .rbody .tg-bubble::after{content:"";position:absolute;left:22px;bottom:-12px;width:14px;height:14px;background:var(--white);border-right:2px solid var(--gray-800);border-bottom:2px solid var(--gray-800);transform:rotate(45deg) skew(10deg,10deg)} #stp .rbody hr.tg-line{border:0;height:12px;margin:1.2em 0;background:radial-gradient(circle,var(--sp-accent) 2.2px,transparent 2.8px) center/18px 12px repeat-x} #stp .rbody mark.tg-mark{background:linear-gradient(transparent 55%,var(--warning-color) 55%);color:inherit;padding:0 2px} #stp .rbody .tg-sub{display:block;width:fit-content;margin:10px auto;background:var(--black);color:var(--white);padding:5px 16px;border-radius:4px;letter-spacing:.03em;font-size:14px} #stp .emo{display:inline-block;font-size:1.45em;line-height:1;vertical-align:-.18em;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))} #stp .sl{position:relative;margin:.6em 0 1em;border-radius:12px;overflow:hidden;background:var(--black);user-select:none} #stp .sl-vp{overflow:hidden} #stp .sl-track{display:flex;transition:transform .4s cubic-bezier(.4,.1,.2,1)} #stp .sl-it{flex:0 0 100%;display:grid;place-items:center;aspect-ratio:4/3;max-height:420px} #stp .sl-it img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block} #stp .sl-prev,#stp .sl-next{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:var(--white);font-size:20px;cursor:pointer;line-height:1} #stp .sl-prev{left:10px} #stp .sl-next{right:10px} #stp .sl-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px} #stp .sl-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer} #stp .sl-dots i.on{background:var(--white);width:18px;border-radius:4px} #stp .sl-cnt{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.55);color:var(--white);border-radius:99px;font-size:11px;padding:2px 9px} #stp .lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.86);display:none;place-items:center;cursor:zoom-out;padding:20px} #stp .lb.on{display:grid} #stp .lb img{max-width:100%;max-height:100%;border-radius:8px} #stp .w-top h1,#stp .w-top p{color:var(--sp-on-page)} #stp .w-top .btn-ghost,#stp .w-actions .btn-ghost,#stp .l-tools .chk,#stp .l-tools .tilt{color:var(--sp-on-page-sub)} #stp .w-top .btn-ghost,#stp .w-actions .btn-ghost{border-color:var(--sp-edge)} #stp .btn-main{border:1px solid var(--sp-edge);box-shadow:0 6px 16px -8px #000} #stp .chip.on{background:var(--btn-accent-bg);color:var(--btn-accent-text);border-color:var(--sp-edge)} #stp i.fa-solid:not(:only-child){margin-right:.45em} #stp .stars button i{margin:0!important} #stp .st-wrap[style*="--sff"] :is(.cap-s,.st-badge,.st-denom){font-family:var(--sff)} #stp .bgm{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120px);z-index:60;display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--sp-card) 92%,transparent);backdrop-filter:blur(10px);border:1px solid var(--sp-border);border-radius:99px;padding:8px 10px 8px 18px;box-shadow:0 14px 34px -10px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.3,1.3,.5,1);max-width:calc(100vw - 24px)} #stp .bgm.on{transform:translate(-50%,0)} #stp .bgm .eq{display:flex;align-items:flex-end;gap:2.5px;height:18px} #stp .bgm .eq i{width:3px;height:30%;background:var(--sp-accent);border-radius:2px} #stp .bgm.play .eq i{animation:eq .9s ease-in-out infinite} #stp .bgm.play .eq i:nth-child(2){animation-delay:-.3s} #stp .bgm.play .eq i:nth-child(3){animation-delay:-.6s} #stp .bgm.play .eq i:nth-child(4){animation-delay:-.15s} @keyframes eq{0%,100%{height:25%}50%{height:100%}} #stp .bgm .nm{font-size:12.5px;color:var(--sp-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} #stp .bgm .nm b{color:var(--sp-text);margin-right:6px;letter-spacing:.1em;font-size:11px} #stp .bgm button{border:0;background:var(--sp-accent);color:var(--btn-accent-text);font-weight:700;font-size:13px;padding:8px 16px;border-radius:99px;cursor:pointer;min-width:84px} #stp .toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-20px);background:var(--sp-text);color:var(--sp-card);padding:10px 20px;border-radius:99px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.35s;z-index:120} #stp .toast.on{opacity:1;transform:translate(-50%,0)} @media (max-width:900px){#stp .grid{--gt:7.3px;--cols:9} #stp .w-grid{grid-template-columns:1fr} #stp .w-pane{position:static;order:-1} #stp .pane-body{max-height:none} #stp .pv-stamp-area{min-height:300px} } @media (max-width:760px){#stp .grid{--gt:8px;--cols:4} #stp .binder{width:22px} #stp .binder i{width:11px;height:11px} #stp .sheet{padding:14px 10px 12px} #stp .opt-grid,#stp .row2{grid-template-columns:1fr} } #stp{--sp-paper:color-mix(in srgb,var(--card-bg-color) 84%,var(--white)); --sp-line:color-mix(in srgb,var(--content-font-color) 18%,transparent); --sp-title:var(--title-font-family); --sp-accent-ink:var(--btn-accent-text); --sp-soft:color-mix(in srgb,var(--form-bg-color) 80%,var(--white));} #stp .st-wrap{--t:15px;--ff:var(--sp-title);--sff:var(--ff);--al:center;--ta:center;--m:.95em;--tc:inherit;--ch:3em;position:relative;font-size:var(--t);width:calc(var(--nx)*1em);height:calc(var(--ny)*1em);flex:none;line-height:1.2;text-align:left} #stp .st-wrap[data-align="left"]{--al:flex-start;--ta:left} #stp .st-wrap[data-align="right"]{--al:flex-end;--ta:right} #stp .st-sh{width:100%;height:100%;filter:drop-shadow(0 .05em .03em rgba(0,0,0,.28)) drop-shadow(0 .5em .55em rgba(0,0,0,.26))} #stp .st{position:relative;width:100%;height:100%;color:var(--st-ink);--pc:color-mix(in srgb,var(--ac) 26%,var(--st-c));background:var(--pat,linear-gradient(#0000,#0000)),radial-gradient(130% 100% at 25% 15%,rgba(255,255,255,.2),transparent 60%),repeating-linear-gradient(103deg,rgba(0,0,0,.022) 0 .06em,transparent .06em .21em),var(--st-c);-webkit-mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 1em) calc(100% - 1em) no-repeat,radial-gradient(circle .3em at 50% 50%,#0000 96%,#000) -.5em -.5em/1em 1em;mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 1em) calc(100% - 1em) no-repeat,radial-gradient(circle .3em at 50% 50%,#0000 96%,#000) -.5em -.5em/1em 1em} #stp .st::after{content:"";position:absolute;inset:0;background:none;pointer-events:none;z-index:4} #stp .st-in{position:absolute;inset:var(--m);display:flex;flex-direction:column;gap:var(--gap,.42em);z-index:2} #stp .st-img{position:relative;flex:1;min-height:0;min-width:0} #stp .st-pic{position:absolute;inset:var(--pad,0);overflow:hidden;background-color:color-mix(in srgb,var(--st-ink) 14%,transparent)} #stp .st-pic img{position:absolute;left:0;top:0;max-width:none;display:block;object-fit:cover} #stp .st-empty{position:absolute;inset:0;display:grid;place-items:center;font:700 .6em/1 var(--sp-body);letter-spacing:.3em;opacity:.45} #stp .st-cap{flex:none;height:var(--ch);display:flex;flex-direction:column;justify-content:center;align-items:var(--al);text-align:var(--ta);gap:.24em;min-width:0;padding:0 .1em .05em;--pc:color-mix(in srgb,var(--ac-ink) 18%,var(--ac))} #stp .cap-t{font-size:var(--ts,1em);line-height:1.08;font-family:var(--ff);letter-spacing:-.01em;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--lc,2);-webkit-box-orient:vertical;word-break:keep-all;color:var(--tc)} #stp .st-wrap:not([style*="--tcc"]) .cap-t{color:inherit} #stp .cap-s{font-size:.6em;line-height:1;font-family:var(--sff);letter-spacing:.18em;color:var(--ac);white-space:nowrap} #stp .cap-s i{font-style:normal;opacity:.28} #stp .cap-ti{max-width:94%;max-height:2.15em;object-fit:contain} #stp .st-badge{position:absolute;right:-.2em;top:-.25em;z-index:7;width:3.2em;height:3.2em;font-size:.85em;line-height:1;font-family:var(--sff);border-radius:50%;background:var(--ac);color:var(--ac-ink);display:grid;place-items:center;transform:rotate(12deg);box-shadow:0 .15em .35em rgba(0,0,0,.32);outline:.09em dashed color-mix(in srgb,var(--ac-ink) 60%,transparent);outline-offset:-.32em} #stp .st-wrap[data-tp="none"] .st-cap{display:none} #stp .st-wrap[data-tp="top"] .st-in{flex-direction:column-reverse} #stp .st-wrap:is([data-tp="over"],[data-tp="otop"],[data-tp="center"],[data-tp="free"]) .st-cap{position:absolute;left:0;right:0;height:auto;color:var(--white);text-shadow:0 1px 3px rgba(0,0,0,.5)} #stp .st-wrap:is([data-tp="over"],[data-tp="otop"],[data-tp="center"],[data-tp="free"]) .cap-s{color:var(--sp-star)} #stp .st-wrap[data-tp="over"] .st-cap{bottom:0;padding:2.2em 1.1em 1.05em} #stp .st-wrap[data-tp="otop"] .st-cap{top:0;padding:1.05em 1.1em 2.2em} #stp .st-wrap[data-tp="center"]{--ts:1.45em} #stp .st-wrap[data-tp="center"] .st-cap{inset:0;background:rgba(0,0,0,.3);padding:1em} #stp .st-wrap[data-tp="center"] .cap-ti{max-height:4.2em} #stp .st-wrap[data-tp="free"]{--ts:1.25em} #stp .st-wrap[data-tp="free"] .st-cap{left:calc(var(--tx)*1%);right:auto;top:calc(var(--ty)*1%);transform:translate(-50%,-50%) rotate(var(--cr,0deg)) scale(var(--ck,1));width:max-content;max-width:88%;align-items:center;text-align:center;color:var(--tc,var(--white));--lc:3;z-index:3} #stp .st-free{position:absolute;z-index:3;transform:translate(-50%,-50%) rotate(var(--fr,0deg)) scale(var(--fk,1));left:calc(var(--fx)*1%);top:calc(var(--fy)*1%)} #stp .st-ti-free{width:100%;display:block;pointer-events:none} #stp .st-free .st-badge{position:static} #stp .st-free .cap-s{font-size:.95em;text-shadow:0 1px 3px rgba(0,0,0,.5)} #stp #pvStamp .st-free,#stp #pvStamp .st-wrap[data-tp="free"] .st-cap{cursor:grab;outline:1.5px dashed var(--sp-accent);outline-offset:3px;touch-action:none} #stp .st-wrap[data-l="bleed"]{--m:0em} #stp .st-wrap[data-l="split"]{--m:0em;--gap:0em;--ts:1.08em} #stp .st-wrap[data-l="split"] .st-cap{height:40%;padding:.6em 1em 1em;background:var(--pat,linear-gradient(#0000,#0000)),var(--ac);color:var(--ac-ink);gap:.42em} #stp .st-wrap[data-l="split"][data-tp="top"] .st-cap{padding:1em 1em .6em} #stp .st-wrap[data-l="split"] .cap-t{background:var(--st-c);color:var(--st-ink);padding:.16em .45em .12em;width:fit-content} #stp .st-wrap[data-l="split"] .cap-s{color:var(--ac-ink)} #stp .st-wrap[data-l="band"]{--m:0em;--gap:0em;--ts:1.85em} #stp .st-wrap[data-l="band"] .st-img{--pad:.85em .85em .5em} #stp .st-wrap[data-l="band"][data-tp="top"] .st-img{--pad:.5em .85em .85em} #stp .st-wrap[data-l="band"] .st-cap{height:36%;padding:.4em 1em .95em;background:var(--pat,linear-gradient(#0000,#0000)),var(--ac);color:var(--ac-ink);gap:.38em;justify-content:flex-end} #stp .st-wrap[data-l="band"][data-tp="top"] .st-cap{padding:.95em 1em .4em;justify-content:flex-start} #stp .st-wrap[data-l="band"] .cap-t{line-height:.94;letter-spacing:-.03em} #stp .st-wrap[data-l="band"] .cap-s{color:var(--ac-ink);opacity:.85} #stp .st-wrap[data-l="side"]{--m:0em;--gap:0em;--ts:1.5em} #stp .st-wrap[data-l="side"] .st-in{flex-direction:row} #stp .st-wrap[data-l="side"][data-tp="top"] .st-in{flex-direction:row-reverse} #stp .st-wrap[data-l="side"] .st-img{--pad:.85em .5em .85em .85em} #stp .st-wrap[data-l="side"][data-tp="top"] .st-img{--pad:.85em .85em .85em .5em} #stp .st-wrap[data-l="side"] .st-cap{width:3.7em;height:auto;writing-mode:vertical-rl;padding:1em .3em;background:var(--pat,linear-gradient(#0000,#0000)),var(--ac);color:var(--ac-ink);gap:.5em;justify-content:flex-start} #stp .st-wrap[data-l="side"] .cap-t{display:block;white-space:nowrap;text-overflow:ellipsis;max-height:100%} #stp .st-wrap[data-l="side"] .cap-s{color:var(--ac-ink);letter-spacing:.1em} #stp .st-wrap[data-l="side"] .cap-ti{max-width:2.6em;max-height:80%} #stp .st-wrap:is([data-l="frame"],[data-l="band"],[data-l="side"],[data-l="info"])[data-sh="oval"] .st-pic{border-radius:50%} #stp .st-wrap:is([data-l="frame"],[data-l="band"],[data-l="side"],[data-l="info"])[data-sh="round"] .st-pic{border-radius:1.4em} #stp .st-wrap[data-pat="dots"] :is(.st,.st-cap){--pat:radial-gradient(circle,var(--pc) .14em,transparent .16em) 0 0/.7em .7em} #stp .st-wrap[data-pat="wave"] :is(.st,.st-cap){--pat:radial-gradient(circle at 50% 100%,transparent .3em,var(--pc) .32em .44em,transparent .46em) 0 0/1em .5em} #stp .st-wrap[data-pat="stripe"] :is(.st,.st-cap){--pat:repeating-linear-gradient(135deg,var(--pc) 0 .13em,transparent .13em .5em)} #stp .st-wrap[data-pat="grid"] :is(.st,.st-cap){--pat:linear-gradient(var(--pc) .07em,transparent .07em) 0 0/.8em .8em,linear-gradient(90deg,var(--pc) .07em,transparent .07em) 0 0/.8em .8em} #stp .st-wrap[data-pat="star"] :is(.st,.st-cap){--pat:radial-gradient(circle,var(--pc) .09em,transparent .11em) 0 0/.5em .5em,radial-gradient(circle,var(--pc) .09em,transparent .11em) .25em .25em/.5em .5em} #stp .st-hatch{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--st-c) 0 .32em,color-mix(in srgb,var(--st-ink) 16%,var(--st-c)) .32em .64em)} #stp .st-hatch span{font:700 .72em/1 var(--sp-body);letter-spacing:.3em;padding:.5em .4em .5em .7em;background:var(--st-c);color:var(--st-ink);white-space:nowrap} #stp .st-top,#stp .st-fields,#stp .st-stub,#stp .st-edge{display:none} #stp .st-wrap[data-cut="stamp"][data-mid="v"] .st{-webkit-mask:none;mask:radial-gradient(circle .3em at var(--mpx,50%) 50%,#0000 96%,#000) 0 -.5em/100% 1em repeat-y,radial-gradient(circle .3em at 50% 50%,#0000 96%,#000) -.5em -.5em/1em 1em,linear-gradient(#000 0 0) 50% 50%/calc(100% - 1em) calc(100% - 1em) no-repeat;mask-composite:intersect,add,add} #stp .st-wrap[data-cut="stamp"][data-mid="h"] .st{-webkit-mask:none;mask:radial-gradient(circle .3em at 50% var(--mpy,50%),#0000 96%,#000) -.5em 0/1em 100% repeat-x,radial-gradient(circle .3em at 50% 50%,#0000 96%,#000) -.5em -.5em/1em 1em,linear-gradient(#000 0 0) 50% 50%/calc(100% - 1em) calc(100% - 1em) no-repeat;mask-composite:intersect,add,add} #stp .st-wrap[data-cut="oval"] .st{-webkit-mask:none;mask:none;clip-path:var(--clip)} #stp .st-wrap[data-cut="oval"][data-l="frame"]{--m:.95em} #stp .st-wrap[data-cut="oval"][data-l="frame"] .st-pic{border-radius:50%} #stp .st-wrap[data-l="frame"]:is([data-cut="notch"],[data-cut="zig"],[data-cut="scallop"],[data-cut="stub"]),#stp .st-wrap[data-l="info"]:is([data-cut="notch"],[data-cut="zig"],[data-cut="scallop"],[data-cut="stub"]){--m:1em} #stp .st-wrap[data-cut="notch"] .st{-webkit-mask:none;mask:radial-gradient(circle .9em at 0 0,#0000 97%,#000) 0 0/51% 51% no-repeat,radial-gradient(circle .9em at 100% 0,#0000 97%,#000) 100% 0/51% 51% no-repeat,radial-gradient(circle .9em at 0 100%,#0000 97%,#000) 0 100%/51% 51% no-repeat,radial-gradient(circle .9em at 100% 100%,#0000 97%,#000) 100% 100%/51% 51% no-repeat;mask-composite:add} #stp .st-wrap[data-cut="zig"] .st{-webkit-mask:none;mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/.8em .4em round no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/.8em .4em round no-repeat,linear-gradient(#000 0 0) 0 50%/100% calc(100% - .8em) no-repeat;mask-composite:add} #stp .st-wrap[data-cut="zig"][data-ori="h"] .st{mask:conic-gradient(from 45deg at 0 50%,#000 90deg,#0000 0) 0 0/.4em .8em no-repeat round,conic-gradient(from 225deg at 100% 50%,#000 90deg,#0000 0) 100% 0/.4em .8em no-repeat round,linear-gradient(#000 0 0) 50% 0/calc(100% - .8em) 100% no-repeat;mask-composite:add} #stp .st-wrap[data-cut="scallop"] .st{-webkit-mask:none;mask:radial-gradient(circle .4em at 50% 100%,#000 96%,#0000) 0 0/.8em .4em round no-repeat,radial-gradient(circle .4em at 50% 0,#000 96%,#0000) 0 100%/.8em .4em round no-repeat,linear-gradient(#000 0 0) 0 50%/100% calc(100% - .8em) no-repeat;mask-composite:add} #stp .st-wrap[data-cut="scallop"][data-ori="h"] .st{mask:radial-gradient(circle .4em at 100% 50%,#000 96%,#0000) 0 0/.4em .8em no-repeat round,radial-gradient(circle .4em at 0 50%,#000 96%,#0000) 100% 0/.4em .8em no-repeat round,linear-gradient(#000 0 0) 50% 0/calc(100% - .8em) 100% no-repeat;mask-composite:add} #stp .st-wrap[data-cut="stub"]{--cut:72%} #stp .st-wrap[data-cut="stub"][data-ori="v"]{--cut:74%} #stp .st-wrap[data-cut="stub"] .st{border-radius:.7em;overflow:hidden;-webkit-mask:none;mask:radial-gradient(circle .6em at var(--cut) 0,#0000 96%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle .6em at var(--cut) 100%,#0000 96%,#000) 0 100%/100% 51% no-repeat;mask-composite:add} #stp .st-wrap[data-cut="stub"][data-ori="v"] .st{mask:radial-gradient(circle .6em at 0 var(--cut),#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle .6em at 100% var(--cut),#0000 96%,#000) 100% 0/51% 100% no-repeat} #stp .st-wrap[data-cut="stub"] .st::before{content:"";position:absolute;inset:.8em auto .8em var(--cut);width:0;border-left:.1em dashed color-mix(in srgb,var(--st-ink) 45%,transparent);z-index:3;pointer-events:none} #stp .st-wrap[data-cut="stub"][data-ori="v"] .st::before{inset:var(--cut) .8em auto .8em;width:auto;height:0;border-left:0;border-top:.1em dashed color-mix(in srgb,var(--st-ink) 45%,transparent)} #stp .st-wrap[data-cut="stub"][data-ori="h"] .st-in{right:calc(100% - var(--cut) + 1em)} #stp .st-wrap[data-cut="stub"][data-ori="v"] .st-in{bottom:calc(100% - var(--cut) + 1em)} #stp .st-wrap[data-cut="stub"] .st-stub{display:flex;position:absolute;z-index:3;inset:1em .9em 1em calc(var(--cut) + .6em);flex-direction:column;justify-content:space-between;align-items:center;text-align:center;color:var(--st-ink);gap:.4em} #stp .st-wrap[data-cut="stub"][data-ori="v"] .st-stub{inset:calc(var(--cut) + .6em) 1em .9em 1em;flex-direction:row} #stp .st-stub b{font:800 .48em/1.2 var(--sp-body);letter-spacing:.22em;white-space:nowrap} #stp .st-wrap[data-ori="h"] .st-stub b{writing-mode:vertical-rl} #stp .st-stub strong{font-size:1.5em;line-height:.9;font-weight:400;font-family:var(--sff)} #stp .st-stub span{font:700 .55em/1 var(--sp-body);letter-spacing:.12em;opacity:.75} #stp .st-stub i{display:block;width:100%;height:2.2em;flex:none;background:repeating-linear-gradient(90deg,currentColor 0 .08em,transparent .08em .2em,currentColor .2em .26em,transparent .26em .38em,currentColor .38em .52em,transparent .52em .62em);opacity:.85} #stp .st-wrap[data-ori="v"] .st-stub i{width:4em;height:100%} #stp .st-wrap[data-cut="film"] .st{border-radius:.35em;overflow:hidden;background:var(--st-c);-webkit-mask:none;mask:linear-gradient(90deg,#000 .3em,#0000 0 .8em,#000 0) 0 .25em/1.1em .65em round no-repeat,linear-gradient(#000 .3em,#0000 0 .85em,#000 0) 0 0/100% 1.15em no-repeat,linear-gradient(90deg,#000 .3em,#0000 0 .8em,#000 0) 0 calc(100% - .25em)/1.1em .65em round no-repeat,linear-gradient(#000 .3em,#0000 0 .85em,#000 0) 0 100%/100% 1.15em no-repeat,linear-gradient(#000 0 0) 0 50%/100% calc(100% - 2.1em) no-repeat;mask-composite:add} #stp .st-wrap[data-cut="film"][data-ori="v"] .st{mask:linear-gradient(#000 .3em,#0000 0 .8em,#000 0) .25em 0/.65em 1.1em no-repeat round,linear-gradient(90deg,#000 .3em,#0000 0 .85em,#000 0) 0 0/1.15em 100% no-repeat,linear-gradient(#000 .3em,#0000 0 .8em,#000 0) calc(100% - .25em) 0/.65em 1.1em no-repeat round,linear-gradient(90deg,#000 .3em,#0000 0 .85em,#000 0) 100% 0/1.15em 100% no-repeat,linear-gradient(#000 0 0) 50% 0/calc(100% - 2.1em) 100% no-repeat} #stp .st-wrap[data-cut="film"] .st::after{display:none} #stp .st-wrap[data-cut="film"][data-ori="h"]{--m:1.75em .8em 1.45em} #stp .st-wrap[data-cut="film"][data-ori="v"]{--m:.8em 1.45em .8em 1.75em} #stp .st-wrap[data-cut="film"] .st-pic{border-radius:.25em} #stp .st-wrap[data-cut="film"] .st-edge{display:flex;position:absolute;z-index:3;left:1em;right:1em;top:1.18em;justify-content:space-between;color:var(--ac);white-space:nowrap} #stp .st-wrap[data-cut="film"][data-ori="v"] .st-edge{writing-mode:vertical-rl;left:1.18em;right:auto;top:1em;bottom:1em;transform:rotate(180deg)} #stp .st-edge span{font:800 .4em/1 var(--sp-body);letter-spacing:.24em} #stp .st-wrap:is([data-l="info"],[data-l="admit"]) :is(.st-top,.st-fields){display:flex} #stp .st-top{justify-content:space-between;gap:.5em;padding-bottom:.35em;border-bottom:.08em solid currentColor} #stp .st-top span{font:800 .44em/1 var(--sp-body);letter-spacing:.22em;white-space:nowrap} #stp .st-fields{justify-content:space-between;gap:.5em;padding-top:.4em;border-top:.06em dashed color-mix(in srgb,var(--st-ink) 55%,transparent)} #stp .st-fields span{display:flex;flex-direction:column;gap:.25em;font-size:.72em;line-height:1;font-family:var(--sff);white-space:nowrap} #stp .st-fields small{font:800 .55em/1 var(--sp-body);letter-spacing:.18em;opacity:.6} #stp .st-wrap[data-l="info"]{--ts:1.1em;--gap:.38em} #stp .st-wrap[data-l="info"] .st-cap{height:auto} #stp .st-wrap[data-l="admit"]{--ts:1.95em;--lc:3;--gap:.45em} #stp .st-wrap[data-l="admit"] .st-img{display:none} #stp .st-wrap[data-l="admit"] .st-cap{flex:1;height:auto} #stp .st-wrap[data-l="admit"] .cap-t{line-height:.96;letter-spacing:-.02em} #stp .st-wrap[data-l="admit"] .st-fields span:last-child{font-size:1.2em} #stp.stp-list .sp-wrap{max-width:none;padding:0;min-height:100svh;display:flex;flex-direction:column} #stp .lp-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px;padding:22px clamp(16px,3vw,48px) 0;border-bottom:1px solid var(--sp-edge);margin-bottom:8px} #stp .chips{display:flex;flex-wrap:wrap;gap:2px} #stp .chip{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 14px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;color:var(--sp-on-page-sub);font:600 14px/1 var(--sp-body);cursor:pointer} #stp .chip:hover{color:var(--sp-on-page)} #stp .chip em{font:700 11px/1 var(--sp-body);font-style:normal;padding:3px 7px;border-radius:99px;background:var(--sp-edge);color:var(--sp-on-page-sub);font-variant-numeric:tabular-nums} #stp .chip.on{color:var(--sp-on-page);border-color:var(--sp-on-page)} #stp .chip.on em{background:var(--sp-on-page);color:var(--bg-color)} #stp .pmi{width:30px;height:17px;flex:none} #stp .l-opts{display:flex;align-items:center;gap:8px;padding-bottom:6px} #stp .vseg{display:inline-flex;gap:2px;padding:3px;border-radius:99px;border:1px solid var(--sp-edge)} #stp .ibtn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--sp-edge);background:var(--sp-scrim);color:var(--sp-on-page-sub);cursor:pointer;font-size:14px;text-decoration:none} #stp .ibtn:hover{color:var(--sp-on-page)} #stp .ibtn:disabled{opacity:.35;cursor:default} #stp .vseg .ibtn{width:36px;height:36px;border-color:transparent;background:none} #stp .vseg .ibtn.on{background:var(--sp-on-page);color:var(--bg-color)} #stp .ibtn i.fa-solid{margin:0!important} #stp .vdiv{width:1px;height:26px;background:var(--sp-edge);margin:0 6px} #stp .lp-tools .rnd-only{display:none} #stp .lp-tools.is-rnd .rnd-only{display:grid} #stp .btn-stamp{display:inline-flex;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(0 6px 10px rgba(0,0,0,.35));transition:transform .25s cubic-bezier(.34,1.5,.64,1);cursor:pointer;background:none;border:0;padding:0} #stp .btn-stamp:hover{transform:rotate(-3deg) translateY(-2px)} #stp .btn-stamp:focus-visible{outline:2px solid var(--sp-on-page);outline-offset:4px} #stp .bs-face{display:block;width:40px;height:50px;background:radial-gradient(120% 100% at 20% 0%,rgba(255,255,255,.12),transparent 60%),var(--sp-accent);-webkit-mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 10px) calc(100% - 10px) no-repeat,radial-gradient(circle 3px at 50% 50%,#0000 96%,#000) -5px -5px/10px 10px;mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 10px) calc(100% - 10px) no-repeat,radial-gradient(circle 3px at 50% 50%,#0000 96%,#000) -5px -5px/10px 10px} #stp .wall{position:relative;flex:1;display:flex;flex-direction:column} #stp .bgpm{position:absolute;inset:0;pointer-events:none;overflow:hidden} #stp .bgpm span{position:absolute;width:clamp(180px,22vw,320px);color:var(--sp-on-page);opacity:.07} #stp .bgpm svg{width:100%;display:block} #stp .grid{--gt:10px;position:relative;display:grid;grid-template-columns:repeat(auto-fill,calc(6*var(--gt)));grid-auto-rows:calc(6*var(--gt));grid-auto-flow:dense;justify-content:center;align-content:start;flex:1;padding:14px 0 10px;min-height:calc(6*var(--gt)*5)} #stp .cell{position:relative;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent} #stp .grid .st-wrap{--t:var(--gt);transition:transform .6s cubic-bezier(.34,1.5,.64,1)} #stp .wall[data-mode="random"] .grid .st-wrap{transform:translate(calc(var(--rx)*10px),calc(var(--ry)*8px)) rotate(calc(var(--rr)*5deg))} #stp .cell:hover{z-index:9} #stp .cell:not(.next):hover .st-wrap{transform:translateY(-6px) rotate(0) scale(1.04)!important} #stp .cell.just .st-wrap{animation:stick 1s cubic-bezier(.3,.7,.4,1) backwards} @keyframes stick{0%{transform:translateY(-110px) scale(1.7) rotate(-14deg);opacity:0}45%{opacity:1}60%{transform:translateY(0) scale(1.1) rotate(3deg)}78%{transform:scale(.93)}} #stp .pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:auto;padding-top:14px;font:600 11px/1 var(--sp-body);letter-spacing:.22em;color:var(--sp-on-page-sub);position:relative} #stp .pager button{width:40px;height:40px;border-radius:50%;border:1px solid var(--sp-edge);background:transparent;color:var(--sp-on-page);display:grid;place-items:center;cursor:pointer} #stp .pager button:disabled{opacity:.35;cursor:default} #stp .pager .dots{display:flex;gap:6px;align-items:center} #stp .pager .dots i{width:7px;height:7px;border-radius:50%;background:var(--sp-edge);cursor:pointer} #stp .pager .dots i.on{background:var(--sp-on-page);width:18px;border-radius:4px} #stp .pager i.fa-solid{margin:0!important} @media (max-width:760px){#stp .lp-tools{flex-direction:column-reverse;align-items:stretch} #stp .chips{overflow-x:auto;flex-wrap:nowrap} #stp .l-opts{justify-content:flex-end} #stp .vdiv{display:none} #stp .grid{--gt:8px} } #stp .card{border:0} #stp .card>h2{gap:12px} #stp .card>h2 em{width:32px;height:32px;border-radius:0;flex:none;display:grid;place-items:center;font:800 12px/1 var(--sp-body);-webkit-mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 8px) calc(100% - 8px) no-repeat,radial-gradient(circle 2.4px at 50% 50%,#0000 96%,#000) -4px -4px/8px 8px;mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 8px) calc(100% - 8px) no-repeat,radial-gradient(circle 2.4px at 50% 50%,#0000 96%,#000) -4px -4px/8px 8px} #stp .inp{min-height:44px} #stp .seg{border-radius:12px} #stp .seg button{border-radius:9px;min-height:34px} #stp .stars button.on{color:var(--sp-accent)} #stp .frames.cuts{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px} #stp #cuts .frame{padding:10px 2px 8px;min-width:0} #stp #cuts .fr-th{height:80px} #stp #cuts .st-wrap{--t:4px} #stp .mp-r{display:flex;align-items:center;gap:10px;flex:1 1 220px;font-size:12.5px;font-weight:700;color:var(--sp-sub)} #stp .mp-r input{flex:1;accent-color:var(--sp-accent)} #stp .mp-r output{font:700 12.5px/1 ui-monospace,Consolas,monospace;min-width:3.2em;text-align:right} #stp .pv-stamp-area{background-image:none;background-color:var(--sp-paper)} #stp .pv-strip{background:var(--sp-paper);background-image:none} @media (max-width:760px){#stp .frames.cuts{grid-template-columns:repeat(4,minmax(0,1fr))} } #stp #v.sp-wrap{max-width:none;padding:0;position:relative;min-height:100svh} /* 배경 이미지: OTT 의 .back-img 와 같은 규칙 (고정 · 위쪽 70vh · 아래로 갈수록 투명해지며 어두운 페이지 배경으로 이어짐 · 밝기 0.7) */ #stp .v-bg{position:fixed;width:105vw;height:70vh;left:-10px;top:-10px;z-index:0;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;-webkit-mask-image:linear-gradient(black,transparent);mask-image:linear-gradient(black,transparent);filter:brightness(.7);pointer-events:none} #stp .vg-nav{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:20px clamp(18px,5vw,25px)} #stp .vg-nav .ctl{display:flex;gap:6px;align-items:center} #stp .vg-nav .ibtn{width:42px;height:42px;backdrop-filter:blur(8px)} #stp .vg{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 20px 0;color:var(--sp-on-page)} #stp .vg-art{position:relative;width:min(560px,100%);height:420px} #stp .vg-pm{position:absolute;left:50%;top:52%;width:min(640px,120%);color:var(--sp-on-page);opacity:.08;transform:translate(-50%,-50%) rotate(-8deg);pointer-events:none} #stp .vg-pm svg{width:100%;display:block} #stp .vg-poster{position:absolute;left:8%;top:30px;width:min(230px,44%);aspect-ratio:3/4;padding:7px;background:var(--white);box-shadow:0 18px 34px -12px rgba(0,0,0,.7);transform:rotate(-6deg)} #stp .vg-poster img{width:100%;height:100%;object-fit:cover;display:block} #stp .vg-poster .ph{width:100%;height:100%;display:grid;place-items:center;font-size:12px;color:var(--gray-500);background:repeating-linear-gradient(45deg,var(--gray-100) 0 8px,var(--gray-200) 8px 16px)} #stp .vg-stamp{position:absolute;right:6%;top:54px;transform:rotate(5deg)} #stp .vg-meta{display:flex;align-items:center;justify-content:center;gap:12px;font:600 13px/1 var(--sp-body);color:var(--sp-on-page-sub)} #stp .vg-meta .c{display:inline-flex;align-items:center;gap:8px;color:var(--sp-on-page)} #stp .vg-meta>i{width:1px;height:12px;background:var(--sp-edge)} #stp .vg h1{margin-top:14px;font:400 clamp(40px,6vw,72px)/1.02 var(--sp-title);letter-spacing:-.01em;word-break:keep-all;max-width:900px} #stp .vg-ti{margin-top:14px;max-width:min(640px,100%);max-height:120px;object-fit:contain} #stp .vg-rate{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:.1em;color:var(--sp-star)} #stp .vg-rate i{font-style:normal;color:var(--sp-edge)} #stp .vg-rate b{font:700 13px/1 var(--sp-body);letter-spacing:0;color:var(--sp-on-page-sub)} #stp .vg-one{margin-top:14px;max-width:620px;font:400 20px/1.55 var(--sp-title)} #stp .vg-genre{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px} #stp .vg-genre span{font:600 12px/1 var(--sp-body);padding:6px 10px;border-radius:99px;border:1px solid var(--sp-edge);color:var(--sp-on-page-sub)} #stp .vg-sum{margin-top:18px;max-width:600px;font-size:14.5px;line-height:1.9;color:var(--sp-on-page-sub);white-space:pre-wrap;word-break:keep-all} #stp .react{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;position:relative} #stp .rx{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 8px 0 12px;border-radius:99px;background:var(--sp-scrim);backdrop-filter:blur(8px);border:1px solid var(--sp-edge);color:var(--sp-on-page);font:600 13px/1 var(--sp-body);cursor:pointer} #stp .rx span{font-size:17px} #stp .rx em{font:700 11px/1 var(--sp-body);font-style:normal;padding:4px 7px;border-radius:99px;background:var(--sp-edge);color:var(--sp-on-page-sub);font-variant-numeric:tabular-nums} #stp .rx.mine{border-color:var(--sp-on-page)} #stp .rx.mine em{background:var(--sp-on-page);color:var(--bg-color)} #stp .rx.pop{animation:rxpop .35s} @keyframes rxpop{40%{transform:scale(1.22) rotate(-4deg)}} #stp .rx-add{width:40px;padding:0;justify-content:center;color:var(--sp-on-page-sub)} #stp .rx-add i{margin:0!important} #stp .rx-pop{position:absolute;left:50%;top:48px;transform:translateX(-50%);z-index:10;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:14px;padding:8px;display:none;gap:2px;flex-wrap:wrap;width:230px;box-shadow:0 16px 30px -10px rgba(0,0,0,.4)} #stp .rx-pop.on{display:flex} #stp .rx-pop button{border:0;background:none;font-size:22px;padding:5px;border-radius:8px;cursor:pointer} #stp .rx-pop button:hover{background:var(--sp-tint)} #stp .vg-dv{width:64px;height:1px;background:var(--sp-edge);margin:40px 0 34px} #stp .vg-col{width:100%;max-width:620px;text-align:left;padding-bottom:160px} #stp .vg-col .rbody{color:var(--sp-on-page-sub)} #stp .vg-col .rbody blockquote.tg-quote{background:color-mix(in srgb,var(--sp-on-page) 7%,transparent);color:var(--sp-on-page);border-left-color:var(--sp-on-page-sub)} #stp .vg-col .rbody hr.tg-line{background:radial-gradient(circle,var(--sp-on-page-sub) 2.2px,transparent 2.8px) center/18px 12px repeat-x} @media (max-width:640px){#stp .vg-art{height:300px} #stp .vg-poster{width:46%;left:2%} #stp .vg-stamp{right:0;top:40px} } #stp .bgm{background:color-mix(in srgb,var(--sp-accent) 92%,transparent);border:1px solid var(--sp-edge);color:var(--sp-accent-ink);padding:6px 6px 6px 18px} #stp .bgm .eq i{background:currentColor} #stp .bgm .nm{color:var(--sp-accent-ink);opacity:.85} #stp .bgm .nm b{color:var(--sp-accent-ink)} #stp .bgm button{background:var(--sp-accent-ink);color:var(--sp-accent)} #stp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} #stp .rbody .tg-bubble{color:var(--black)} /* ===================================================================== a_stampie 추가분 ===================================================================== */ #stp{color:var(--content-font-color)} #stp.stp-page{position:relative} /* ---------- 한줄평 노트(글자 / 포스트잇 / 메모지) — 우표 위에 붙이는 요소 ---------- */ #stp .st-note{position:absolute;z-index:9;left:calc(var(--ox)*1%);top:calc(var(--oy)*1%);width:calc(var(--ow)*1%);transform:translate(-50%,-50%) rotate(var(--or,0deg));font-family:var(--nfont,var(--ff));font-size:.92em;line-height:1.38;color:var(--ntc,#2a2118);word-break:keep-all} #stp .st-note .np{display:block;position:relative} #stp .st-note[data-ns="text"]{color:var(--ntc,#fff);text-shadow:0 .06em .18em rgba(0,0,0,.55),0 0 .04em rgba(0,0,0,.4);text-align:center} #stp .st-note[data-ns="postit"] .np{background:linear-gradient(135deg,transparent 91%,rgba(0,0,0,.14) 0),var(--nbg,#ffe58a);padding:1em .85em 1.05em;box-shadow:0 .35em .7em rgba(0,0,0,.3),0 .05em .1em rgba(0,0,0,.2);min-height:3.6em} #stp .st-note[data-ns="postit"] .np::before{content:"";position:absolute;left:50%;top:-.55em;width:34%;height:1.1em;transform:translateX(-50%) rotate(-2deg);background:rgba(255,255,255,.5);box-shadow:0 .05em .1em rgba(0,0,0,.18)} #stp .st-note[data-ns="memo"] .np{background:repeating-linear-gradient(transparent 0 1.45em,rgba(60,90,160,.26) 1.45em calc(1.45em + 1px)) 0 .55em/100% 100%,var(--nbg,#f6f3ea);padding:1.15em 1em 1.25em 1.9em;box-shadow:none;clip-path:polygon(0 0,100% 0,100% 94%,96% 99%,92% 94%,88% 99%,84% 94%,80% 99%,76% 94%,72% 99%,68% 94%,64% 99%,60% 94%,56% 99%,52% 94%,48% 99%,44% 94%,40% 99%,36% 94%,32% 99%,28% 94%,24% 99%,20% 94%,16% 99%,12% 94%,8% 99%,4% 94%,0 99%);min-height:3.4em} #stp .st-note[data-ns="memo"]{filter:drop-shadow(0 .3em .45em rgba(0,0,0,.32))} #stp .st-note[data-ns="memo"] .np::before{content:"";position:absolute;left:.55em;top:.8em;bottom:.8em;width:.55em;background:radial-gradient(circle,rgba(0,0,0,.28) 38%,transparent 42%) 0 0/100% 1.55em repeat-y} #stp .st-note .st-clip{position:absolute;z-index:2;top:-1.1em;right:1.1em;font-size:2.2em;line-height:1;color:color-mix(in srgb,var(--black) 55%,var(--gray-400));transform:rotate(12deg);filter:drop-shadow(0 .05em .05em rgba(0,0,0,.35))} #stp .st-note .st-clip i{margin:0!important} #pvStamp .st-note{cursor:grab;outline:1.5px dashed var(--sp-accent);outline-offset:4px;touch-action:none} #pvStamp .st-note:active{cursor:grabbing} #stp .cell:hover .st-note{z-index:12} /* ---------- 이미지 필드: 3열 ---------- */ #stp #imgfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start} #stp #imgfields .imgf{margin-bottom:0;min-width:0} #stp .imgf .drop{padding:12px 6px;font-size:12px} #stp .imgf-pv{flex-wrap:wrap} #stp .imgf-act{width:100%} @media (max-width:760px){#stp #imgfields{grid-template-columns:1fr}} #stp #stampimg{margin-bottom:18px} /* ---------- 한줄평 노트 조절 줄 ---------- */ #stp #noteOpts{display:none;margin-top:12px;gap:10px 22px;flex-wrap:wrap;align-items:center} #stp #noteOpts.on{display:flex} #stp .mp-r{flex:1 1 180px} /* ---------- BGM 바: 주소·버튼 없이, 바 자체를 눌러 켜고 끔 ---------- */ #stp .bgm{cursor:pointer;gap:10px;padding:9px 18px 9px 16px;border:1px solid var(--sp-edge);user-select:none} #stp .bgm .eq i{background:currentColor} #stp .bgm:not(.play) .eq i{height:25%;opacity:.55} #stp .bgm .nm{color:var(--sp-accent-ink);opacity:.9;max-width:none} #stp .bgm .nm b{margin:0;color:inherit} #stp .bgm .bgm-ic{font-size:13px;opacity:.85} #stp .bgm .bgm-ic i{margin:0!important} /* ---------- 본문: 링크 칩 · 연속 이미지 슬라이드(OTT와 동일 동작, ov-lightbox.js) ---------- */ #stp .rbody a.stp-link-chip{display:inline-block;vertical-align:middle;padding:0 9px;margin:0 2px;line-height:1.5;font-size:.9em;border-radius:999px;text-decoration:none;background:color-mix(in srgb,var(--sp-on-page) 14%,transparent);color:inherit;word-break:break-all} #stp .vg-col .rbody img{max-width:100%;height:auto} .ov-carousel{position:relative;width:100%;aspect-ratio:16/10;min-height:200px;margin:22px 0;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.35)} .ov-carousel-track{position:absolute;inset:0} .ov-carousel-slide{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s} .ov-carousel-slide.is-active{opacity:1;pointer-events:auto} .ov-carousel-bg{position:absolute;inset:-40px;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(32px);transform:scale(1.1)} .ov-carousel-slide::after{content:'';position:absolute;inset:0;z-index:0;background:rgba(255,255,255,.16)} .ov-carousel-slide img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;cursor:pointer} .ov-carousel-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none} .ov-carousel-dot{pointer-events:auto;width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.25);padding:0;cursor:pointer} .ov-carousel-dot.active{background:var(--white);transform:scale(1.25)} /* 에디터 영역(사이트 에디터를 그대로 담는 칸) */ #stp .ed-box{border:1px solid var(--sp-border);border-radius:12px;overflow:hidden;background:var(--sp-soft);padding:6px} #stp .ed-box .frm_info{font-size:12px;color:var(--sp-sub);margin:0 0 6px} #stp #wr_content,#stp .wr-plain-content{width:100%;min-height:240px;background:var(--sp-soft);color:var(--sp-text);border:0;padding:12px;font:inherit} #stp .pv-body.ra0-content{color:var(--sp-text)} #stp .stp-guest{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* 목록: 툴바가 풀페이지 상단에 오도록 */ #stp.stp-list .lp-tools a.chip{text-decoration:none} #stp .chip a{color:inherit;text-decoration:none} #stp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} #stp .st-wrap .st-note{pointer-events:none} #pvStamp .st-wrap .st-note{pointer-events:auto} /* 자유 배치 요소의 크기 · 기울기 손잡이 (작성 화면 미리보기) */ #stp #pvStamp{position:relative} #stp .hd-frame{position:absolute;z-index:30;pointer-events:none;border:1.5px solid var(--sp-accent);border-radius:2px} #stp .hd-line{position:absolute;left:50%;top:-18px;height:18px;border-left:1.5px solid var(--sp-accent)} #stp .hd-rot,#stp .hd-size{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--sp-accent);color:var(--sp-accent-ink,#fff);display:grid;place-items:center;font-size:11px;pointer-events:auto;touch-action:none;box-shadow:0 1px 4px rgba(0,0,0,.4)} #stp .hd-rot{left:50%;top:-30px;transform:translateX(-50%);cursor:grab} #stp .hd-size{right:-12px;bottom:-12px;cursor:nwse-resize} #stp .hd-rot i,#stp .hd-size i{margin:0!important;font-size:11px} #stp #pvStamp .st-free,#stp #pvStamp .st-wrap[data-tp="free"] .st-cap,#pvStamp .st-note{outline:none} /* 별점: 호스트 CSS 가 i 태그에 여백을 줘도 별 간격이 일정하도록 */ #stp :is(.vg-rate,.cap-s) i{margin:0!important;padding:0!important;font-style:normal;letter-spacing:inherit} /* 본문 기본 글자색 흰색: 사이트 CSS 가 p·span 등에 색을 줘도 덮어쓴다. html 에서 직접 지정한 색(style="color:…", )은 그대로 따른다 */ #stp #bo_v_con{color:var(--sp-on-page-sub)} #stp #bo_v_con :where(*:not([color]):not([style*="color"]):not([color] *):not([style*="color"] *):not(a):not(:is([class*="tg-"],[class*="tgw"],[class*="textggu"],[class*="blur"],[class*="txt-"])):not(:is([class*="tg-"],[class*="tgw"],[class*="textggu"],[class*="blur"],[class*="txt-"]) *)){color:var(--sp-on-page-sub)} #stp #bo_v_con a:not(.hashtag):not(.stp-link-chip):not(.blur-txt):not(.none-blur){color:inherit;text-decoration:underline} /* 별줄 별점은 그림자 없이 */ #stp .cap-s,#stp .st-free .cap-s{text-shadow:none!important} /* 목록 상단 도구줄 높이: OTT 와 같이 44px */ #stp.stp-list .lp-tools{padding-top:0;padding-bottom:0;align-items:center;min-height:44px} #stp.stp-list .lp-tools .chip{min-height:44px} #stp.stp-list .lp-tools .ibtn{width:34px;height:34px} #stp.stp-list .lp-tools .bs-face{width:32px;height:40px} @media (max-width:760px){#stp.stp-list .lp-tools{align-items:stretch;padding-top:6px}} /* 우측 도구가 창 위에 붙지 않게: 줄 높이 44px 안에서 위아래 4px 이상 띄우고 크기를 줄임 */ #stp.stp-list .lp-tools > :not(.chips){margin-block:4px} #stp.stp-list .lp-tools .ibtn{width:30px;height:30px;font-size:13px} #stp.stp-list .lp-tools .vseg .ibtn{width:26px;height:26px} #stp.stp-list .lp-tools .seg{padding:2px} #stp.stp-list .lp-tools .bs-face{width:28px;height:35px} /* 열람 권한이 없을 때 잠금 안내 */ #stp .vg-lock{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid var(--sp-edge);background:var(--sp-scrim);color:var(--sp-on-page);text-decoration:none;font-size:14px} #stp .vg-lock i{margin:0!important} /* 한줄평 메모지는 이웃 우표보다 위에 */ #stp .cell:has(.st-note){z-index:8} #stp .cell:has(.st-note):hover{z-index:9} /* 메모지 클립: 종이 윗단을 물고 있는 철제 클립 */ #stp .st-note .st-clip{top:-1.5em;right:1.3em;left:auto;width:1.15em;height:3.1em;font-size:1em;color:inherit;transform:rotate(7deg);filter:drop-shadow(0 .08em .08em rgba(0,0,0,.4))} #stp .st-note .st-clip svg{display:block;width:100%;height:100%;overflow:visible} #stp .st-note .st-clip path{fill:none;stroke:#9aa0a8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* 열람 화면 제목은 흰색 */ #stp .vg h1{color:var(--sp-on-page-sub)} /* 열람 화면 포스터와 우표를 가운데로 모아 붙인다 */ #stp .vg-poster{left:auto;right:calc(50% - 8px)} #stp .vg-stamp{right:auto;left:calc(50% + 12px)} @media (max-width:640px){#stp .vg-poster{left:auto;right:calc(50% - 4px)}#stp .vg-stamp{right:auto;left:calc(50% + 6px)}} /* 선호 / 비선호 투표 버튼 */ #stp .vote{margin-top:18px;display:flex;justify-content:center;gap:10px} #stp .vote .vt{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid var(--sp-edge);background:var(--sp-scrim);color:var(--sp-on-page-sub);cursor:pointer;font:600 14px/1 var(--sp-body);transition:background .2s,border-color .2s} #stp .vote .vt.on{background:color-mix(in srgb,var(--sp-on-page) 16%,transparent);border-color:var(--sp-on-page);color:var(--sp-on-page)} #stp .vote .vt img{width:22px;height:22px;object-fit:contain;display:block;filter:grayscale(.7);opacity:.7;transition:filter .2s,opacity .2s} #stp .vote .vt.on img,#stp .vote .vt:hover img{filter:none;opacity:1} #stp .vote .vt i{margin:0!important} #stp .vote .vt b{font-weight:600;min-width:1ch;text-align:left} /* 투표한 멤버 목록(관리자·글쓴이에게만) */ #stp .vote-who{margin:10px auto 0;max-width:420px;font-size:12.5px;line-height:1.7;color:var(--sp-on-page-sub);text-align:center} #stp .vote-who b{color:var(--sp-on-page);margin-right:4px} /* 본문 글자 크기·줄 간격: OTT 와 같은 규칙 */ #stp .ra0-content{font-size:12px;line-height:1.5em} /* 블러 글자 · 해시태그 · 링크 칩: OTT 의 .ra0-content 규칙을 그대로 가져옴 */ #stp .ra0-content a.blur-txt,#stp .ra0-content a.none-blur{color:inherit;transition:filter .18s ease} #stp .ra0-content a.blur-txt:hover,#stp .ra0-content a.none-blur:hover{color:inherit} #stp .ra0-content div.blur-txt{filter:blur(5px);color:currentcolor;cursor:pointer} #stp .ra0-content div.none-blur{filter:blur(0px)} #stp .ra0-content a.hashtag,#stp .ra0-content a.stp-link-chip{display:inline-block;vertical-align:middle;position:relative;padding:0 9px;margin:0 2px;line-height:1.5;font-size:.9em;border:0;border-radius:999px;text-decoration:none;filter:none;background:color-mix(in srgb,var(--accent-color,var(--btn-accent-bg)) 16%,transparent);color:var(--accent-color,var(--btn-accent-bg));transition:background .2s ease} #stp .ra0-content a.stp-link-chip{word-break:break-all} #stp .ra0-content a.hashtag:hover,#stp .ra0-content a.stp-link-chip:hover{background:color-mix(in srgb,var(--accent-color,var(--btn-accent-bg)) 26%,transparent);color:var(--accent-color,var(--btn-accent-bg));filter:none} #stp .ra0-content a.stp-link-chip i{margin-right:4px;font-size:.85em;vertical-align:baseline} #stp .ra0-content img{margin:0} #stp iframe{border-radius:10px} /* 작성중/기억상실 썸네일: 타이틀 이미지를 자리에 가득(전부 보이게) 채우고 빗금을 위에 덮는다 */ #stp .st-hatch.ti{background:var(--st-c)} #stp .st-hatch .st-hati{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} #stp .st-hatch .st-hs{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 .32em,color-mix(in srgb,var(--st-ink) 22%,transparent) .32em .64em)} #stp .st-hatch.ti span{position:relative;z-index:1} /* 작성중/기억상실: 우표 썸네일을 평소와 같이 크롭해서 보이되 살짝 옅게, 빗금은 반투명으로 덮는다 */ #stp .st-hatch.ti{background:repeating-linear-gradient(135deg,transparent 0 .32em,color-mix(in srgb,var(--st-ink) 22%,transparent) .32em .64em)} #stp .st-img:has(.st-hatch.ti) .st-pic{background:var(--st-c)} #stp .st-img:has(.st-hatch.ti) .st-pic img{opacity:.55} /* 스티커 */ #stp .st-stk{position:absolute;z-index:10;left:calc(var(--sx)*1%);top:calc(var(--sy)*1%);width:calc(var(--sw)*1%);transform:translate(-50%,-50%) rotate(var(--sr,0deg));line-height:0;pointer-events:none} #stp .st-stk img{width:100%;height:auto;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none} #stp #pvStamp .st-wrap .st-stk{pointer-events:auto;cursor:grab;touch-action:none} #stp .cell:has(.st-stk){z-index:8} #stp .cell:has(.st-stk):hover{z-index:9} /* 스티커 고르는 곳 */ #stp .stk-panel{margin-top:10px;padding:10px;border:1px solid var(--sp-border);border-radius:12px;background:var(--sp-soft)} #stp .stk-panel[hidden]{display:none} #stp .stk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;max-height:190px;overflow:auto} #stp .stk-grid button{display:grid;place-items:center;aspect-ratio:1;padding:4px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer} #stp .stk-grid button:hover{border-color:var(--sp-accent);background:var(--sp-tint)} #stp .stk-grid img{width:100%;height:100%;object-fit:contain;display:block} #stp .stk-none{grid-column:1/-1;font-size:12.5px;color:var(--sp-sub)} #stp .stk-in{display:flex;gap:6px;margin:8px 0 0} #stp .stk-panel>.stk-in:first-child{margin:0 0 8px} #stp .stk-in .inp{flex:1;min-width:0} #stp .stk-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} #stp .stk-it{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 4px;border:1px solid var(--sp-border);border-radius:12px;background:var(--sp-soft);cursor:pointer} #stp .stk-it.on{border-color:var(--sp-accent);box-shadow:0 0 0 1px var(--sp-accent)} #stp .stk-it .th{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:repeating-conic-gradient(var(--gray-200) 0 25%,var(--white) 0 50%) 0 0/10px 10px} #stp .stk-it .th img{max-width:100%;max-height:100%;object-fit:contain} #stp .stk-o,#stp .stk-x{border:0;background:none;color:var(--sp-sub);font-size:12px;cursor:pointer;padding:4px 6px;border-radius:8px} #stp .stk-o.on{background:var(--sp-accent);color:var(--btn-accent-text)} #stp .stk-o.on i::before{content:"\f14a"} #stp .stk-o i,#stp .stk-x i{margin:0 4px 0 0!important} #stp .stk-x i{margin:0!important} /* hover 시 한줄평 메모지가 올라와도 스티커는 그 위에 */ #stp .cell:hover .st-stk{z-index:13} /* 우표/티켓은 포스터 하단 옆에 붙도록 아래쪽 기준으로 놓는다 */ #stp .vg-stamp{top:auto;bottom:78px} @media (max-width:640px){#stp .vg-stamp{top:auto;bottom:56px}} /* 포스터는 원래 비율 그대로. 포스터와 우표 아래쪽을 같은 높이에 맞춘다 */ #stp .vg-poster{width:auto;max-width:min(240px,46%);aspect-ratio:auto;top:auto;bottom:64px} #stp .vg-poster img{width:auto;height:auto;max-width:100%;max-height:320px;object-fit:contain} #stp .vg-poster .ph{width:190px;height:auto;aspect-ratio:3/4} #stp .vg-stamp{bottom:64px} @media (max-width:640px){#stp .vg-poster{max-width:46%;bottom:48px}#stp .vg-poster img{max-height:220px}#stp .vg-poster .ph{width:120px}#stp .vg-stamp{bottom:48px}} /* 가로 포스터는 더 크게: 열람 그림 영역을 넓히고 포스터 최대 폭을 키운다 */ #stp .vg-art{width:min(760px,100%)} #stp .vg-poster{max-width:min(360px,48%)} @media (max-width:640px){#stp .vg-poster{max-width:48%}} /* 포스터와 우표를 서로 겹치게(우표가 포스터 위로) */ #stp .vg-poster{right:calc(50% - 34px)} #stp .vg-stamp{left:calc(50% - 22px);z-index:2} @media (max-width:640px){#stp .vg-poster{right:calc(50% - 18px)}#stp .vg-stamp{left:calc(50% - 10px)}} /* 스티커 흰 테두리: 흰 실루엣을 원 모양으로 겹쳐서 모든 방향이 같은 두께 */ #stp .st-stk{filter:drop-shadow(0 .1em .15em rgba(0,0,0,.3))} #stp .st-stk .stk-ol{position:absolute;inset:0;display:block} #stp .st-stk .stk-ol img{position:absolute;left:0;top:0;width:100%;height:auto;filter:brightness(0) invert(1);transform:translate(var(--dx),var(--dy))} #stp .st-stk .stk-main{position:relative} /* 수정·삭제를 담는 ... 메뉴 */ #stp .vmore{position:relative} #stp .vmore-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:112px;padding:6px;border-radius:14px;border:1px solid var(--sp-edge);background:color-mix(in srgb,var(--bg-color) 88%,transparent);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:2px;z-index:40;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)} #stp .vmore-menu[hidden]{display:none} #stp .vmore-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--sp-on-page);font-size:13.5px;text-decoration:none;white-space:nowrap} #stp .vmore-menu a:hover{background:color-mix(in srgb,var(--sp-on-page) 12%,transparent)} #stp .vmore-menu a i{margin:0!important;width:1em;text-align:center} /* 분류·날짜 줄이 없어진 자리를 없앰 */ #stp .vg h1,#stp .vg-ti{margin-top:0} #stp .vg-meta{margin-bottom:12px} /* 본문 미리보기 프레임: 열람 화면 크기(1000px)로 그려서 창 폭에 맞춰 축소 */ #stp #pt-body.pv-body{padding:0;min-height:0} #stp .pv-frame-wrap{position:relative;overflow:hidden;width:100%;background:#000} #stp .pv-frame{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#000} /* 선택 박스(.seg) 안의 선택 버튼이 아래로 튀어나오지 않도록: 38px 줄 안에서 버튼 높이를 맞춘다 */ #stp .ctl-line .seg button{min-height:0;align-self:stretch} /* 한줄평 · 스티커 줄(우표 미리보기 아래) */ #stp .pv-tools{padding:12px 16px 4px;border-top:1px solid var(--sp-border)} #stp .pv-tools-row{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;flex-wrap:wrap} #stp .pv-tools .lbl{font-size:12px;margin-bottom:5px} #stp .pv-tools .seg.sm button{padding:4px 8px;font-size:11.5px;min-height:0} #stp .pv-tools .ctl-line{margin-top:10px} #stp .pv-tools .stk-panel{margin-top:10px} #stp .pv-tools-row{flex-wrap:nowrap} #stp .pv-tools .seg{padding:2px;gap:1px;border-radius:11px;flex-wrap:nowrap} #stp .pv-tools .seg.sm button{padding:4px 6px;font-size:11px;border-radius:8px} /* 한줄평 글자 모양(크기 · 정렬 · 줄바꿈) */ #stp .st-note{font-size:calc(.92em*var(--nsz,1))} #stp .st-note .np{white-space:pre-line;text-align:var(--nal,inherit)} #stp .st-note .np[contenteditable]{outline:1.5px solid var(--sp-accent);outline-offset:2px;cursor:text} #stp #w-oneline{min-height:62px} /* 한줄평 도구 막대(우표 미리보기에서 한줄평을 고르면 뜸) */ #stp .note-tb{position:absolute;z-index:40;display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:12px;background:var(--sp-card);border:1px solid var(--sp-border);box-shadow:0 10px 24px -8px rgba(0,0,0,.45);white-space:nowrap} #stp .note-tb .tb-font{width:112px;height:28px;padding:0 24px 0 8px;font-size:12px;border-radius:8px} #stp .note-tb button{height:28px;min-width:28px;padding:0 7px;border:0;border-radius:8px;background:none;color:var(--sp-sub);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px} #stp .note-tb button:hover{background:var(--sp-tint);color:var(--sp-accent)} #stp .note-tb button.on{background:var(--sp-accent);color:var(--btn-accent-text)} #stp .note-tb button i{margin:0!important} #stp .note-tb .tb-sz{min-width:38px;text-align:center;font-size:12px;font-weight:600;color:var(--sp-text)} #stp .note-tb .tb-sep{width:1px;height:18px;background:var(--sp-border);margin:0 2px} #stp .note-tb [data-t=br] span{display:none} #stp .note-tb .tb-font{width:100px} #stp .note-tb{gap:2px;padding:5px 6px} /* 카테고리는 가운데, 도구는 오른쪽 */ @media (min-width:761px){ #stp.stp-list .lp-tools{display:grid;grid-template-columns:1fr auto 1fr;gap:0 24px} #stp.stp-list .lp-tools .chips{grid-column:2;justify-content:center} #stp.stp-list .lp-tools > :not(.chips){grid-column:3;justify-self:end} } @media (max-width:760px){#stp.stp-list .lp-tools .chips{justify-content:center}} /* 취소 · 완료 버튼은 미리보기 컨테이너 아래. 두 개가 같이 따라다니도록 .w-side 가 sticky */ #stp .w-side{position:sticky;top:62px} #stp .w-side .w-pane{position:static} #stp .w-side .w-actions{margin-top:14px} @media (max-width:900px){#stp .w-side{display:contents}#stp .w-side .w-pane{order:-1}#stp .w-actions{order:2;margin-top:4px}} #stp .w-side .pane-body{max-height:calc(100vh - 210px)} /* 카테고리 개수 칩: 우표 모양(가장자리 천공) */ #stp .chip em{padding:5px 9px;border-radius:0;min-width:2.1em;text-align:center; --perf:linear-gradient(#000 0 0) 2px 2px/calc(100% - 4px) calc(100% - 4px) no-repeat, radial-gradient(circle at 50% 0,#0000 0 1.5px,#000 1.7px) 0 0/6px 4px repeat-x, radial-gradient(circle at 50% 100%,#0000 0 1.5px,#000 1.7px) 0 100%/6px 4px repeat-x, radial-gradient(circle at 0 50%,#0000 0 1.5px,#000 1.7px) 0 0/4px 6px repeat-y, radial-gradient(circle at 100% 50%,#0000 0 1.5px,#000 1.7px) 100% 0/4px 6px repeat-y; -webkit-mask:var(--perf);mask:var(--perf)} /* 개수 우표는 4:3 비율로 고정 */ #stp .chip em{display:inline-grid;place-items:center;box-sizing:border-box;height:24px;aspect-ratio:4/3;width:auto;min-width:0;padding:0;line-height:1;text-align:center} /* 개수 우표 천공: 전체를 채운 모양에서 가장자리 반원만 도려낸다 */ #stp .chip em{ --perf:radial-gradient(circle at 50% 0,#000 0 1.7px,#0000 1.9px) 0 0/6px 100% round no-repeat, radial-gradient(circle at 50% 100%,#000 0 1.7px,#0000 1.9px) 0 0/6px 100% round no-repeat, radial-gradient(circle at 0 50%,#000 0 1.7px,#0000 1.9px) 0 0/100% 6px no-repeat round, radial-gradient(circle at 100% 50%,#000 0 1.7px,#0000 1.9px) 0 0/100% 6px no-repeat round, linear-gradient(#000 0 0); -webkit-mask:var(--perf);-webkit-mask-composite:xor; mask:var(--perf);mask-composite:exclude} /* 개수 우표 구멍을 조금 더 작게 */ #stp .chip em{ --perf:radial-gradient(circle at 50% 0,#000 0 1.2px,#0000 1.4px) 0 0/5px 100% round no-repeat, radial-gradient(circle at 50% 100%,#000 0 1.2px,#0000 1.4px) 0 0/5px 100% round no-repeat, radial-gradient(circle at 0 50%,#000 0 1.2px,#0000 1.4px) 0 0/100% 5px no-repeat round, radial-gradient(circle at 100% 50%,#000 0 1.2px,#0000 1.4px) 0 0/100% 5px no-repeat round, linear-gradient(#000 0 0)} /* 글쓰기 우표 천공: 같은 방식으로 네 변 구멍 간격이 고르게 */ #stp .bs-face{ --perf:radial-gradient(circle at 50% 0,#000 0 2px,#0000 2.2px) 0 0/7px 100% round no-repeat, radial-gradient(circle at 50% 100%,#000 0 2px,#0000 2.2px) 0 0/7px 100% round no-repeat, radial-gradient(circle at 0 50%,#000 0 2px,#0000 2.2px) 0 0/100% 7px no-repeat round, radial-gradient(circle at 100% 50%,#000 0 2px,#0000 2.2px) 0 0/100% 7px no-repeat round, linear-gradient(#000 0 0); -webkit-mask:var(--perf);-webkit-mask-composite:xor;mask:var(--perf);mask-composite:exclude} /* 스냅 켜기/끄기 버튼(우표 미리보기 영역 오른쪽 위) + 안내선 */ #stp .pv-stamp-area{position:relative} #stp .snap-btn{position:absolute;top:8px;right:8px;z-index:5;width:30px;height:30px;border-radius:50%;border:1px solid var(--sp-border);background:var(--sp-card);color:var(--sp-sub);display:grid;place-items:center;font-size:13px;cursor:pointer} #stp .snap-btn i{margin:0!important} #stp .snap-btn.on{background:var(--sp-accent);color:var(--btn-accent-text);border-color:var(--sp-accent)} #stp .snap-guide{position:absolute;z-index:45;pointer-events:none;border:0;background:transparent} #stp .snap-guide.v{width:0;border-left:1px dashed #ff4d6d} #stp .snap-guide.h{height:0;border-top:1px dashed #ff4d6d} #stp .stk-gif{padding:3px 8px;border-radius:7px;background:var(--sp-tint);color:var(--sp-accent);font:700 11px/1 var(--sp-body);letter-spacing:.06em} /* 비율이 비슷한 이미지들의 슬라이드: 여백 없이 가득 채운다 */ .ov-carousel.is-fit .ov-carousel-slide img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover} .ov-carousel.is-fit .ov-carousel-bg{display:none} #stp .vg-one{color:var(--sp-on-page-sub)} /* 열람 첫 화면: 타이틀·별점·투표·장르만. 나머지는 버튼을 눌러 펼친다 */ /* 첫 화면의 타이틀~장르 덩어리가 배경 이미지가 검정으로 사라지는 경계에 걸치도록 아래로 내린다 */ #stp .vg{padding-top:max(10px,calc(50vh - 210px))} /* 두 화면 구성: 1) 타이틀~장르 2) 이모지 반응 + 본문. 스크롤하면 미끄러지듯 넘어간다 */ #stp .vg{padding-top:10px} #stp .vg-first{width:100%;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 90px);padding-top:max(0px,calc(50vh - 120px))} #stp .vg-p2{width:100%;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding-top:90px} /* 이모지 반응 버튼(사이트 공통 위젯)을 투표 버튼과 같은 모양으로 */ #stp .ra0-er{--er-fg:var(--sp-on-page);--er-line:var(--sp-edge);--er-accent:var(--sp-on-page)} #stp .react{margin-top:18px;display:flex;justify-content:center} #stp .react .ra0-er{display:flex;justify-content:center;width:auto;flex:0 1 auto} #stp .ra0-er-list{justify-content:center;gap:10px} #stp .ra0-er-chip{height:auto;min-height:0;line-height:1;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid var(--sp-edge);background:var(--sp-scrim);color:var(--sp-on-page-sub);font:600 14px/1 var(--sp-body);transition:background .2s,border-color .2s} #stp .ra0-er-chip img.ra0-er-img{height:22px!important;max-width:none;filter:grayscale(.7);opacity:.7;transition:filter .2s,opacity .2s} #stp .ra0-er-chip.on,#stp .ra0-er-chip:hover{background:color-mix(in srgb,var(--sp-on-page) 16%,transparent);border-color:var(--sp-on-page);color:var(--sp-on-page)} #stp .ra0-er-chip.on img.ra0-er-img,#stp .ra0-er-chip:hover img.ra0-er-img{filter:none;opacity:1} #stp .ra0-er-cnt{padding-left:0;min-width:1ch;text-align:left;font-weight:600} #stp .ra0-er-add{height:auto;min-height:0;width:auto;padding:6px 10px;border-radius:999px;border:1px solid var(--sp-edge);background:var(--sp-scrim);color:var(--sp-on-page-sub)} #stp .ra0-er-add:hover,#stp .ra0-er-add.open{border-color:var(--sp-on-page);color:var(--sp-on-page)} #stp .ra0-er-add .material-icons{font-size:22px} /* 이모지 반응 버튼: 화면 아래에 고정(브금 바처럼 스크롤과 무관). 브금 바가 있으면 그 오른쪽에 붙는다 */ #stp .react{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;margin:0;width:auto;max-width:calc(100vw - 24px)} #stp .react.with-bgm{left:calc(50% + 58px);transform:none} #stp .ra0-er-chip,#stp .ra0-er-add{box-sizing:border-box;height:38px;min-height:38px;padding-top:0;padding-bottom:0} #stp .ra0-er-add{min-width:38px;justify-content:center} #stp .ra0-er-pop{top:auto;bottom:100%;margin:0 0 6px} /* 브금 버튼: 글자 없이 이퀄라이저만. 이모지·투표 버튼과 같은 알약 모양 */ #stp .bgm{box-sizing:border-box;width:54px;height:38px;padding:0;justify-content:center;gap:0;background:var(--sp-scrim);border:1px solid var(--sp-edge);color:var(--sp-on-page-sub);box-shadow:none;backdrop-filter:blur(8px)} #stp .bgm:hover,#stp .bgm.play{border-color:var(--sp-on-page);color:var(--sp-on-page)} #stp .react.with-bgm{left:calc(50% + 37px)} /* 두 화면 사이는 JS 없이 브라우저 기본 스크롤 + 스냅으로 부드럽게 (휠 가로채기 제거) */ /* 타이틀~별점 영역을 고정 높이로 두고 아래에 붙여서, 타이틀 크기와 상관없이 투표 버튼이 항상 같은 높이에 온다 */ #stp .vg-first{padding-top:0} #stp .vg-head{width:100%;height:calc(50vh + 50px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end} /* 아래 고정 바: 브금 + 이모지 반응을 한 줄로 묶어 항상 가운데에 */ #stp .dock{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;max-width:calc(100vw - 24px)} #stp .dock .bgm{position:static;transform:none;left:auto;bottom:auto;flex:none} #stp .dock .react{position:static;transform:none;left:auto;bottom:auto;margin:0;width:auto;max-width:none;min-width:0} #stp .dock .react .ra0-er{width:auto} #stp .dock .ra0-er-list{justify-content:center;flex-wrap:wrap} /* 이모지 추가 버튼 + 이모지 버튼들을 바 하나로 묶고, 각 버튼의 테두리·배경은 없앤다 */ #stp .dock .react{box-sizing:border-box;height:38px;display:flex;align-items:center;padding:0 6px;border:1px solid var(--sp-edge);border-radius:999px;background:var(--sp-scrim);backdrop-filter:blur(8px)} #stp .dock .ra0-er-list{flex-wrap:nowrap;gap:2px} #stp .dock .ra0-er-chip,#stp .dock .ra0-er-add{height:36px;min-height:36px;border:0!important;background:none!important;border-radius:999px;padding:0 8px;box-shadow:none} #stp .dock .ra0-er-chip.on,#stp .dock .ra0-er-chip:hover,#stp .dock .ra0-er-add:hover,#stp .dock .ra0-er-add.open{border:0!important;background:none!important;color:var(--sp-on-page)} /* 이모지 숫자는 이모지 오른쪽 위에 배지로 */ #stp .dock .ra0-er-chip{position:relative;padding:0 11px 0 9px;overflow:visible} #stp .dock .ra0-er-cnt{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:99px;display:grid;place-items:center;text-align:center;font:700 10px/1 var(--sp-body);font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--sp-on-page) 22%,#000);color:var(--sp-on-page-sub)} #stp .dock .ra0-er-chip.on .ra0-er-cnt,#stp .dock .ra0-er-chip:hover .ra0-er-cnt{background:var(--sp-on-page);color:var(--bg-color)} #stp .dock .ra0-er-cnt{top:5px;right:3px} #stp .dock .ra0-er-cnt.one{display:none} /* 브금 버튼은 위쪽 메뉴(이전/다음 글 자리)에 */ #stp .vg-nav .bgm{position:static;left:auto;bottom:auto;transform:none;width:40px;height:40px;box-sizing:border-box;border-radius:50%;flex:none} #stp .dock .ibtn{width:38px;height:38px;flex:none} /* 본문 위 가로줄 제거 + 짧은 글은 창 높이 가운데에 */ #stp .vg-dv{display:none} #stp .vg-p2{justify-content:center;padding:100px 0} #stp .vg-p2 .vg-col{padding-bottom:0} /* 별점 별 모양: 작성 화면과 같은 FontAwesome 별 */ #stp :is(.vg-rate,.cap-s,.st-badge) i{opacity:1!important;color:inherit!important;font-style:normal} #stp :is(.vg-rate,.cap-s) .o{opacity:.28} #stp .vg-rate .o{opacity:1;color:var(--sp-edge)} #stp .cap-s{letter-spacing:.12em} #stp .st-badge i{font-size:.8em;margin-right:.15em!important} /* 브금 버튼: 테두리·배경 없음 */ #stp .vg-nav .bgm,#stp .vg-nav .bgm:hover,#stp .vg-nav .bgm.play{border:0;background:none;box-shadow:none;backdrop-filter:none} /* 줄거리 버튼(첫 화면, 항상 보임) + 팝업 */ #stp .vg-sumbtn{margin-top:12px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:0;background:none;color:var(--sp-on-page-sub);font:600 13px/1 var(--sp-body);cursor:pointer} #stp .vg-sumbtn:hover{color:var(--sp-on-page)} #stp .vg-sumbtn i{margin:0!important;font-size:11px} #stp .vg-sumpop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s} #stp .vg-sumpop[hidden]{display:none} #stp .vg-sumpop.on{opacity:1} #stp .vg-sumcard{width:min(460px,100%);max-height:70vh;overflow:auto;padding:22px 24px;border:1px solid var(--sp-edge);border-radius:16px;background:rgba(0,0,0,.55);color:var(--sp-on-page-sub)} #stp .vg-sumtxt{font-size:14.5px;line-height:1.9;white-space:pre-wrap;word-break:keep-all;text-align:left} #stp .vg-sumtxt.empty{text-align:center;color:var(--sp-on-page-sub)} #stp .vg-sumtxt{text-align:center} /* 작성 화면의 본문 미리보기: 페이지 나눔(첫 화면/본문 화면 높이 분리)은 적용하지 않고 이어서 보여준다 */ #stp.pv-nopage .vg-first{min-height:0;padding-bottom:10px} #stp.pv-nopage .vg-head{height:auto;min-height:150px;padding-top:30px} #stp.pv-nopage .vg-p2{min-height:0;padding:40px 0 60px;justify-content:flex-start} #stp .vg-head{height:calc(50vh + 14px)} /* 톱니 대신 위아래 천공(동그란 구멍) */ #stp .st-wrap[data-cut="zig"] .st,#stp .st-wrap[data-cut="zig"][data-ori="h"] .st{-webkit-mask:none;mask:radial-gradient(circle .3em at 50% 0,#0000 96%,#000) 0 0/1em 100% repeat-x,radial-gradient(circle .3em at 50% 100%,#0000 96%,#000) 0 0/1em 100% repeat-x;mask-composite:intersect} /* 우표/티켓 안의 글자는 종이 색조를 머금은 같은 잉크색으로 통일 */ #stp .st-wrap{--st-ink2:color-mix(in srgb,var(--st-ink) 62%,var(--st-c))} #stp .st-fields small,#stp .st-top span{color:var(--st-ink2);opacity:1} /* 레퍼런스처럼: 한 가지 색조(종이)에서 글자·라벨·선·별점이 명도만 달라지게 */ #stp .st-wrap{--ac-t:color-mix(in srgb,var(--ac) 58%,var(--st-ink))} #stp .st-wrap:not([data-tp="over"]):not([data-tp="otop"]):not([data-tp="center"]):not([data-tp="free"]) .cap-s{color:var(--ac-t)} #stp .st-top{border-bottom-color:color-mix(in srgb,var(--st-ink2) 55%,transparent)} #stp .st-fields{border-top-color:color-mix(in srgb,var(--st-ink2) 50%,transparent)} #stp .st-fields span,#stp .st-top{color:var(--st-ink)} #stp .st-fields small{letter-spacing:.2em} /* 자동 색조: 라벨·선·별점은 종이 색조에서 계산한 값을 쓴다 */ #stp .st-wrap{--st-ink2:var(--st-lab)} #stp .st-top{border-bottom-color:var(--st-line)} #stp .st-fields{border-top-color:var(--st-line)} #stp .st-wrap:not([data-tp="over"]):not([data-tp="otop"]):not([data-tp="center"]):not([data-tp="free"]) .cap-s{color:var(--st-lab)} #stp .st-fields small,#stp .st-top span{color:var(--st-lab)} /* 별점 스티커(원형 배지): 별은 크게, 별과 숫자 사이는 좁게 */ #stp .st-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1} #stp .st-badge i{font-size:1.7em;line-height:1;margin:0 0 -.12em!important} #stp .st-badge{font-weight:800} #stp .st-badge i{font-size:1.2em;margin:0 0 -.08em!important} #stp .st-badge{padding-top:.3em;box-sizing:border-box} /* 별점: 기본은 사이트 포인트(빨강) 색, 우표/티켓 안에서는 우표의 포인트 색을 따른다 */ #stp .st-wrap:not([data-l="split"]):not([data-l="band"]):not([data-l="side"]) .cap-s{color:var(--ac)} /* 필름 가장자리 글자: 포인트 색이 아니라 종이 색에서 계산한 라벨 색 */ #stp .st-wrap[data-cut="film"] .st-edge{color:var(--st-lab)} /* 타이틀+별점과 투표 버튼 사이 간격 +12px (투표 버튼 위치는 그대로) */ #stp .vg-head{height:calc(50vh + 2px)} #stp .vg-first .vote{margin-top:30px}