:root{ --bg:#FFFFFF; --ink:#111111; --bar:#232323; --title:#3D58A7; --point:#6b4e8e; --muted:#6f6d6a; --new:#e5484d; /* 새 글 뱃지 */ --mine:#8a7a3a; /* 관리자 전용 표식 */ --soft-ink:#55534f; --line:#111111; --line-soft:#e8e6e3; --soft:#fafafa; --max:1040px; /* fonts: readable gothic body + soft serif display */ --disp:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --body:'Gowun Dodum','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --sans:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif; } /* 제목 가독성 보정: Jua·고운돋움은 단일 굵기 폰트라 bold가 겹치면 브라우저가 획을 억지로 두껍게 그린(가짜 볼드) 뭉개진 글자가 됨 → 합성 차단 */ h1,h2,h3,h4,h5,h6{font-synthesis-weight:none;font-synthesis:none} body.dark{ --bg:#16161a; --ink:#ececef; --bar:#0e0e11; --title:#8fa6e6; --point:#b79cff; --muted:#9a9aa2; --soft-ink:#c4c4cc; --line:#ececef; --line-soft:#33333a; --soft:#1f1f25; } body.dark .svc-card,body.dark .dsg-item,body.dark .cc-stat,body.dark .pd,body.dark .auth-card,body.dark .ig-card,body.dark .blog-card,body.dark .pub-inquiry,body.dark .board,body.dark .msg.bot,body.dark .msg.typing,body.dark .entry,body.dark .aj-entry,body.dark .ai-cat,body.dark .comic-frame,body.dark .pf-book,body.dark .bubble,body.dark .ib-ico,body.dark .blog-refresh,body.dark .pt-card,body.dark .sw-card,body.dark .store-card{background-color:var(--soft)} /* ⚠ 아래 요소들은 라이트 모드 배경이 '그라데이션(background-image)'이라 background-color만 바꾸면 흰 그라데이션이 그대로 남음 → background 전체를 교체 */ body.dark .pub-inquiry{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%) var(--soft)} body.dark .dsg-manifesto{background:linear-gradient(180deg,rgba(107,78,142,.14),rgba(107,78,142,.04)) var(--soft)} body.dark .dsg-quote-mark{color:rgba(216,204,232,.45)} body.dark .cc-stat{background:linear-gradient(135deg,var(--soft),rgba(107,78,142,.16));box-shadow:0 2px 9px rgba(0,0,0,.3)} body.dark .insta-card{background:linear-gradient(135deg,rgba(214,41,118,.14),transparent 55%) var(--soft);box-shadow:0 4px 15px rgba(214,41,118,.12)} body.dark .ci-board{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent) var(--soft);box-shadow:0 4px 15px rgba(0,0,0,.35)} /* 다크모드: 흰색(#fff) 고정 배경 입력창·칩·버튼 일괄 보정 (텍스트가 밝은색으로 바뀌어 안 보이던 문제) */ body.dark .gb-form input,body.dark .gb-form textarea, body.dark .pf-tag,body.dark .post-form input,body.dark .post-form textarea, body.dark .ci-attach,body.dark .ci-chip,body.dark .ajf-attach,body.dark .ajf-chip, body.dark .ci-c-edit,body.dark .ci-c-del,body.dark .aj-e-edit,body.dark .aj-e-del, body.dark .chat-panel,body.dark .chat-input{background:var(--soft)} body.dark .pi-file-item{background:rgba(160,130,200,.16)} body.dark .ci-attach:hover,body.dark .ajf-attach:hover{background:rgba(160,130,200,.12)} body.dark .msg.bot,body.dark .msg.typing,body.dark .entry,body.dark .aj-entry,body.dark .ai-cat,body.dark .comic-frame,body.dark .bubble{border-color:var(--line-soft)} body.dark .msg.bot,body.dark .entry,body.dark .aj-entry{color:var(--ink)} /* 다크모드 게시판 글 목록 가독성 */ body.dark .prow{background:var(--soft)} body.dark .prow:hover{background:#2a2a32} body.dark .prow .ptitle{color:var(--ink)} body.dark .prow .c{color:#b8b8c0} body.dark .prow .pnick{color:var(--soft-ink)} body.dark .list-head{background:#0e0e11;color:#d8d8de} /* 🔄 2026-08-03: .94 → .97 — 흰 종이류 이미지(만화·아트워크)가 다크에서 "같이 어두워져" 탁해 보인다는 피드백. 3%는 눈부심만 살짝 눌러 주고 종이의 흰색은 흰색으로 남는다. */ body.dark img:not(.pd-img):not(.ig-card-thumb img):not(.cc-shot img){opacity:.97} html,body{transition:background-color .3s ease,color .3s ease} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* ── 접근성·마감 (pro pass) ── */ :focus-visible{outline:2.5px solid var(--point);outline-offset:2.5px;border-radius:4px} :focus:not(:focus-visible){outline:none} [id]{scroll-margin-top:78px} /* 고정 헤더에 앵커 제목이 가려지지 않게 */ ::selection{background:var(--point);color:#fff} body.dark ::selection{background:var(--point);color:#111} body{-webkit-tap-highlight-color:transparent} button,a{touch-action:manipulation} /* 모바일 더블탭 지연 제거 */ @media(max-width:520px){input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{font-size:16px}} /* iOS 포커스 확대 방지 */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--point) 55%,transparent);border-radius:8px;border:3px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--point)} ::-webkit-scrollbar-track{background:transparent} .skip-link{position:fixed;left:14px;top:-60px;z-index:200;background:var(--point);color:#fff;font-family:var(--sans);font-weight:700;font-size:.88rem;padding:11px 20px;border-radius:12px;text-decoration:none;transition:top .18s;box-shadow:0 6px 18px rgba(0,0,0,.25)} .skip-link:focus-visible{top:12px} /* 2026-08-06: '본문 바로가기'가 화면만 내리고 키보드 포커스는 헤더에 남아 있었다. 다음 Tab 이 다시 메뉴로 돌아가 버려 링크가 사실상 무용지물이었다.
로 포커스를 받게 하되, 마우스 클릭 시 외곽선이 뜨지 않도록 프로그램적 포커스에는 링을 숨긴다(키보드 사용자에게는 링크 자체가 이미 보인다). */ #main:focus{outline:none} /* ── 모바일 여백·UX 개선 ── */ @media(max-width:600px){ .wrap{padding:0 16px} /* 좌우 24→16px: 화면을 더 넓게 */ .page-pad{padding:34px 0 52px} /* 상단 54→34px: 첫 콘텐츠가 빨리 보이게 */ .sec-desc{font-size:.9rem;margin-bottom:22px;padding:0 2px} .aihx{padding:16px 14px 12px;border-radius:16px} /* 연대기 카드 여백 축소 */ .aihx-head p{font-size:.8rem} .sp{padding:16px 17px} /* 홈 소구 카드 여백 */ .hero{padding:34px 0 20px} /* 히어로 상단 60→34px */ .comic{margin-top:8px} /* HOW TO USE 만화 위 간격 */ } @media(max-width:400px){ .wrap{padding:0 13px} /* 초소형 화면 추가 축소 */ .aihx-card,.vibe-card{flex-basis:82vw} /* 카드가 화면 폭에 맞게 — 한 장씩 스냅 */ } /* 가로 스크롤 영역: 컨테이너 패딩 밖까지 흘러 답답함 해소 (모바일) */ @media(max-width:600px){ .aihx-strip{margin:0 -14px;padding-left:14px;padding-right:14px} } /* 모달이 열려 있으면 배경 스크롤 잠금 (모든 *-mask.open 공통) */ body:has([class*="-mask"].open),body:has([class*="-mask"].on){overflow:hidden} /* 맨 위로 버튼 */ /* ═══════════════════════════════════════════════ 미감 다듬기 — 움직임·그림자·눌림감 한 곳에서 곡선과 그림자를 정하고 새 컴포넌트가 함께 쓴다. ═══════════════════════════════════════════════ */ :root{ /* 감속 곡선: 빠르게 나와 부드럽게 멈춘다 */ --e-out:cubic-bezier(.32,.72,0,1); --e-soft:cubic-bezier(.4,0,.2,1); --e-spring:cubic-bezier(.34,1.28,.64,1); /* 그림자는 한 겹이 아니라, 넓고 옅은 주변광 + 좁고 진한 접지광 두 겹 */ --sh-1:0 1px 2px rgba(24,20,32,.06), 0 2px 8px rgba(24,20,32,.05); --sh-2:0 2px 6px rgba(24,20,32,.07), 0 8px 24px rgba(24,20,32,.08); --sh-3:0 4px 12px rgba(24,20,32,.09), 0 18px 48px rgba(24,20,32,.13); --ring:0 0 0 3px rgba(107,78,142,.16); } body.dark{ --sh-1:0 1px 2px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.26); --sh-2:0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34); --sh-3:0 4px 12px rgba(0,0,0,.46), 0 18px 48px rgba(0,0,0,.44); --ring:0 0 0 3px rgba(183,156,255,.22); } /* ── 눌림감: 손가락에 반응한다는 감각 ── */ .hbs-item,.hbt,.nickmenu button,.ucard-acts button,.ucard-item,.fol-chip,.adm-rrow button, .bar-search,.dt-btn,.dfc-seg button,.meme-chip,.meme-btn{ transition:transform .16s var(--e-out),background-color .16s var(--e-soft), color .16s var(--e-soft),border-color .16s var(--e-soft),box-shadow .2s var(--e-soft); } .hbs-item:active,.nickmenu button:active,.ucard-item:active,.fol-chip:active, .bar-search:active,.dt-btn:active,.meme-btn:active{ transform:scale(.975) } .hbt:active{ transform:scale(.92) } /* ── 초점 링: 키보드 사용자에게만, 두툼하고 둥글게 ── */ .hbs-item:focus-visible,.hbt:focus-visible,.nickmenu button:focus-visible, .ucard-acts button:focus-visible,.fol-chip:focus-visible,.bar-search:focus-visible, .hbs-input:focus-visible,.dt-btn:focus-visible{ outline:none; box-shadow:var(--ring); } /* ── 숫자는 자릿수가 흔들리지 않게 ── */ .ms-num,.adm-num,.mt-tier-score,.hbs-tg,.art,.sb-badge,#dtSizeVal{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; } /* ── 통합 검색: 재질감과 리듬 ── */ .hbs-mask{background:rgba(20,16,26,.42);backdrop-filter:blur(6px) saturate(1.3)} .hbs-box{border-radius:18px;box-shadow:var(--sh-3); animation:hbsIn .34s var(--e-out)} @keyframes hbsIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}} .hbs-head{padding:13px 16px 12px;gap:11px} .hbs-head .hbs-ic{opacity:.5;font-size:.95rem} .hbs-input{font-size:1.02rem;letter-spacing:-.005em} .hbs-esc{border-radius:7px;padding:3px 7px;letter-spacing:.06em;opacity:.7} .hbs-esc:hover{opacity:1} .hbs-list{padding:7px} .hbs-item{padding:9px 11px;border-radius:11px;gap:11px} .hbs-item.on{background:var(--soft);box-shadow:inset 0 0 0 1.5px rgba(107,78,142,.5)} body.dark .hbs-item.on{box-shadow:inset 0 0 0 1.5px rgba(183,156,255,.5)} .hbs-em{width:26px;font-size:1.05rem;opacity:.92} .hbs-nm{font-size:.93rem;letter-spacing:-.005em} .hbs-ds{font-size:.75rem;opacity:.85;margin-top:2px} .hbs-tg{font-size:.62rem;letter-spacing:.04em;padding:2px 8px;opacity:.8; border-radius:999px;background:var(--soft)} body.dark .hbs-tg{background:rgba(255,255,255,.05)} .hbs-foot{padding:8px 15px;gap:14px;letter-spacing:.02em;opacity:.75} /* ── 헤더 검색 버튼: 눌러보고 싶게 ── */ .bar-search{border-color:rgba(255,255,255,.22);border-radius:10px;padding:6px 11px; background:rgba(255,255,255,.06)} .bar-search:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)} .bar-search kbd{border-radius:5px;padding:1px 5px;letter-spacing:.03em; background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)} /* ── 하단 탭바: 얇은 경계, 조용한 선택 표시 ── */ .hb-tabbar{border-top:1px solid rgba(120,110,130,.16);box-shadow:0 -1px 0 rgba(255,255,255,.5) inset} body.dark .hb-tabbar{border-top-color:rgba(255,255,255,.09);box-shadow:none} .hb-tabbar .hbt{position:relative;padding:8px 2px 7px;gap:3px;letter-spacing:-.01em} .hb-tabbar .hbt .hbt-i{transition:transform .34s var(--e-spring)} .hb-tabbar .hbt.on .hbt-i{transform:translateY(-2px) scale(1.06)} .hb-tabbar .hbt::after{content:'';position:absolute;top:2px;left:50%;width:0;height:3px; border-radius:999px;background:var(--point);opacity:0; transform:translateX(-50%);transition:width .3s var(--e-out),opacity .22s var(--e-soft)} .hb-tabbar .hbt.on::after{width:16px;opacity:1} /* ── 닉네임 메뉴: 클릭한 자리에서 피어나게 ── */ .nickmenu{border-radius:14px;box-shadow:var(--sh-3);padding:7px; transform-origin:top left;animation:nmIn .22s var(--e-out)} @keyframes nmIn{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}} .nickmenu .nm-head{padding:6px 9px 9px;gap:9px} .nickmenu .nm-ava{width:28px;height:28px;box-shadow:var(--sh-1);background:var(--point)} @supports (background:color-mix(in srgb,red 50%,blue)){ .nickmenu .nm-ava{background:linear-gradient(150deg,var(--point),color-mix(in srgb,var(--point) 72%,#000))} } .nickmenu .nm-nick{letter-spacing:-.01em} .nickmenu button{padding:9px 10px;border-radius:9px;letter-spacing:-.005em} .nickmenu button .nmi{opacity:.85} .nickmenu .nm-note{padding:7px 10px 2px;line-height:1.5;opacity:.85} /* ── 회원 카드 ── */ .ucard-mask{background:rgba(20,16,26,.44);backdrop-filter:blur(5px) saturate(1.25)} .ucard{border-radius:20px;box-shadow:var(--sh-3);animation:ucIn .36s var(--e-out)} @keyframes ucIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .ucard-head{padding:17px 18px 15px;gap:13px} .ucard-ava{width:46px;height:46px;box-shadow:var(--sh-1);background:var(--point)} @supports (background:color-mix(in srgb,red 50%,blue)){ .ucard-ava{background:linear-gradient(150deg,var(--point),color-mix(in srgb,var(--point) 70%,#000))} } .ucard-nick{letter-spacing:-.01em} .ucard-sub{opacity:.85;letter-spacing:.005em} .ucard-x{width:32px;height:32px;border-radius:50%;display:flex;align-items:center; justify-content:center;transition:background .16s var(--e-soft)} .ucard-x:hover{background:var(--soft)} .ucard-acts{padding:12px 18px;gap:8px} .ucard-acts button{border-radius:11px;padding:10px 8px;font-weight:600;letter-spacing:-.005em} .ucard-acts button:hover{box-shadow:var(--sh-1)} .ucard-acts button.on{box-shadow:0 2px 10px rgba(107,78,142,.28)} .ucard-list{padding:6px 12px 14px} .ucard-item{padding:11px 8px;border-radius:9px;border-bottom:1px solid transparent; background-image:linear-gradient(var(--line-soft),var(--line-soft)); background-size:calc(100% - 16px) 1px;background-position:8px 100%;background-repeat:no-repeat} .ucard-item:last-child{background-image:none} .ucard-t{letter-spacing:-.005em} .ucard-m{opacity:.85;letter-spacing:.01em} /* ── 팔로우 칩 ── */ .fol-chip{border-radius:999px;padding:6px 12px;letter-spacing:-.005em} .fol-chip:hover{box-shadow:var(--sh-1)} /* ── 관리자 대시보드 ── */ .adm-card{transition:transform .18s var(--e-out),box-shadow .2s var(--e-soft)} .adm-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .adm-num{letter-spacing:-.02em} .adm-recent{border-radius:14px;box-shadow:var(--sh-1)} .adm-recent h6{letter-spacing:.03em} .adm-rrow{transition:background .16s var(--e-soft)} .adm-rrow:hover{background:var(--soft)} .adm-rrow button{border-radius:8px;padding:4px 9px} /* ── 그림판: 스크롤바와 도구 ── */ .draw-pgsb{transition:opacity .28s var(--e-soft)} .draw-pgsb-thumb{transition:left .2s var(--e-out),right .2s var(--e-out),filter .18s var(--e-soft)} .dt-btn{letter-spacing:-.005em;box-shadow:none} .dt-btn.on,.dt-btn.primary,.dt-btn.pw-on{box-shadow:0 1px 4px rgba(107,78,142,.22)} .dt-color{transition:transform .18s var(--e-spring),box-shadow .18s var(--e-soft)} .dt-color:hover{transform:scale(1.14)} .dt-color.on{transform:scale(1.1)} /* ── 움직임을 줄이고 싶은 분에게는 정지 상태로 ── */ @media (prefers-reduced-motion:reduce){ .hbs-box,.ucard,.nickmenu{animation:none!important} .hb-tabbar .hbt .hbt-i,.hbt::after,.adm-card,.dt-color{transition:none!important} .hbs-item:active,.nickmenu button:active,.ucard-item:active,.fol-chip:active, .bar-search:active,.dt-btn:active,.meme-btn:active,.hbt:active{transform:none!important} } /* ═══════════════════════════════════════════════ 회원 상호작용 — 닉네임 메뉴 · 팔로우 · 쪽지 통합 ═══════════════════════════════════════════════ */ /* 상단바 쪽지 버튼은 감춘다 (마이페이지로 통합) */ #dmOpen{display:none!important} /* 프로필 칩의 안 읽은 쪽지 표시 — 아이콘 없이 점 하나로 */ .auth-chip{position:relative} .auth-chip .chip-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%; background:var(--new);border:2px solid var(--bar);display:none} .auth-chip .chip-dot.on{display:block} /* ── 닉네임 우클릭 메뉴 ── */ .nickmenu{position:fixed;z-index:9800;min-width:186px;background:var(--bg); border:1px solid var(--line-soft);border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.22);padding:6px;display:none; font-family:var(--body);animation:nmIn .12s ease} .nickmenu.on{display:block} @keyframes nmIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} .nickmenu .nm-head{display:flex;align-items:center;gap:8px;padding:7px 9px 8px; border-bottom:1px solid var(--line-soft);margin-bottom:5px} .nickmenu .nm-ava{width:26px;height:26px;border-radius:50%;background:var(--point);color:#fff; display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex:none} .nickmenu .nm-nick{font-weight:700;font-size:.9rem;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nickmenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left; background:transparent;border:0;border-radius:8px;padding:9px 10px;cursor:pointer; font-family:var(--body);font-size:.87rem;color:var(--ink)} .nickmenu button:hover{background:var(--soft)} .nickmenu button .nmi{width:18px;text-align:center;flex:none} .nickmenu button.danger{color:var(--new)} .nickmenu .nm-note{padding:6px 10px 3px;font-size:.7rem;color:var(--muted)} body.dark .nickmenu{background:var(--soft);border-color:#3a3a44} /* 우클릭 가능한 닉네임에 살짝 힌트 */ .nick-actionable{cursor:context-menu;border-bottom:1px dotted transparent} .nick-actionable:hover{border-bottom-color:var(--muted)} /* ── 회원 카드(지난 글) ── */ .ucard-mask{position:fixed;inset:0;z-index:9750;background:rgba(12,10,16,.55); display:none;align-items:center;justify-content:center;padding:16px} .ucard-mask.on{display:flex} .ucard{width:min(520px,100%);max-height:82vh;background:var(--bg);border:1px solid var(--line-soft); border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden} .ucard-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line-soft)} .ucard-ava{width:44px;height:44px;border-radius:50%;background:var(--point);color:#fff; display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:700;flex:none} .ucard-id{flex:1;min-width:0} .ucard-nick{font-family:var(--disp);font-size:1.05rem;color:var(--ink)} .ucard-sub{font-size:.74rem;color:var(--muted);margin-top:2px} .ucard-x{background:none;border:0;font-size:1.4rem;color:var(--muted);cursor:pointer;line-height:1;flex:none} .ucard-acts{display:flex;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap} .ucard-acts button{flex:1;min-width:96px;border:1px solid var(--line-soft);background:var(--bg); color:var(--ink);border-radius:10px;padding:9px 8px;cursor:pointer; font-family:var(--body);font-size:.82rem} .ucard-acts button:hover{border-color:var(--point);color:var(--point)} .ucard-acts button.on{background:var(--point);color:#fff;border-color:var(--point)} .ucard-list{overflow-y:auto;padding:8px 10px 12px} .ucard-item{display:block;width:100%;text-align:left;background:transparent;border:0; border-bottom:1px solid var(--line-soft);padding:10px 6px;cursor:pointer;font-family:var(--body)} .ucard-item:last-child{border-bottom:0} .ucard-item:hover{background:var(--soft)} .ucard-t{font-size:.88rem;color:var(--ink);display:block; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ucard-m{font-size:.71rem;color:var(--muted);margin-top:3px;display:block} .ucard-empty{padding:26px 10px;text-align:center;color:var(--muted);font-size:.85rem} body.dark .ucard{background:var(--soft);border-color:#3a3a44} body.dark .ucard-acts button{background:transparent} /* ── 마이페이지: 쪽지 강조 · 팔로우 목록 ── */ .side-box h4 .sb-badge{display:none;margin-left:6px;background:var(--new);color:#fff; border-radius:999px;padding:1px 7px;font-size:.66rem;vertical-align:1px} .side-box h4 .sb-badge.on{display:inline-block} .fol-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .fol-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-soft); background:var(--bg);color:var(--ink);border-radius:999px;padding:5px 10px;cursor:pointer; font-family:var(--body);font-size:.78rem} .fol-chip:hover{border-color:var(--point);color:var(--point)} .fol-empty{font-size:.78rem;color:var(--muted);padding:4px 0} /* ── 관리자 대시보드 보강 ── */ .adm-cards{flex-wrap:wrap} .adm-card.alert .adm-num{color:var(--new)} .adm-recent{margin-top:10px;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden} .adm-recent h6{margin:0;padding:8px 12px;background:var(--soft);font-family:var(--sans); font-size:.74rem;font-weight:700;color:var(--muted);letter-spacing:.02em; display:flex;justify-content:space-between;align-items:center} .adm-recent .arw{max-height:168px;overflow-y:auto} .adm-rrow{display:flex;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line-soft); font-family:var(--body);font-size:.78rem} .adm-rrow .arn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .adm-rrow .art{color:var(--muted);font-size:.71rem;flex:none} .adm-rrow button{border:1px solid var(--line-soft);background:var(--bg);color:var(--muted); border-radius:7px;padding:3px 8px;font-size:.7rem;cursor:pointer;flex:none;font-family:var(--body)} .adm-rrow button:hover{border-color:var(--point);color:var(--point)} /* ═══════════════════════════════════════════════ 커뮤니티 표준 UX 보강 — 통합검색 · 모바일 탭바 ═══════════════════════════════════════════════ */ /* ── 통합 검색 ── */ .hbs-mask{position:fixed;inset:0;z-index:9700;background:rgba(12,10,16,.55); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center; padding:clamp(40px,10vh,110px) 14px 20px} .hbs-mask.open{display:flex} .hbs-box{width:min(560px,100%);background:var(--bg);border:1px solid var(--line-soft); border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.28);overflow:hidden; display:flex;flex-direction:column;max-height:min(70vh,540px);animation:hbsIn .16s ease} @keyframes hbsIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .hbs-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line-soft)} .hbs-head .hbs-ic{font-size:1.05rem;opacity:.75;flex:none} .hbs-input{flex:1;border:0;outline:0;background:transparent;color:var(--ink); font-family:var(--body);font-size:1rem;min-width:0} .hbs-input::placeholder{color:var(--muted)} .hbs-esc{flex:none;font-family:var(--sans);font-size:.66rem;font-weight:700;color:var(--muted); border:1px solid var(--line-soft);border-radius:6px;padding:3px 6px;background:var(--soft);cursor:pointer} .hbs-list{overflow-y:auto;overscroll-behavior:contain;padding:6px} .hbs-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left; background:transparent;border:0;border-radius:10px;padding:10px 11px;cursor:pointer; font-family:var(--body);color:var(--ink);line-height:1.35} .hbs-item:hover,.hbs-item.on{background:var(--soft)} .hbs-item.on{box-shadow:inset 0 0 0 1.5px var(--point)} .hbs-em{font-size:1.1rem;flex:none;width:24px;text-align:center} .hbs-tx{flex:1;min-width:0} .hbs-nm{font-size:.94rem;font-weight:700;display:block} .hbs-ds{font-size:.76rem;color:var(--muted);display:block;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hbs-tg{flex:none;font-family:var(--sans);font-size:.63rem;font-weight:700;color:var(--muted); border:1px solid var(--line-soft);border-radius:999px;padding:2px 8px} .hbs-none{padding:26px 14px;text-align:center;color:var(--muted);font-family:var(--body);font-size:.88rem} .hbs-foot{border-top:1px solid var(--line-soft);padding:7px 13px;display:flex;gap:12px; font-family:var(--sans);font-size:.68rem;color:var(--muted)} @media (max-width:640px){ .hbs-foot{display:none} .hbs-box{max-height:76vh} } body.dark .hbs-box{background:var(--soft);border-color:#3a3a44} /* 헤더 검색 버튼 */ .bar-search{display:inline-flex;align-items:center;gap:6px;background:transparent; border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px; padding:6px 12px;cursor:pointer;font-family:var(--sans);font-size:.76rem;letter-spacing:.02em} .bar-search:hover{background:rgba(255,255,255,.12)} .bar-search kbd{font-family:var(--sans);font-size:.62rem;opacity:.7; border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:0 4px} @media (max-width:1000px){ .bar-search kbd{display:none} .bar-search{padding:6px 9px} } @media (max-width:640px){ .bar-search{display:none} } /* ── 모바일 하단 탭바 ── */ .hb-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:130; background:var(--bg); /* color-mix 미지원 대비 */ background:color-mix(in srgb,var(--bg) 92%,transparent); -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px); box-shadow:0 -2px 14px rgba(0,0,0,.06); border-top:1px solid var(--line-soft); padding-bottom:env(safe-area-inset-bottom,0px)} .hb-tabbar .hbt{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; background:transparent;border:0;cursor:pointer;padding:7px 2px 6px; font-family:var(--sans);font-size:.63rem;font-weight:700;color:var(--muted); -webkit-tap-highlight-color:transparent} .hb-tabbar .hbt .hbt-i{font-size:1.16rem;line-height:1.1} .hb-tabbar .hbt.on{color:var(--point)} .hb-tabbar .hbt.on .hbt-i{transform:translateY(-1px)} .hb-tabrow{display:flex;max-width:var(--max);margin:0 auto} @media (max-width:820px){ .hb-tabbar{display:block} body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))} /* 플로팅 버튼을 탭바 위로 밀어 겹침 방지 */ .to-top{bottom:calc(70px + env(safe-area-inset-bottom,0px))} .jin-fab{bottom:calc(70px + env(safe-area-inset-bottom,0px))} } @media (max-width:820px) and (display-mode:standalone){ .hb-tabbar{display:block} } .to-top{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:120;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:var(--point);color:#fff;font-size:1.15rem;line-height:1;box-shadow:0 8px 22px rgba(107,78,142,.35);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .22s,transform .22s} .to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)} .to-top:hover{filter:brightness(1.08)} body.dark .to-top{box-shadow:0 8px 22px rgba(0,0,0,.45)} @media(max-width:560px){.to-top{width:42px;height:42px;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}} body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.78;-webkit-font-smoothing:antialiased} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} /* 모바일 가로 오버플로 가드: 폭 넘치는 요소가 있어도 페이지가 옆으로 밀리지 않게 */ html,body{overflow-x:hidden;overflow-x:clip} .story-board,.svc-detail,.sb-empty{max-width:100%;min-width:0} /* ============ MENU BAR — always visible, hover-grow items ============ */ /* ── 구분 띠 — 작업과 상담 사이. 한 장의 사진을 8칸으로 나눠 쓴다. 평소엔 배경으로 물러나 있다가 마우스가 닿은 칸만 제 색을 되찾는다. ── */ .hb-band{display:flex;gap:9px;margin:46px auto 42px;max-width:var(--max)} .hb-band i{flex:1;aspect-ratio:97 / 231;display:block; background-image:var(--hb-src); background-size:800% 100%; background-position:calc(var(--n) * 100% / 7) 50%; background-repeat:no-repeat; opacity:.5;filter:saturate(.78); transition:opacity .4s var(--e-out),filter .4s var(--e-out)} .hb-band i:hover{opacity:1;filter:saturate(1)} @media (max-width:640px){ .hb-band{margin:32px auto 30px;gap:6px} } body.dark .hb-band i{opacity:.42;filter:saturate(.7) brightness(.94)} body.dark .hb-band i:hover{opacity:.92;filter:saturate(.96) brightness(1)} /* 손가락에는 hover 가 없으니 전부 조금 더 또렷하게 */ @media (hover:none){ .hb-band i{opacity:.58} } @media (prefers-reduced-motion:reduce){ .hb-band i{transition:none} } header.bar{background:var(--bar);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 22px rgba(0,0,0,.13)} .bar-top{max-width:var(--max);margin:0 auto;padding:13px 24px 9px;display:flex;align-items:center;justify-content:space-between;gap:16px} .logo{display:flex;align-items:center;gap:11px;text-decoration:none;cursor:pointer;background:none;border:0} .logo .mark{width:38px;height:38px;border:2px solid #fff;border-radius:12px;display:grid;place-items:center;background:#2e2e2e} body.dark .logo .mark{background:#2e2e2e;border-color:#b79cff} .logo .lt{font-family:var(--disp);font-weight:400;color:#fff;font-size:1.18rem;line-height:1.1} .logo .ls{font-size:.6rem;color:#9b9b9b;letter-spacing:.14em;font-family:var(--sans)} /* 2026-08-03: .bar-cta(포트폴리오 보기) 제거 — 자리는 메뉴 접기 토글(.bar-fold)이 이어받음 */ /* 로그인/회원 영역 */ .bar-right{display:flex;align-items:center;gap:10px} .auth-btn{font-family:var(--sans);font-size:.78rem;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 15px;cursor:pointer;transition:background .18s,transform .18s;white-space:nowrap} .theme-toggle{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:1rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:50%;cursor:pointer;transition:background .18s,transform .18s;line-height:1} .theme-toggle:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)} .auth-btn:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)} .auth-user{display:none;align-items:center;gap:9px} .auth-user.on{display:flex} .auth-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 6px 5px 5px} .auth-ava{width:26px;height:26px;border-radius:50%;background:var(--point);color:#fff;font-family:var(--sans);font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .auth-name{font-family:var(--sans);font-size:.8rem;font-weight:600;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .auth-chip{cursor:pointer;transition:background .15s} .auth-chip:hover{background:rgba(255,255,255,.2)} .auth-talent{font-family:var(--sans);font-size:.78rem;font-weight:700;color:#ffd966;white-space:nowrap} @media(max-width:560px){.auth-talent{display:none}} .auth-out{font-family:var(--sans);font-size:.72rem;color:rgba(255,255,255,.7);background:transparent;border:0;cursor:pointer;padding:4px 6px;border-radius:8px} .auth-out:hover{color:#fff;background:rgba(255,255,255,.12)} @media(max-width:560px){.auth-name{max-width:78px}} /* 로그인 모달 */ /* 🔴 2026-08-09: z-index 120 → 215. 탭바(130)보다 낮아 로그인 창도 같은 위험이 있었다. */ .auth-mask{position:fixed;inset:0;background:rgba(17,17,17,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:215;display:none;align-items:flex-start;justify-content:center;padding:24px 20px;overflow-y:auto} .auth-mask.on{display:flex} .auth-card{background:#fff;border:1px solid var(--line-soft);border-radius:22px;box-shadow:0 7px 30px rgba(0,0,0,.12);width:100%;max-width:380px;padding:26px 24px 24px;position:relative;margin:auto 0} body.dark .auth-card{background:var(--soft)} /* 마이페이지 */ .my-card{max-width:480px} .my-head{display:flex;align-items:center;gap:14px;margin-bottom:18px} .my-ava{width:54px;height:54px;border-radius:50%;background:var(--point);color:#fff;font-family:var(--disp);font-size:1.5rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .my-nick{font-family:var(--disp);font-size:1.3rem;color:var(--ink)} .my-email{font-family:var(--body);font-size:.82rem;color:var(--muted)} .my-head{position:relative} .my-tier-badge{margin-left:auto;align-self:flex-start;font-size:.72rem;padding:3px 11px} /* 등급·진행도 카드 */ .my-tier{border:1.5px solid var(--line-soft);border-radius:16px;padding:14px 16px;margin-bottom:14px;background:var(--soft)} body.dark .my-tier{background:var(--bg)} .mt-tier-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px} .mt-tier-name{font-family:var(--disp);font-size:1.12rem;color:var(--ink)} .mt-tier-score{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--point)} .mt-bar{height:9px;border-radius:999px;background:var(--line-soft);overflow:hidden} body.dark .mt-bar{background:rgba(255,255,255,.1)} .mt-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--point),#9b6bf5);transition:width .6s cubic-bezier(.4,0,.2,1)} .mt-next{font-family:var(--body);font-size:.74rem;color:var(--muted);margin-top:8px} /* 활동 통계 */ .my-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:18px} .ms-cell{border:1.5px solid var(--line-soft);border-radius:14px;padding:13px 6px;text-align:center;background:var(--soft)} body.dark .ms-cell{background:var(--bg)} .ms-num{font-family:var(--disp);font-size:1.5rem;color:var(--point);line-height:1.1} .ms-lbl{font-family:var(--body);font-size:.72rem;color:var(--muted);margin-top:3px} /* 글 필터 */ .mp-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px} .mp-chip{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--muted);background:var(--soft);border:1px solid var(--line-soft);border-radius:999px;padding:4px 11px;cursor:pointer;transition:all .14s} body.dark .mp-chip{background:var(--bg)} .mp-chip:hover{border-color:var(--point);color:var(--ink)} .mp-chip.on{background:var(--point);color:#fff;border-color:var(--point)} .mp-head{font-family:var(--disp);font-size:1.1rem;color:var(--ink);margin-bottom:12px} .mp-head span{color:var(--point)} .mp-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px} .mp-item{border:1px solid var(--line-soft);border-radius:12px;padding:11px 13px;background:var(--soft);cursor:pointer;transition:border-color .15s,transform .12s} .mp-item:hover{border-color:var(--point);transform:translateX(2px)} .mp-it-top{display:flex;align-items:center;gap:8px;margin-bottom:3px} .mp-it-board{font-family:var(--sans);font-size:.68rem;font-weight:700;color:#fff;background:var(--point);border-radius:999px;padding:2px 9px} .mp-it-date{font-family:var(--body);font-size:.72rem;color:var(--muted);margin-left:auto} .mp-it-rec{font-family:var(--sans);font-size:.68rem;font-weight:700;color:var(--point)} .mp-it-title{font-family:var(--body);font-size:.9rem;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mp-it-body{font-family:var(--body);font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .mp-empty{font-family:var(--body);font-size:.86rem;color:var(--muted);text-align:center;padding:24px 0} /* 관리자 문의함 */ .my-inbox{margin-top:22px;padding-top:20px;border-top:1px dashed var(--line-soft)} /* 관리자 대시보드 */ .my-admin{margin-top:22px;padding:18px 16px 16px;border:1.5px solid var(--point);border-radius:16px;background:linear-gradient(180deg,rgba(107,78,142,.05),transparent 60%)} /* ===== 마이페이지: PC 대시보드 레이아웃 ===== */ @media (min-width:860px){ #myMask .my-card.my-card{ max-width:980px; width:94vw; padding:26px 28px 30px; display:grid; grid-template-columns:1fr 1fr; grid-template-areas: "head head" "tier stats" "posts side" "admin admin"; gap:18px 22px; align-items:start; } #myMask .my-head{grid-area:head; margin-bottom:2px} #myMask .my-tier{grid-area:tier; margin:0} #myMask .my-stats{grid-area:stats; margin:0; grid-template-columns:repeat(3,1fr)} #myMask .my-posts{grid-area:posts} #myMask .my-side{grid-area:side; display:flex; flex-direction:column; gap:14px} #myMask .my-admin{grid-area:admin; margin-top:6px} #myMask .mp-list{max-height:340px} /* 대시보드에서 프로필/통계를 조금 더 크게 */ #myMask .my-ava{width:62px;height:62px;font-size:1.7rem} #myMask .my-nick{font-size:1.32rem} #myMask .ms-num{font-size:1.55rem} #myMask .adm-cards{grid-template-columns:repeat(5,1fr)} #myMask .adm-list{max-height:360px} } /* 모바일에서는 side 영역이 posts 아래로 자연스럽게 흐름 */ .my-side{display:flex;flex-direction:column;gap:14px;margin-top:6px} /* ===== 사이드 위젯 (쪽지함 요약 + 빠른 메뉴) ===== */ .side-box{border:1.5px solid var(--line-soft);border-radius:16px;padding:14px 14px 12px;background:var(--bg)} .side-box h4{margin:0 0 10px;font-size:.98rem;display:flex;align-items:center;gap:6px} .side-box .sb-more{margin-left:auto;font-size:.78rem;color:var(--point);cursor:pointer;background:none;border:none} .dm-mini{display:flex;flex-direction:column;gap:7px;max-height:190px;overflow-y:auto} .dm-mini-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:11px;background:var(--soft);cursor:pointer;transition:background .15s} .dm-mini-item:hover{background:rgba(107,78,142,.08)} .dm-mini-item.unread{background:rgba(107,78,142,.1)} .dm-mini-ava{width:30px;height:30px;border-radius:50%;background:var(--point);color:#fff;display:grid;place-items:center;font-size:.82rem;flex:0 0 auto} .dm-mini-b{min-width:0;flex:1} .dm-mini-nm{font-size:.83rem;font-weight:700;display:flex;align-items:center;gap:5px} .dm-mini-pv{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dm-dot{width:7px;height:7px;border-radius:50%;background:#e0403f;flex:0 0 auto} .dm-empty{font-size:.82rem;color:var(--muted);text-align:center;padding:14px 0} .side-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px} .side-quick button{font-family:inherit;font-size:.83rem;padding:10px 6px;border:1.5px solid var(--line-soft);border-radius:11px;background:var(--bg);cursor:pointer;transition:transform .1s,border-color .15s} .side-quick button:hover{border-color:var(--point);transform:translateY(-1px)} /* 헤더 쪽지 아이콘 + 뱃지 */ .dm-icon-btn{position:relative;background:none;border:none;cursor:pointer;font-size:1.15rem;padding:4px 6px;line-height:1;color:var(--ink)} .dm-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#e0403f;color:#fff;font-size:.64rem;font-weight:800;display:none;align-items:center;justify-content:center;line-height:16px} .dm-badge.on{display:flex} /* ===== 쪽지 모달 ===== */ .dm-card{max-width:720px;width:94vw;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:88vh} .dm-top{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1.5px solid var(--line-soft)} .dm-top .dm-ttl{font-size:1.08rem;font-weight:800;display:flex;align-items:center;gap:7px} .dm-newbtn{margin-left:auto;font-family:inherit;font-size:.84rem;font-weight:700;padding:8px 14px;border-radius:10px;border:none;background:var(--point);color:#fff;cursor:pointer} .dm-body{display:flex;min-height:0;flex:1} .dm-threads{width:240px;border-right:1.5px solid var(--line-soft);overflow-y:auto;flex:0 0 auto} .dm-thread{display:flex;align-items:center;gap:9px;padding:12px 13px;cursor:pointer;border-bottom:1px solid var(--line-soft);transition:background .14s} .dm-thread:hover{background:var(--soft)} .dm-thread.on{background:rgba(107,78,142,.1)} .dm-thread .dm-mini-ava{width:34px;height:34px} .dm-th-b{min-width:0;flex:1} .dm-th-nm{font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:5px} .dm-th-pv{font-size:.77rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dm-th-time{font-size:.68rem;color:var(--muted);flex:0 0 auto;align-self:flex-start;margin-top:3px} .dm-conv{flex:1;display:flex;flex-direction:column;min-width:0} .dm-conv-head{padding:12px 16px;border-bottom:1.5px solid var(--line-soft);font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:8px} .dm-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:220px;max-height:44vh} .dm-bubble{max-width:74%;padding:9px 13px;border-radius:15px;font-size:.9rem;line-height:1.5;word-break:break-word;white-space:pre-wrap} .dm-bubble.me{align-self:flex-end;background:var(--point);color:#fff;border-bottom-right-radius:5px} .dm-bubble.you{align-self:flex-start;background:var(--soft);border-bottom-left-radius:5px} .dm-bubble .dm-time{display:block;font-size:.66rem;opacity:.7;margin-top:3px} .dm-input{display:flex;gap:9px;padding:12px 14px;border-top:1.5px solid var(--line-soft)} .dm-input textarea{flex:1;resize:none;font-family:inherit;font-size:.9rem;padding:9px 12px;border:1.5px solid var(--line-soft);border-radius:11px;background:var(--bg);color:var(--ink);max-height:96px} .dm-send{font-family:inherit;font-weight:700;padding:0 18px;border:none;border-radius:11px;background:var(--point);color:#fff;cursor:pointer} .dm-send:disabled{opacity:.5;cursor:default} .dm-blank{flex:1;display:grid;place-items:center;color:var(--muted);font-size:.9rem;text-align:center;padding:30px} /* 새 쪽지 작성 */ .dm-compose{padding:16px 18px;display:none;flex-direction:column;gap:11px;border-bottom:1.5px solid var(--line-soft)} .dm-compose.on{display:flex} .dm-compose label{font-size:.82rem;font-weight:700;color:var(--muted)} .dm-recip{position:relative} .dm-recip input{width:100%;font-family:inherit;font-size:.9rem;padding:9px 12px;border:1.5px solid var(--line-soft);border-radius:11px;background:var(--bg);color:var(--ink)} .dm-suggest{position:absolute;left:0;right:0;top:calc(100% + 3px);background:var(--bg);border:1.5px solid var(--line-soft);border-radius:11px;overflow:hidden;z-index:5;max-height:200px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.12)} .dm-suggest div{padding:9px 12px;cursor:pointer;font-size:.87rem;display:flex;align-items:center;gap:8px} .dm-suggest div:hover{background:var(--soft)} @media (max-width:640px){ .dm-body{flex-direction:column} .dm-threads{width:auto;max-height:150px;border-right:none;border-bottom:1.5px solid var(--line-soft)} } /* ===== 관리자 확장: 도구 그리드 · 공지 · 회원 ===== */ .adm-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin:4px 0 14px} .adm-tool{display:flex;flex-direction:column;gap:3px;padding:12px 12px;border:1.5px solid var(--line-soft);border-radius:12px;background:var(--bg);cursor:pointer;text-align:left;transition:transform .12s,border-color .14s;font-family:inherit} .adm-tool:hover{transform:translateY(-2px);border-color:var(--point)} .adm-tool .at-ic{font-size:1.18rem} .adm-tool .at-nm{font-weight:800;font-size:.88rem} .adm-tool .at-ds{font-size:.72rem;color:var(--muted);line-height:1.35} .adm-panel{display:none;border:1.5px solid var(--line-soft);border-radius:13px;padding:14px;margin-bottom:12px;background:var(--soft)} .adm-panel.on{display:block} .adm-panel h5{margin:0 0 10px;font-size:.94rem;display:flex;align-items:center;gap:7px} .adm-panel h5 .ap-x{margin-left:auto;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted)} .adm-field{width:100%;font-family:inherit;font-size:.9rem;padding:9px 12px;border:1.5px solid var(--line-soft);border-radius:10px;background:var(--bg);color:var(--ink);margin-bottom:9px} textarea.adm-field{resize:vertical;min-height:70px} .adm-primary{font-family:inherit;font-weight:700;padding:9px 18px;border:none;border-radius:10px;background:var(--point);color:#fff;cursor:pointer} .adm-mem-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line-soft);font-size:.86rem} .adm-mem-row .amr-ava{width:30px;height:30px;border-radius:50%;background:var(--point);color:#fff;display:grid;place-items:center;font-size:.8rem;flex:0 0 auto} .adm-mem-row .amr-b{flex:1;min-width:0} .adm-mem-row .amr-nm{font-weight:700} .adm-mem-row .amr-em{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .adm-mem-row .amr-dm{font-family:inherit;font-size:.76rem;padding:5px 10px;border:1.5px solid var(--line-soft);border-radius:8px;background:var(--bg);cursor:pointer;flex:0 0 auto} .adm-note{font-size:.76rem;color:var(--muted);margin-top:8px;line-height:1.45} .adm-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .adm-stat-grid .asg-cell{background:var(--bg);border:1.5px solid var(--line-soft);border-radius:10px;padding:10px;text-align:center} .adm-stat-grid .asg-num{font-size:1.3rem;font-weight:800} .adm-stat-grid .asg-lbl{font-size:.74rem;color:var(--muted)} body.dark .my-admin{background:linear-gradient(180deg,rgba(183,156,255,.08),transparent 60%)} .my-admin-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--disp);font-size:1.1rem;color:var(--point);margin-bottom:14px} .adm-refresh{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--muted);background:var(--bg);border:1.5px solid var(--line-soft);border-radius:999px;padding:5px 12px;cursor:pointer;transition:all .15s} body.dark .adm-refresh{background:var(--soft)} .adm-refresh:hover{border-color:var(--point);color:var(--point);transform:rotate(0deg)} .adm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .adm-card{background:var(--bg);border:1.5px solid var(--line-soft);border-radius:13px;padding:14px 8px;text-align:center;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s;position:relative;overflow:hidden} body.dark .adm-card{background:var(--soft)} .adm-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;opacity:.85} .adm-card[data-goto="posts"]::after{background:#6b4e8e} .adm-card[data-goto="inq"]::after{background:#2e7d6b} .adm-card[data-goto="ctr"]::after{background:#b5642e} .adm-card:hover{transform:translateY(-3px);border-color:var(--point);box-shadow:0 6px 14px rgba(107,78,142,.15)} .adm-num{font-family:var(--disp);font-size:1.6rem;color:var(--point);line-height:1} .adm-lbl{font-family:var(--body);font-size:.76rem;color:var(--muted);margin-top:6px} .adm-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap} .adm-tab{font-family:var(--sans);font-weight:700;font-size:.8rem;color:var(--muted);background:var(--bg);border:1.5px solid var(--line-soft);border-radius:999px;padding:7px 13px;cursor:pointer;transition:all .15s} body.dark .adm-tab{background:var(--soft)} .adm-tab:hover{border-color:var(--point);color:var(--point)} .adm-tab.on{background:var(--point);color:#fff;border-color:var(--point)} .adm-list{display:flex;flex-direction:column;gap:9px;max-height:320px;overflow-y:auto;scrollbar-width:thin} .adm-row{border:1.5px solid var(--line-soft);border-radius:11px;padding:11px 13px;background:var(--bg);display:flex;flex-direction:column;gap:5px;transition:border-color .15s} body.dark .adm-row{background:var(--soft)} .adm-row:hover{border-color:var(--point)} .adm-row-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .adm-row-ttl{font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--ink)} .adm-row-tag{font-family:var(--sans);font-size:.68rem;font-weight:700;color:#fff;background:var(--point);border-radius:999px;padding:2px 8px} .adm-row-tag.wait{background:#b5642e} .adm-row-tag.signed{background:#2e7d6b} .adm-row-time{font-family:var(--body);font-size:.74rem;color:var(--muted);margin-left:auto} .adm-row-sub{font-family:var(--body);font-size:.82rem;color:var(--muted);line-height:1.5;word-break:break-word} .adm-row-link{font-family:var(--sans);font-size:.76rem;font-weight:700;color:var(--point);background:none;border:0;cursor:pointer;padding:2px 0;text-align:left} /* 관리자 문의·계약: 확인(보관)/삭제 액션 */ .adm-row-acts{display:flex;gap:7px;margin-top:3px} .adm-act{font-family:var(--sans);font-size:.72rem;font-weight:700;border-radius:8px;padding:4px 11px;cursor:pointer;border:1.5px solid var(--line-soft);background:var(--bg);color:var(--muted);transition:all .15s} body.dark .adm-act{background:var(--soft)} .adm-act.keep:hover{border-color:#2e7d6b;color:#2e7d6b} .adm-act.del:hover{border-color:#c0392b;color:#c0392b} .adm-act:disabled{opacity:.45;cursor:default} .adm-row-tag.ok{background:#2e7d6b} .adm-row.reviewed{border-color:rgba(46,125,107,.55)} .inq-item{border:1.5px solid var(--line-soft);border-radius:12px;padding:12px 14px;background:var(--soft);display:flex;flex-direction:column;gap:6px} .inq-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px} .inq-cat{font-family:var(--sans);font-size:.82rem;font-weight:700;color:#fff;background:var(--point);border-radius:999px;padding:3px 11px} .inq-when{font-family:var(--body);font-size:.76rem;color:var(--muted)} .inq-field{display:flex;gap:8px;font-family:var(--body);font-size:.84rem;line-height:1.5} .inq-k{flex:0 0 64px;color:var(--muted)} .inq-v{flex:1;color:var(--ink);word-break:break-word;white-space:pre-wrap} .inq-files{font-family:var(--body);font-size:.8rem;color:var(--point);margin-top:2px} .auth-x{position:absolute;top:14px;right:16px;background:transparent;border:0;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer} .auth-x:hover{color:var(--ink)} .auth-ttl{font-family:var(--disp);font-size:1.45rem;color:var(--ink);margin-bottom:4px} .auth-sub{font-family:var(--body);font-size:.86rem;color:var(--muted);margin-bottom:18px} .auth-tabs{display:flex;gap:6px;margin-bottom:18px;background:var(--soft);border-radius:12px;padding:4px} .auth-tab{flex:1;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--muted);background:transparent;border:0;border-radius:9px;padding:9px 0;cursor:pointer;transition:background .16s,color .16s} .auth-tab.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.08)} .auth-field{margin-bottom:13px} .auth-field label{display:block;font-family:var(--sans);font-size:.74rem;font-weight:600;color:var(--point);margin-bottom:5px} .auth-field input{width:100%;font-family:var(--body);font-size:.92rem;color:var(--ink);border:1.5px solid var(--line-soft);border-radius:11px;padding:10px 12px;background:var(--soft);transition:border-color .16s} .auth-field input:focus{outline:none;border-color:var(--point);background:#fff} .auth-go{width:100%;font-family:var(--sans);font-size:.92rem;font-weight:700;color:#fff;background:var(--point);border:0;border-radius:12px;padding:12px 0;cursor:pointer;margin-top:6px;transition:filter .18s,transform .18s} .auth-go:hover{filter:brightness(1.1);transform:translateY(-1px)} /* 네이버 로그인 버튼: 네이버 브랜드 색(#03C75A) 고정 — 다크 모드의 :is(…,.auth-go,…) 일괄 배경 규칙보다 우선 */ .auth-go.auth-naver{display:flex;align-items:center;justify-content:center;gap:10px;background:#03C75A!important;color:#fff!important} .auth-go.auth-naver+.auth-go{margin-top:8px} .auth-go:disabled{opacity:.6;cursor:default;transform:none;filter:none} .auth-msg{font-family:var(--body);font-size:.8rem;margin-top:11px;min-height:18px;text-align:center} .auth-msg.err{color:#c0392b} .auth-msg.ok{color:#2e7d6b} .auth-social{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-soft)} .auth-social-t{font-family:var(--body);font-size:.74rem;color:var(--muted);text-align:center;margin-bottom:11px} .auth-social-row{display:flex;gap:10px;justify-content:center} .soc{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--sans);font-size:.8rem;font-weight:600;border-radius:11px;padding:10px 0;cursor:pointer;border:1.5px solid var(--line-soft);background:#fff;color:#555;transition:transform .16s,box-shadow .16s,opacity .16s} .soc:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.1)} .soc.naver{background:#03c75a;color:#fff;border-color:#03c75a} .soc.kakao{background:#fee500;color:#191600;border-color:#fee500} .soc.google{background:#fff;color:#444;border-color:#dadce0} .soc .sic{font-weight:800;font-size:.95rem} .auth-soon-note{font-family:var(--body);font-size:.7rem;color:var(--muted);text-align:center;margin-top:9px} .bar-menu{max-width:var(--max);margin:0 auto;padding:0 24px} .menu-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:var(--soft);border:1.5px solid var(--line-soft);border-radius:11px;cursor:pointer;padding:0 10px} .menu-burger span{display:block;height:2.5px;width:100%;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s} body.dark .menu-burger{background:rgba(255,255,255,.08)} .menu-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .menu-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* 뒤로가기 버튼 */ .nav-back{position:fixed;left:18px;top:14px;z-index:55;display:flex;align-items:center;gap:3px;background:var(--bg);color:var(--ink);border:1px solid var(--line-soft);border-radius:999px;padding:7px 15px 7px 11px;font-family:var(--sans);font-weight:700;font-size:.86rem;cursor:pointer;box-shadow:0 2px 9px rgba(0,0,0,.12);transition:transform .16s,box-shadow .16s} .nav-back:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.16)} .nav-back .nb-arrow{font-size:1.3rem;line-height:1;margin-top:-2px} body.dark .nav-back{background:var(--soft)} @media(max-width:760px){.nav-back{left:12px;padding:7px 13px 7px 10px;font-size:.8rem;box-shadow:0 2px 6px rgba(0,0,0,.14)}.nav-back .nb-arrow{font-size:1.2rem}} /* 홈 타일 JIN 빼꼼 */ .qtile.has-peek{position:relative;overflow:visible;--jin-hair:#ffffff;--jin-face:#f3e9fb;--jin-line:#6b4e8e;border:1.5px solid var(--point);background:linear-gradient(135deg,rgba(107,78,142,.16),rgba(107,78,142,.04));box-shadow:0 4px 16px rgba(107,78,142,.25)} body.dark .qtile.has-peek{background:linear-gradient(135deg,rgba(155,107,245,.28),var(--soft));border-color:#9b6bf5;box-shadow:0 4px 18px rgba(155,107,245,.35)} .qtile.has-peek h4{color:var(--point);font-weight:800} body.dark .qtile.has-peek h4{color:#c9a0ff} .qtile.has-peek p{color:var(--point);opacity:.8;font-weight:600} body.dark .qtile.has-peek p{color:#c9a0ff} .qtile.has-peek::after{content:"HOT";position:absolute;top:-9px;right:14px;background:var(--point);color:#fff;font-family:var(--sans);font-size:.6rem;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(107,78,142,.4)} .qtile.has-peek .jin-peek{left:14px;top:-13px;width:34px;height:38px} .menu-grid{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:8px 30px;border-top:1px solid rgba(255,255,255,.12);padding:12px 0 14px} .menu-group{display:flex;align-items:center;gap:14px;padding:0;min-width:0;width:auto} .menu-rows{display:contents} .menu-glabel{flex:0 0 72px;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.06em;color:#b79cff;white-space:nowrap;text-transform:uppercase;text-align:right;padding-right:14px;border-right:1px solid rgba(255,255,255,.12)} /* 포트폴리오 그룹: 흰 카드 묶음으로 차별화 */ .menu-group-pf{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:7px 14px;gap:14px;width:auto;align-self:center} .menu-group-pf .menu-glabel{flex:0 0 auto;color:#fff;border-right-color:rgba(255,255,255,.28);text-align:left;padding-right:14px} .menu-group-pf .menu-items{flex-wrap:nowrap;gap:5px} .menu-group-pf .menu-items button{background:none;color:#fff;font-weight:600} .menu-group-pf .menu-items button .mi{filter:none} .menu-group-pf .menu-items button:hover,.menu-group-pf .menu-items button:focus-visible{background:rgba(255,255,255,.12);color:#fff;transform:scale(1.06)} .menu-group-pf .menu-items button.active{background:rgba(255,255,255,.18);color:#fff} .menu-items{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;min-width:0} /* 남는 여백 우주 장식 */ .menu-sep{font-size:.8rem;opacity:.3;pointer-events:none;user-select:none;color:#b79cff;margin:0 2px;flex:0 0 auto} @media(max-width:640px){.menu-sep{display:none}} .menu-grid button{ font-family:var(--body);font-size:.9rem;color:#dcdcdc;background:none;border:0;cursor:pointer; display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px; transition:transform .18s cubic-bezier(.2,.7,.3,1.3),color .15s,background .15s,letter-spacing .18s; transform-origin:center;white-space:nowrap; } .menu-grid button .mi{display:none} /* 작업 메뉴는 글자 수가 많아 다른 메뉴와 폭이 비슷해지도록 살짝 좁힘 */ .menu-grid button[data-nav="design"],.menu-grid button[data-nav="content"],.menu-grid button[data-nav="story"]{padding:6px 9px;font-size:.85rem;letter-spacing:-.03em} .menu-grid button:hover, .menu-grid button:focus-visible{ color:#fff;background:rgba(255,255,255,.08);transform:scale(1.08);letter-spacing:.01em;outline:none; } .menu-grid button:hover .mi{filter:none} .menu-grid button.active{color:#fff;background:rgba(255,255,255,.12)} /* 덕질 게시판 메뉴 강조 — JIN 빼꼼 리듬에 맞춰 흰색으로 반짝 */ /* 🔴 2026-08-06: 예전엔 infinite 였다. 고정 헤더에 있어 어느 화면에서든 늘 보이므로 '화면 밖이면 멈추기'가 통하지 않고, 애니메이션 하나가 초당 60번 스타일 재계산을 부른다(실측: 이 연출들만으로 4초당 58ms · 유휴 CPU 약 1.5%). 시선을 끄는 일은 들어온 직후 6번(27초)이면 충분하고, 그 뒤로는 노이즈다. 멈춰도 보라색 강조(#c9a0ff)는 남아 '새 글 있음'은 계속 전달된다. ※ 되돌리려면 아래 두 곳의 6 을 infinite 로 바꾸면 된다(빼꼼과 짝이라 함께 바꿀 것). */ .menu-grid button.has-peek{color:#c9a0ff;font-weight:800;animation:fanBlink 4.5s ease-in-out 6} @keyframes fanBlink{0%,68%{color:#c9a0ff}78%{color:#ffffff}96%{color:#ffffff}100%{color:#c9a0ff}} .menu-grid button.has-peek:hover,.menu-grid button.has-peek:focus-visible{color:#fff;background:rgba(155,107,245,.28);animation:none} .menu-grid button.has-peek.active{color:#fff;background:rgba(155,107,245,.4);animation:none} @media(prefers-reduced-motion:reduce){.menu-grid button.has-peek{animation:none}} .menu-grid button.gb .mi{filter:none} /* 덕질 게시판 JIN 빼꼼 효과 (자기 버튼 영역 내) */ .menu-grid button.has-peek{position:relative;overflow:visible;--jin-hair:#ffffff;--jin-face:#f3e9fb;--jin-line:#6b4e8e} .jin-peek{position:absolute;left:-8px;top:-9px;width:28px;height:31px;pointer-events:none;transform:scale(.4) rotate(-14deg);transform-origin:bottom left;opacity:0;animation:jinPeek 4.5s ease-in-out 6;z-index:3;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))} .jin-peek svg{width:100%;height:100%;display:block} @keyframes jinPeek{ 0%,70%{transform:scale(.4) rotate(-14deg);opacity:0} 78%{transform:scale(1) rotate(-12deg);opacity:1} 84%{transform:scale(1.05) rotate(7deg);opacity:1} 90%{transform:scale(1) rotate(-7deg);opacity:1} 96%{transform:scale(1.02) rotate(3deg);opacity:1} 100%{transform:scale(.4) rotate(-14deg);opacity:0} } .menu-grid button.has-peek:hover .jin-peek{animation:none;transform:scale(1) rotate(-8deg);opacity:1;transition:transform .25s cubic-bezier(.2,.8,.3,1.3),opacity .2s} @media(prefers-reduced-motion:reduce){.jin-peek{animation:none;opacity:0}} /* ── PC 메뉴 접기 토글 (2026-08-03) ───────────────────────────── 상단 줄의 '포트폴리오 보기' CTA 자리를 대신한다(헤더 높이 불변). 로그인 버튼과 같은 고스트 필 스타일. 접힘 상태는 hb_menu_fold 기억. 모바일(≤1000px)은 버거 메뉴가 담당하므로 숨김. */ .bar-fold{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.78rem; font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28); border-radius:999px;padding:7px 15px;cursor:pointer;white-space:nowrap; transition:background .18s,transform .18s} .bar-fold:hover,.bar-fold:focus-visible{background:rgba(255,255,255,.22);transform:translateY(-1px);outline:none} .bar-fold svg{width:12px;height:12px;flex:0 0 auto;transition:transform .25s ease} body.menu-folded .bar-fold svg{transform:rotate(180deg)} @media(max-width:1000px){.bar-fold{display:none}} @media(min-width:1001px){ .bar-menu{max-height:260px;overflow:hidden;transition:max-height .28s ease,visibility 0s} /* 접힘 완료 후 visibility:hidden — 보이지 않는 메뉴가 Tab 순서·스크린리더에 남는 포커스 함정 방지 (2026-08-03 사용감 점검에서 발견). 펼칠 땐 즉시 보임. */ body.menu-folded .bar-menu{max-height:0;visibility:hidden;transition:max-height .28s ease,visibility 0s .28s} @media(prefers-reduced-motion:reduce){.bar-menu,.bar-fold svg{transition:none}} } @media(max-width:1000px){ /* 메뉴가 두 줄로 구겨지기 시작하는 중간 폭부터는 바로 모바일(버거) 레이아웃으로 */ .menu-grid{grid-template-columns:1fr;justify-content:stretch;gap:5px} .menu-group{width:100%;align-items:flex-start} .menu-group-pf{align-self:stretch;width:auto} .menu-group-pf .menu-items{flex-wrap:wrap} .menu-burger{display:flex} .bar-menu{max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .32s ease} .bar-menu.open{max-height:70vh;overflow-y:auto;padding-top:6px;padding-bottom:10px} } @media(max-width:640px){ .menu-group{gap:6px 10px;align-items:center;flex-wrap:wrap;padding:3px 0} .menu-glabel{flex:0 0 58px;text-align:right;border-right:1px solid rgba(255,255,255,.14);padding-right:10px;padding-bottom:0;font-size:.62rem;color:#b79cff} .menu-group-pf{padding:8px 12px} .menu-group-pf .menu-glabel{color:#fff;border-right-color:rgba(255,255,255,.28)} .menu-items{flex:1;gap:2px 8px} .menu-grid button{font-size:.84rem;padding:5px 9px} .menu-sep{display:none} } /* ============ PAGE (SPA views) ============ */ .page{display:none;animation:fade .4s ease} .page.show{display:block} @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .page-pad{padding:54px 0 70px} /* section head */ .sec-head{display:flex;align-items:baseline;justify-content:center;gap:14px;margin:0 0 8px;text-align:center} .sec-head h2{font-family:var(--disp);font-weight:400;font-size:1.85rem;color:var(--title);flex:0 0 auto;order:1} .sec-head .en{font-family:var(--sans);font-size:.68rem;letter-spacing:.26em;color:var(--muted);text-transform:uppercase;padding-bottom:5px;flex:0 0 auto;order:2} .sec-head .rule{flex:1;border-bottom:1px solid var(--line-soft);order:0} .sec-head .rule.r2{order:3} .sec-desc{font-family:var(--body);font-size:.95rem;color:var(--muted);margin-bottom:28px;text-align:center} /* ===== 오너먼트 프레임 — 「세상의 수정」 연작의 액자 언어 ===== */ :root{ --ornc:rgba(107,78,142,.5); --orn-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cg fill='%236b4e8e' fill-opacity='.55'%3E%3Crect x='0' y='5.1' width='16' height='1.4'/%3E%3Ccircle cx='21.5' cy='5.8' r='1.5'/%3E%3Crect x='28.2' y='2' width='7.6' height='7.6' transform='rotate(45 32 5.8)'/%3E%3Ccircle cx='42.5' cy='5.8' r='1.5'/%3E%3Crect x='48' y='5.1' width='16' height='1.4'/%3E%3C/g%3E%3C/svg%3E"); } body.dark{ --ornc:rgba(203,184,230,.45); --orn-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cg fill='%23cbb8e6' fill-opacity='.5'%3E%3Crect x='0' y='5.1' width='16' height='1.4'/%3E%3Ccircle cx='21.5' cy='5.8' r='1.5'/%3E%3Crect x='28.2' y='2' width='7.6' height='7.6' transform='rotate(45 32 5.8)'/%3E%3Ccircle cx='42.5' cy='5.8' r='1.5'/%3E%3Crect x='48' y='5.1' width='16' height='1.4'/%3E%3C/g%3E%3C/svg%3E"); } .orn-frame{position:relative;padding:32px 26px 24px;background-image:var(--orn-motif),var(--orn-motif);background-repeat:no-repeat;background-position:center 6px,center calc(100% - 6px);background-size:64px 12px,64px 12px} .orn-frame::before{content:'';position:absolute;inset:11px;border:1px solid var(--ornc);opacity:.6;pointer-events:none} .orn-frame::after{content:'';position:absolute;inset:11px;pointer-events:none;background: linear-gradient(var(--ornc),var(--ornc)) 14px -3px/1.5px 7px no-repeat, linear-gradient(var(--ornc),var(--ornc)) -3px 14px/7px 1.5px no-repeat, linear-gradient(var(--ornc),var(--ornc)) calc(100% - 14px) -3px/1.5px 7px no-repeat, linear-gradient(var(--ornc),var(--ornc)) calc(100% + 3px - 7px) 14px/7px 1.5px no-repeat, linear-gradient(var(--ornc),var(--ornc)) 14px calc(100% + 3px - 7px)/1.5px 7px no-repeat, linear-gradient(var(--ornc),var(--ornc)) -3px calc(100% - 14px)/7px 1.5px no-repeat, linear-gradient(var(--ornc),var(--ornc)) calc(100% - 14px) calc(100% + 3px - 7px)/1.5px 7px no-repeat, linear-gradient(var(--ornc),var(--ornc)) calc(100% + 3px - 7px) calc(100% - 14px)/7px 1.5px no-repeat} /* 섹션 제목 괘선 끝의 마름모 — 프레임 언어의 최소 단위 */ .sec-head .rule{position:relative} .sec-head .rule::after{content:'';position:absolute;right:-1px;bottom:-3.5px;width:5px;height:5px;border:1px solid var(--muted);background:var(--bg);transform:rotate(45deg);opacity:.55} .sec-head .rule.r2::after{right:auto;left:-1px} /* 동작 줄이기 설정 존중 — 펄스·게이지 채움 정지 */ @media (prefers-reduced-motion: reduce){ .gc-item:first-child::after{animation:none;box-shadow:0 0 0 4px rgba(107,78,142,.18)} .pfc-seg.play button.on::after{animation:none;transform:translateY(-50%) scaleX(1)} .gc-rail{scroll-behavior:auto} } @media (max-width:600px){ .orn-frame{padding:26px 14px 18px} .pfc-seg{width:calc(100% - 100px);bottom:10px} } /* ============ HOME hero ============ */ /* 최신 소식 캐러셀(티커) */ .news-ticker{display:flex;align-items:center;gap:0;max-width:760px;margin:14px auto 0;background:linear-gradient(100deg,var(--point) 0%,#8b5fc9 55%,#a377e0 100%);border:1px solid var(--line-soft);border-radius:999px;overflow:hidden;box-shadow:0 2px 9px rgba(107,78,142,.25);text-decoration:none;cursor:pointer;transition:transform .16s,box-shadow .16s;position:relative} .news-ticker:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(107,78,142,.35)} .nt-badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:.72rem;font-weight:800;letter-spacing:.05em;color:var(--point);background:#fff;padding:8px 14px;border-right:1px solid var(--line-soft);white-space:nowrap;position:relative;z-index:2} .nt-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#ff5d5d;animation:nt-pulse 1.6s ease-in-out infinite} @keyframes nt-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}} body.dark .nt-badge{background:var(--soft);color:var(--point)} .nt-viewport{flex:1;overflow:hidden;position:relative;height:38px;display:flex;align-items:center} /* 양끝 페이드로 흐르는 느낌 강화 */ .nt-viewport::before,.nt-viewport::after{content:'';position:absolute;top:0;bottom:0;width:26px;z-index:1;pointer-events:none} .nt-viewport::before{left:0;background:linear-gradient(90deg,rgba(107,78,142,.9),transparent)} .nt-viewport::after{right:0;background:linear-gradient(270deg,rgba(163,119,224,.9),transparent)} .nt-track{display:inline-flex;align-items:center;white-space:nowrap;animation:nt-scroll 26s linear infinite} /* 보이지 않는 곳에서 도는 애니메이션은 배터리만 먹는다 */ .page:not(.show) .nt-track{animation-play-state:paused} body.hb-away .nt-track{animation-play-state:paused} .news-ticker:hover .nt-track{animation-play-state:paused} .nt-item{font-family:var(--body);font-size:.87rem;font-weight:500;color:#fff;padding:0 26px;display:inline-flex;align-items:center;gap:8px;text-shadow:0 1px 2px rgba(0,0,0,.15)} .nt-item .nt-cat{font-family:var(--sans);font-size:.66rem;font-weight:800;background:rgba(255,255,255,.92);color:var(--point);border-radius:999px;padding:2px 9px;text-shadow:none} .nt-item .nt-dot{opacity:.45} @keyframes nt-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @media(max-width:560px){.news-ticker{margin:10px 12px 0}.nt-item{font-size:.82rem;padding:0 20px}.nt-badge{padding:8px 11px;font-size:.68rem}} .hero{padding:60px 0 26px;text-align:center} .hero .eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.3em;color:var(--point);text-transform:uppercase;margin-bottom:22px} /* logo animation stage (replaces the headline copy) */ .logo-stage{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px 0 22px} .logo-anim{position:relative;width:150px;height:150px;display:grid;place-items:center} .logo-anim .logo-art{position:relative;z-index:2;display:grid;place-items:center;width:140px;height:140px;animation:logoBob 3.4s ease-in-out infinite} .logo-anim .logo-img{width:118px;height:auto;display:block} body.dark .logo-anim .logo-img{filter:invert(1) brightness(1.6)} .logo-anim .logo-art svg{display:block;transform:translateY(3px)} .logo-anim .eyes{animation:logoBlink 4.6s infinite} .logo-anim .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--point);opacity:0;animation:logoRing 3.4s ease-out infinite} .logo-anim .ring.r2{animation-delay:1.7s} @keyframes logoBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}} @keyframes logoBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}} @keyframes logoRing{0%{transform:scale(.7);opacity:.55}80%{opacity:0}100%{transform:scale(1.5);opacity:0}} .logo-word{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(1.8rem,5vw,2.6rem);color:var(--ink);letter-spacing:.02em;line-height:1} /* purpose emojis orbiting the logo on an ellipse (wider than tall, lifted to clear the wordmark) */ .logo-anim .emoji-field{position:absolute;inset:0;pointer-events:none} .logo-anim .pe{position:absolute;top:50%;left:50%;width:0;height:0} .logo-anim .pe>span{position:absolute;display:block;font-size:1.5rem;line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));opacity:0; transform:translate(-50%,-50%); /* one shared flat-wide orbit; emojis evenly spaced via delay (harmonious, equal speed) */ animation:peIn .6s ease-out forwards, peOrbit 22s linear infinite, peZ 22s step-end infinite, peShadow 22s ease-in-out infinite} .logo-anim .pe.sm>span{font-size:1.15rem} .logo-anim .pe.lg>span{font-size:1.85rem} @keyframes peIn{from{opacity:0}to{opacity:1}} @keyframes peZ{ 0%{z-index:1} /* top — behind */ 26%{z-index:3} /* crosses midline on the right, descending — to front */ 50%{z-index:3} /* bottom — in front */ 74%{z-index:1} /* crosses midline on the left, ascending — back behind */ 100%{z-index:1} } /* 앞으로 지날 땐 그림자를 진하게(로고 위에 떠 보이게), 뒤로 갈 땐 옅게 */ @keyframes peShadow{ 0%{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))} 26%{filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))} 50%{filter:drop-shadow(0 5px 10px rgba(0,0,0,.34))} 74%{filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))} 100%{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))} } @keyframes peOrbit{ 0.000%{transform:translate(calc(-50% + 0.0px*var(--os,1)),calc(-50% + -56.9px*var(--os,1)))} 2.778%{transform:translate(calc(-50% + 32.6px*var(--os,1)),calc(-50% + -56.8px*var(--os,1)))} 5.556%{transform:translate(calc(-50% + 64.3px*var(--os,1)),calc(-50% + -56.4px*var(--os,1)))} 8.333%{transform:translate(calc(-50% + 94.0px*var(--os,1)),calc(-50% + -55.1px*var(--os,1)))} 11.111%{transform:translate(calc(-50% + 120.8px*var(--os,1)),calc(-50% + -52.2px*var(--os,1)))} 13.889%{transform:translate(calc(-50% + 144.0px*var(--os,1)),calc(-50% + -47.0px*var(--os,1)))} 16.667%{transform:translate(calc(-50% + 162.8px*var(--os,1)),calc(-50% + -39.2px*var(--os,1)))} 19.444%{transform:translate(calc(-50% + 176.7px*var(--os,1)),calc(-50% + -28.9px*var(--os,1)))} 22.222%{transform:translate(calc(-50% + 185.1px*var(--os,1)),calc(-50% + -16.8px*var(--os,1)))} 25.000%{transform:translate(calc(-50% + 188.0px*var(--os,1)),calc(-50% + -3.8px*var(--os,1)))} 27.778%{transform:translate(calc(-50% + 185.1px*var(--os,1)),calc(-50% + 8.6px*var(--os,1)))} 30.556%{transform:translate(calc(-50% + 176.7px*var(--os,1)),calc(-50% + 19.3px*var(--os,1)))} 33.333%{transform:translate(calc(-50% + 162.8px*var(--os,1)),calc(-50% + 27.4px*var(--os,1)))} 36.111%{transform:translate(calc(-50% + 144.0px*var(--os,1)),calc(-50% + 32.5px*var(--os,1)))} 38.889%{transform:translate(calc(-50% + 120.8px*var(--os,1)),calc(-50% + 34.8px*var(--os,1)))} 41.667%{transform:translate(calc(-50% + 94.0px*var(--os,1)),calc(-50% + 35.0px*var(--os,1)))} 44.444%{transform:translate(calc(-50% + 64.3px*var(--os,1)),calc(-50% + 34.0px*var(--os,1)))} 47.222%{transform:translate(calc(-50% + 32.6px*var(--os,1)),calc(-50% + 33.0px*var(--os,1)))} 50.000%{transform:translate(calc(-50% + 0.0px*var(--os,1)),calc(-50% + 32.6px*var(--os,1)))} 52.778%{transform:translate(calc(-50% + -32.6px*var(--os,1)),calc(-50% + 33.0px*var(--os,1)))} 55.556%{transform:translate(calc(-50% + -64.3px*var(--os,1)),calc(-50% + 34.0px*var(--os,1)))} 58.333%{transform:translate(calc(-50% + -94.0px*var(--os,1)),calc(-50% + 35.0px*var(--os,1)))} 61.111%{transform:translate(calc(-50% + -120.8px*var(--os,1)),calc(-50% + 34.8px*var(--os,1)))} 63.889%{transform:translate(calc(-50% + -144.0px*var(--os,1)),calc(-50% + 32.5px*var(--os,1)))} 66.667%{transform:translate(calc(-50% + -162.8px*var(--os,1)),calc(-50% + 27.4px*var(--os,1)))} 69.444%{transform:translate(calc(-50% + -176.7px*var(--os,1)),calc(-50% + 19.3px*var(--os,1)))} 72.222%{transform:translate(calc(-50% + -185.1px*var(--os,1)),calc(-50% + 8.6px*var(--os,1)))} 75.000%{transform:translate(calc(-50% + -188.0px*var(--os,1)),calc(-50% + -3.8px*var(--os,1)))} 77.778%{transform:translate(calc(-50% + -185.1px*var(--os,1)),calc(-50% + -16.8px*var(--os,1)))} 80.556%{transform:translate(calc(-50% + -176.7px*var(--os,1)),calc(-50% + -28.9px*var(--os,1)))} 83.333%{transform:translate(calc(-50% + -162.8px*var(--os,1)),calc(-50% + -39.2px*var(--os,1)))} 86.111%{transform:translate(calc(-50% + -144.0px*var(--os,1)),calc(-50% + -47.0px*var(--os,1)))} 88.889%{transform:translate(calc(-50% + -120.8px*var(--os,1)),calc(-50% + -52.2px*var(--os,1)))} 91.667%{transform:translate(calc(-50% + -94.0px*var(--os,1)),calc(-50% + -55.1px*var(--os,1)))} 94.444%{transform:translate(calc(-50% + -64.3px*var(--os,1)),calc(-50% + -56.4px*var(--os,1)))} 97.222%{transform:translate(calc(-50% + -32.6px*var(--os,1)),calc(-50% + -56.8px*var(--os,1)))} 100.000%{transform:translate(calc(-50% + -0.0px*var(--os,1)),calc(-50% + -56.9px*var(--os,1)))} } /* all emojis share one speed; equal -2.75s steps (22s / 8) spread them evenly around the loop. the peZ delay matches so each one's front/back switch stays synced to its position */ .logo-anim .pe.p1>span{animation-delay:0.05s,0s,0s,0s} .logo-anim .pe.p2>span{animation-delay:0.12s,-2.75s,-2.75s,-2.75s} .logo-anim .pe.p3>span{animation-delay:0.19s,-5.5s,-5.5s,-5.5s} .logo-anim .pe.p4>span{animation-delay:0.26s,-8.25s,-8.25s,-8.25s} .logo-anim .pe.p5>span{animation-delay:0.33s,-11s,-11s,-11s} .logo-anim .pe.p6>span{animation-delay:0.40s,-13.75s,-13.75s,-13.75s} .logo-anim .pe.p7>span{animation-delay:0.47s,-16.5s,-16.5s,-16.5s} .logo-anim .pe.p8>span{animation-delay:0.54s,-19.25s,-19.25s,-19.25s} @media(max-width:560px){ .logo-anim .pe>span{font-size:1.1rem}.logo-anim .pe.lg>span{font-size:1.32rem}.logo-anim .pe.sm>span{font-size:.88rem} /* 궤도 축소는 transform:scale이 아니라 변수(--os)로. transform은 .emoji-field에 스태킹 컨텍스트를 만들어 이모지의 z-index가 .logo-art(z-index:2)와 교차하지 못하게 가둠 → 모바일에서 앞뒤 전환이 죽던 원인 */ .logo-anim{--os:.72} } @media(prefers-reduced-motion:reduce){.logo-anim .logo-art,.logo-anim .eyes,.logo-anim .ring,.logo-anim .pe>span{animation:none}.logo-anim .ring{display:none}.logo-anim .pe>span{opacity:1} /* static flat-wide ring fallback (8 points evenly around the orbit) */ .logo-anim .pe.p1>span{transform:translate(-50%,calc(-50% - 57px*var(--os,1)))} .logo-anim .pe.p2>span{transform:translate(calc(-50% + 133px*var(--os,1)),calc(-50% - 47px*var(--os,1)))} .logo-anim .pe.p3>span{transform:translate(calc(-50% + 188px*var(--os,1)),calc(-50% - 4px*var(--os,1)))} .logo-anim .pe.p4>span{transform:translate(calc(-50% + 133px*var(--os,1)),calc(-50% + 33px*var(--os,1)))} .logo-anim .pe.p5>span{transform:translate(-50%,calc(-50% + 33px*var(--os,1)))} .logo-anim .pe.p6>span{transform:translate(calc(-50% - 133px*var(--os,1)),calc(-50% + 33px*var(--os,1)))} .logo-anim .pe.p7>span{transform:translate(calc(-50% - 188px*var(--os,1)),calc(-50% - 4px*var(--os,1)))} .logo-anim .pe.p8>span{transform:translate(calc(-50% - 133px*var(--os,1)),calc(-50% - 47px*var(--os,1)))} } .hero h1{font-family:var(--disp);font-weight:400;color:var(--ink);font-size:clamp(2.1rem,5.5vw,3.2rem);line-height:1.28;margin-bottom:14px} .hero h1 .blue{color:var(--title)} .hero .sub{font-family:var(--body);font-size:1.04rem;color:var(--muted);max-width:540px;margin:0 auto 30px} .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn{font-family:var(--sans);font-size:.92rem;font-weight:600;text-decoration:none;border:0;cursor:pointer;border-radius:999px;padding:13px 32px;transition:transform .2s,box-shadow .2s,filter .2s;display:inline-flex;align-items:center;gap:8px} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)} .btn-line{color:var(--ink);border:1px solid var(--line-soft);background:#fff} .btn-line:hover{background:var(--soft);transform:translateY(-2px)} /* 다크모드: --ink가 밝은색이라 버튼 글씨가 묻히므로 명시적으로 재정의 */ body.dark .btn-dark{background:var(--ink);color:#16161a} body.dark .btn-line{background:transparent;color:var(--ink);border-color:var(--line-soft)} body.dark .btn-line:hover{background:rgba(255,255,255,.08)} .comic{padding:44px 0 56px} .comic-frame{max-width:720px;margin:0 auto;border:1px solid var(--line-soft);border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.08)} .comic-frame img{width:100%;height:auto;display:block} .comic .cap{font-family:var(--body);font-size:.82rem;color:var(--muted);text-align:center;margin-top:14px} .greet{padding:30px 0 0} .greet-inner{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap} .greet .av{width:58px;height:58px;border:1px solid var(--line-soft);border-radius:50%;background:#fff;display:grid;place-items:center;flex-shrink:0;cursor:pointer;transition:transform .2s} .greet .av:hover{transform:rotate(-5deg) scale(1.05)} .bubble{background:#fff;border:1px solid var(--line-soft);border-radius:20px;padding:14px 24px;position:relative;max-width:540px;box-shadow:0 3px 12px rgba(0,0,0,.07)} .bubble::before{content:"";position:absolute;left:-15px;top:18px;border-width:8px 15px 8px 0;border-style:solid;border-color:transparent var(--line-soft) transparent transparent} .bubble::after{content:"";position:absolute;left:-11px;top:20px;border-width:6px 12px 6px 0;border-style:solid;border-color:transparent #fff transparent transparent} .bubble .line{font-family:var(--body);font-size:1.05rem;font-weight:400;color:var(--ink);line-height:1.5;min-height:1.5em} .bubble .cursor{display:inline-block;width:2px;height:1em;background:var(--ink);margin-left:1px;vertical-align:-2px;animation:cur .9s steps(1) infinite} @keyframes cur{50%{opacity:0}} @media(max-width:640px){.greet-inner{flex-direction:column}.bubble::before,.bubble::after{left:50%;top:-15px;transform:translateX(-50%) rotate(90deg)}} /* home quick hub */ .qhub{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:54px} @media(max-width:760px){.qhub{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.qhub{grid-template-columns:1fr}} /* ── AI 비주얼 연대기 (디자인/콘텐츠 페이지 상단) ── */ .aihx{margin:26px 0 34px;padding:20px 20px 16px;border:1.5px solid var(--line-soft);border-radius:20px;background:var(--soft)} body.dark .aihx{background:rgba(255,255,255,.04)} .aihx-head h3{font-family:var(--disp);font-weight:400;font-size:1.18rem;color:var(--ink);margin:0 0 6px} .aihx-head p{font-family:var(--body);font-size:.84rem;color:var(--muted);margin:0 0 14px;line-height:1.65} .aihx-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .aihx-card{flex:0 0 258px;margin:0;background:#fff;border:1.5px solid var(--line-soft);border-radius:14px;overflow:hidden;scroll-snap-align:start} body.dark .aihx-card{background:var(--bg)} .aihx-card img{width:100%;height:150px;object-fit:cover;display:block} .aihx-card figcaption{padding:11px 13px 12px;display:flex;flex-direction:column;gap:5px} .aihx-card b{font-family:var(--sans);font-size:.86rem;color:var(--ink);line-height:1.4} .aihx-yr{display:inline-block;background:#5a3d7a;color:#fff !important;font-size:.68rem;font-weight:800;border-radius:6px;padding:3px 9px;margin-right:7px;vertical-align:1px;letter-spacing:.02em;text-shadow:0 1px 1px rgba(0,0,0,.35);box-shadow:0 1px 3px rgba(0,0,0,.25)} body.dark .aihx-yr{background:#6b4e8e;color:#fff !important} .aihx-card span{font-family:var(--body);font-size:.78rem;color:var(--muted);line-height:1.6} .aihx-card i{font-family:var(--sans);font-style:normal;font-size:.69rem;color:var(--muted);opacity:.8} .aihx-foot{font-family:var(--body);font-size:.76rem;color:var(--muted);line-height:1.7;margin:10px 2px 0;border-top:1px dashed var(--line-soft);padding-top:10px} .aihx-strip::-webkit-scrollbar{height:8px} .vibe-hx{background:linear-gradient(135deg,rgba(107,78,142,.08),rgba(107,78,142,.02))} body.dark .vibe-hx{background:rgba(255,255,255,.04)} .vibe-card{flex:0 0 210px} .vibe-ico{height:96px;display:flex;align-items:center;justify-content:center;font-size:2.6rem;background:linear-gradient(135deg,var(--soft),#fff)} body.dark .vibe-ico{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02))} .aihx-mine{border-color:var(--point);cursor:pointer;transition:transform .15s,box-shadow .15s} .aihx-mine:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(107,78,142,.18)} .aihx-mine i{color:var(--point);opacity:1;font-weight:700} .aihx-cta .aihx-cta-body{padding:18px 15px;display:flex;flex-direction:column;gap:7px;min-height:230px;justify-content:center} .aihx-cta em{font-style:normal;font-size:1.7rem;line-height:1} /* ── 홈 소구 포인트: 히어로 바로 아래 3포인트 ── */ .sellpts{margin:34px 0 4px} .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:760px){.sp-grid{grid-template-columns:1fr;gap:11px}} .sp{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left;padding:19px 21px;border:1.5px solid var(--line-soft);border-radius:18px;background:#fff;cursor:pointer;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s;font:inherit} .sp:hover{transform:translateY(-3px);border-color:var(--point);box-shadow:0 8px 22px rgba(107,78,142,.13)} body.dark .sp{background:var(--soft)} body.dark .sp:hover{box-shadow:0 8px 22px rgba(0,0,0,.35)} .sp-em{font-size:1.45rem;line-height:1} .sp-tt{font-family:var(--disp);font-weight:400;font-size:1.1rem;color:var(--ink)} .sp-d{font-family:var(--body);font-size:.85rem;color:var(--muted);line-height:1.65} .sp-go{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--point);margin-top:2px} .qtile{border:1.5px solid var(--line-soft);border-radius:20px;background:#fff;padding:20px 24px;cursor:pointer;text-align:left;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:transform .18s,box-shadow .18s,border-color .18s} .qtile:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(107,78,142,.13);border-color:var(--point)} body.dark .qtile{background:var(--soft);border-color:var(--line-soft);box-shadow:0 2px 10px rgba(0,0,0,.25)} body.dark .qtile:hover{border-color:var(--point);box-shadow:0 8px 22px rgba(0,0,0,.35)} .qtile .em{font-size:1.5rem;display:block;margin-bottom:9px} /* 홈 타일 카테고리 구분 */ .qcat{margin:34px 0 16px} .qcat:first-child{margin-top:6px} .qcat-row{display:flex;align-items:center;gap:12px} .qcat-tt{font-family:var(--disp);font-size:1.5rem;font-weight:400;color:var(--title);white-space:nowrap;display:flex;align-items:center;gap:9px} .qcat-tt .qc-em{font-size:1.4rem} .qcat-line{flex:1;height:2px;background:linear-gradient(90deg,var(--line-soft),transparent);border-radius:2px} .qcat-desc{font-family:var(--body);font-size:.92rem;color:var(--muted);margin:7px 0 0 2px} .qtile h4{font-family:var(--disp);font-weight:400;font-size:1.12rem;color:var(--ink);margin-bottom:2px} .qtile[data-nav="design"] h4,.qtile[data-nav="content"] h4,.qtile[data-nav="story"] h4{font-size:1.05rem;letter-spacing:-.02em} .qtile p{font-family:var(--body);font-size:.8rem;color:var(--muted);line-height:1.5} /* ============ FEATURE (대표작) ============ */ .feature{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center;margin-top:8px} @media(max-width:720px){.feature{grid-template-columns:1fr;gap:26px}} .feature .cover{aspect-ratio:3/4;border:1px solid var(--line-soft);border-radius:22px;background:linear-gradient(150deg,#7a6a92,#6b4e8e 60%,#4b3668);display:flex;flex-direction:column;justify-content:space-between;padding:26px 26px;color:#fff;box-shadow:0 6px 24px rgba(107,78,142,.2)} .feature .cover .ct{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;opacity:.85} .feature .cover .cn{font-family:var(--disp);font-weight:400;font-size:1.9rem;line-height:1.2} .feature .cover .ca{font-family:var(--body);font-size:.82rem;opacity:.9} .feature .fbody h3{font-family:var(--disp);font-weight:400;font-size:1.7rem;color:var(--ink);margin-bottom:4px} .feature .fbody .ftag{font-family:var(--body);font-size:.9rem;color:var(--point);font-weight:400;margin-bottom:16px} .feature .fbody p{font-family:var(--body);font-size:1rem;color:var(--ink);line-height:1.85;margin-bottom:14px} .feature .fbody .meta{display:flex;gap:26px;flex-wrap:wrap;margin:18px 0 22px} .feature .fbody .meta .m .k{font-family:var(--sans);font-size:.7rem;color:var(--muted);letter-spacing:.05em} .feature .fbody .meta .m .v{font-family:var(--disp);font-weight:400;font-size:1.05rem;color:var(--ink)} /* generic tiles for lab/list */ .hub{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:760px){.hub{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.hub{grid-template-columns:1fr}} .tile{border:1.5px solid var(--line-soft);border-radius:22px;background:#fff;padding:24px 28px;cursor:pointer;text-align:left;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:transform .18s,box-shadow .18s,border-color .18s} .tile:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(107,78,142,.13);border-color:var(--point)} body.dark .tile{background:var(--soft);border-color:var(--line-soft);box-shadow:0 2px 10px rgba(0,0,0,.25)} body.dark .tile:hover{border-color:var(--point);box-shadow:0 8px 22px rgba(0,0,0,.35)} .tile .em{font-size:1.65rem;line-height:1;display:block;margin-bottom:14px} .tile h4{font-family:var(--disp);font-size:1.3rem;color:var(--ink);font-weight:400;margin-bottom:4px} .tile p{font-family:var(--body);font-size:.84rem;color:var(--muted);line-height:1.6} /* archive list rows */ .arch{border-top:1px solid var(--line-soft)} .arch button{width:100%;display:grid;grid-template-columns:2.2rem 1fr auto auto;gap:16px;align-items:center;padding:16px 6px;border:0;border-bottom:1px solid var(--line-soft);background:none;cursor:pointer;text-align:left;transition:background .15s,padding-left .2s} .arch button:hover{background:var(--soft);padding-left:14px} .arch .a-em{font-size:1.25rem} .arch .a-title{font-family:var(--body);font-size:1rem;font-weight:400;color:var(--ink)} .arch .a-genre{font-family:var(--sans);font-size:.78rem;color:var(--muted)} .arch .a-year{font-family:var(--sans);font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums} @media(max-width:560px){.arch button{grid-template-columns:2rem 1fr auto}.arch .a-genre{display:none}} /* 허블로그 (Blogger 피드) */ .blog-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px} .blog-visit{font-family:var(--sans);font-size:.86rem;font-weight:600;color:#fff;background:var(--point);border-radius:999px;padding:9px 18px;text-decoration:none;transition:filter .15s} .blog-visit:hover{filter:brightness(1.1)} .blog-refresh{font-family:var(--sans);font-size:.86rem;color:var(--ink);background:#fff;border:2px solid var(--line-soft);border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .15s} .blog-refresh:hover{border-color:var(--point)} .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px} .blog-state{grid-column:1/-1;text-align:center;font-family:var(--body);font-size:.95rem;color:var(--muted);padding:48px 20px;border:1px dashed var(--line-soft);border-radius:18px;line-height:1.7} .blog-card{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;box-shadow:0 3px 12px rgba(0,0,0,.08);transition:transform .18s,box-shadow .18s} .blog-card:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.12)} .blog-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--soft);display:block} .blog-thumb.noimg{display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#cfcbe4} .blog-info{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1} .blog-date{font-family:var(--sans);font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums} .blog-title{font-family:var(--disp);font-size:1.08rem;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blog-excerpt{font-family:var(--body);font-size:.86rem;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blog-more{margin-top:auto;font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--point)} /* ===== 다다수원 콘텐츠 제작 게시판 (앨범형) ===== */ .dada-arch{margin-top:34px;border-top:1px dashed var(--line-soft);padding-top:30px} .dada-arch.dada-top{margin-top:10px;border-top:0;padding-top:6px} .dada-head{margin-bottom:18px} .dada-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .dada-title-row h3{font-family:var(--disp);font-size:1.5rem;color:var(--ink);margin:0} .dada-write{font-family:var(--sans);font-weight:700;font-size:.85rem;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:10px;padding:7px 15px;cursor:pointer;box-shadow:0 2px 6px rgba(107,78,142,.22);transition:transform .15s,box-shadow .15s} .dada-write:hover{transform:translateY(-2px);box-shadow:0 3px 12px rgba(107,78,142,.3)} .dada-sub{font-family:var(--body);font-size:.85rem;color:var(--muted);margin:8px 0 0;line-height:1.5} /* 두 줄(4열 × 2행) 앨범형 그리드 */ .dada-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:16px} @media(max-width:820px){.dada-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.dada-grid{grid-template-columns:1fr 1fr;gap:12px}} .dada-empty{grid-column:1/-1;text-align:center;font-family:var(--body);font-size:.92rem;color:var(--muted);padding:40px 20px;border:1px dashed var(--line-soft);border-radius:16px} .dada-card{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;background:#fff;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.08);transition:transform .18s,box-shadow .18s;text-align:left;padding:0} body.dark .dada-card{background:var(--soft)} .dada-card:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.12)} .dada-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--soft);display:block} .dada-thumb.noimg{display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#cfcbe4} .dada-info{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1} .dada-date{font-family:var(--sans);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums} .dada-name{font-family:var(--disp);font-size:1rem;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ── 다다수원 썸네일 메이커 (관리자 전용 · 기술 시연) ── */ .dtm{--dink:#211E19;--dpaper:#F2EBDD;--dnoerok:#2F6E58;--dinju:#C33A2C;--dstone:#98928A; --dserif:'Song Myung',serif;--dimpact:'Black Han Sans',sans-serif; margin:8px 0 26px;background:#14120F;border:1px solid rgba(242,235,221,.12);border-radius:16px;padding:17px 20px;color:var(--dpaper)} .dtm[hidden]{display:none} .dtm-demo-head{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:0;color:inherit} .dtm-demo-txt{display:flex;flex-direction:column;gap:5px;min-width:0} .dtm-demo-eyebrow{font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;color:var(--dnoerok);font-weight:700} .dtm-demo-ttl{font-family:var(--dserif);font-weight:400;font-size:1.22rem;color:var(--dpaper);line-height:1.3} .dtm-demo-desc{font-family:var(--sans);font-size:.8rem;color:var(--dstone);line-height:1.6} .dtm-chev{flex-shrink:0;font-size:1.1rem;color:var(--dstone);transition:transform .22s} .dtm.open .dtm-chev{transform:rotate(180deg);color:var(--dpaper)} .dtm-demo-head:hover .dtm-demo-ttl{color:#fff} .dtm-body{margin-top:20px;padding-top:18px;border-top:1px solid rgba(242,235,221,.12)} .dtm-body[hidden]{display:none} .dtm-body-note{font-family:var(--sans);font-size:.82rem;color:var(--dstone);line-height:1.7;margin:0 0 18px} .dtm-body-note b{color:var(--dpaper);font-weight:700} .dtm-lay{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start} .dtm-panel{flex:1 1 320px;min-width:300px;max-width:430px} .dtm-prev{flex:1 1 540px;display:flex;justify-content:center} .dtm-field{margin-bottom:15px} .dtm-field label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--dstone);font-weight:700;margin-bottom:7px} .dtm-field input[type=text],.dtm-field textarea{width:100%;background:#0f0d0b;border:1px solid rgba(242,235,221,.12);border-radius:6px;color:var(--dpaper);font-family:var(--sans);font-size:14px;padding:9px 12px;outline:none} .dtm-field input[type=text]:focus,.dtm-field textarea:focus{border-color:var(--dnoerok)} .dtm-field textarea{resize:vertical;min-height:54px;line-height:1.5} .dtm-hint{font-size:11px;color:var(--dstone);margin-top:6px;line-height:1.6} .dtm-tpls{display:flex;gap:8px} .dtm-tpl{flex:1;padding:9px 4px;border-radius:6px;border:1px solid rgba(242,235,221,.12);background:transparent;color:var(--dstone);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer} .dtm-tpl.active{background:var(--dnoerok);border-color:var(--dnoerok);color:var(--dpaper)} .dtm-drop{display:block;border:1.5px dashed rgba(242,235,221,.16);border-radius:8px;padding:16px 12px;text-align:center;color:var(--dstone);font-size:13px;cursor:pointer;line-height:1.6} .dtm-drop.has-photo{border-color:var(--dnoerok);color:var(--dpaper)} .dtm-drop input{display:none} .dtm-sl{display:flex;align-items:center;gap:10px;margin-bottom:9px} .dtm-sl span{font-size:11px;color:var(--dstone);width:56px;flex-shrink:0} .dtm-sl input[type=range]{flex:1;accent-color:var(--dnoerok)} .dtm-dl{width:100%;padding:14px;border:none;border-radius:8px;cursor:pointer;background:var(--dinju);color:var(--dpaper);font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:.06em} .dtm-dl:disabled{opacity:.5;cursor:default} .dtm-note{font-size:11.5px;color:var(--dstone);margin-top:9px;text-align:center;line-height:1.6} /* 카드(캡처 대상) */ .dtm-card{position:relative;width:540px;height:540px;overflow:hidden;background:var(--dink);box-shadow:0 24px 60px rgba(0,0,0,.5);flex-shrink:0} .dtm-card .fallback{position:absolute;inset:0;background:linear-gradient(180deg,#2C3A49 0%,#7A5F52 62%,#C08A5B 100%)} .dtm-card .photo-bg{position:absolute;inset:0;background-size:cover;background-position:50% 50%;background-repeat:no-repeat} .dtm-card .seal{width:56px;height:56px;background:var(--dinju);border-radius:4px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px rgba(242,235,221,.85), inset 0 0 0 5px var(--dinju)} .dtm-card .seal .seal-txt{display:flex;flex-direction:column;align-items:center;font-family:var(--dserif);color:var(--dpaper);font-size:19px;line-height:1.15} .dtm-card.tA .eyebrow-line{position:absolute;top:26px;left:28px;z-index:4;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.28em;font-weight:700;color:var(--dpaper)} .dtm-card.tA .eyebrow-line::before{content:"";width:26px;height:2px;background:var(--dnoerok)} .dtm-card.tA .seal{position:absolute;top:22px;right:24px;z-index:4} .dtm-card.tA .crenel{position:absolute;left:0;right:0;bottom:168px;height:20px;z-index:3;background:repeating-linear-gradient(90deg, var(--dink) 0 52px, transparent 52px 88px)} .dtm-card.tA .band{position:absolute;left:0;right:0;bottom:0;height:168px;z-index:3;background:var(--dink);padding:24px 28px 0} .dtm-card.tA .tag{font-size:11px;letter-spacing:.22em;color:var(--dnoerok);font-weight:700;margin-bottom:10px} .dtm-card.tA h2{font-family:var(--dserif);font-weight:400;color:var(--dpaper);font-size:34px;line-height:1.25} .dtm-card.tA .sub{margin-top:12px;font-size:13px;color:var(--dstone)} .dtm-card.tB{background:var(--dpaper)} .dtm-card.tB .photo-box{position:absolute;top:26px;left:26px;bottom:92px;right:148px;overflow:hidden;background:linear-gradient(180deg,#141B2A,#33415C)} .dtm-card.tB .photo-box .photo-bg{position:absolute;inset:0} .dtm-card.tB .side{position:absolute;top:26px;right:26px;bottom:92px;width:100px;display:flex;flex-direction:column;align-items:center;justify-content:space-between} .dtm-card.tB .vtitle{display:flex;flex-direction:row-reverse;gap:16px} .dtm-card.tB .vcol{display:flex;flex-direction:column;align-items:center} .dtm-card.tB .vcol span{font-family:var(--dserif);color:var(--dink);font-size:30px;line-height:1.38} .dtm-card.tB .footer{position:absolute;left:26px;right:26px;bottom:26px;height:44px;display:flex;align-items:flex-end;justify-content:space-between;border-top:1.5px solid var(--dink);padding-top:12px} .dtm-card.tB .place{font-size:12px;letter-spacing:.2em;color:var(--dink);font-weight:700} .dtm-card.tB .no{font-size:11px;letter-spacing:.18em;color:var(--dnoerok);font-weight:700} .dtm-card.tC .tone{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg, rgba(47,110,88,.30) 0%, rgba(24,32,28,.15) 40%, rgba(18,20,18,.88) 100%)} .dtm-card.tC .pick{position:absolute;top:26px;left:28px;z-index:4;background:var(--dnoerok);color:var(--dpaper);font-size:11px;font-weight:700;letter-spacing:.22em;padding:7px 12px 6px} .dtm-card.tC .title{position:absolute;left:28px;right:28px;bottom:96px;z-index:4;font-family:var(--dimpact);color:var(--dpaper);font-size:50px;line-height:1.18;font-weight:400} .dtm-card.tC .bottom{position:absolute;left:28px;right:28px;bottom:26px;z-index:4;display:flex;align-items:center;justify-content:space-between} .dtm-card.tC .meta{font-size:12px;letter-spacing:.2em;color:rgba(242,235,221,.85);font-weight:500} .dtm-card.tC .seal{width:48px;height:48px} .dtm-card.tC .seal .seal-txt{font-size:16px} /* 워터마크: 미리보기와 저장 PNG에 모두 찍힘 */ .dtm-card .dtm-wm{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:rotate(-22deg);font-family:var(--dserif);font-size:46px;letter-spacing:.28em;white-space:nowrap;color:rgba(242,235,221,.38);text-shadow:0 1px 3px rgba(0,0,0,.35)} .dtm-card.tB .dtm-wm{color:rgba(33,30,25,.30);text-shadow:none} @media(max-width:640px){ .dtm-card{transform:scale(calc((100vw - 92px)/540));transform-origin:top left} .dtm-prev{min-height:0;overflow:hidden;aspect-ratio:auto} } /* 다다수원 모달 */ .dada-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9400;padding:16px;overflow-y:auto} .dada-mask.open{display:flex} .dada-modal{background:#fff;border:1px solid var(--line-soft);border-radius:20px;max-width:560px;width:100%;margin:auto;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3)} /* 글쓰기 모달: 덕질 게시판 글쓰기와 동일한 폭 */ .dada-write-modal{max-width:1080px} .dada-row2col{display:flex;gap:12px} .dada-col-date{flex:0 0 175px} .dada-col-title{flex:1;min-width:0} @media(max-width:560px){.dada-row2col{flex-direction:column;gap:0}.dada-col-date{flex:1}} .dada-modal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px;flex-wrap:wrap} .dada-modal-foot .pf-hint{margin:0} body.dark .dada-modal{background:var(--bg)} .dada-view{max-width:880px} .dada-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1.5px solid var(--line-soft)} .dada-modal-ttl{font-family:var(--disp);font-size:1.15rem;color:var(--ink)} .dada-x{background:transparent;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer} .dada-modal-body{padding:18px 20px;overflow-y:auto} .dada-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .dada-field label{font-family:var(--sans);font-weight:700;font-size:.84rem;color:var(--ink)} .dada-field input[type=text],.dada-field input[type=date],.dada-field textarea{font-family:var(--body);font-size:.9rem;padding:10px 12px;border:1.5px solid var(--line-soft);border-radius:10px;background:var(--bg);color:var(--ink)} body.dark .dada-field input,body.dark .dada-field textarea{background:var(--soft)} .dada-field input:focus,.dada-field textarea:focus{outline:none;border-color:var(--point)} .dada-field textarea{resize:vertical;line-height:1.6} .dada-upload{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:700;font-size:.82rem;color:var(--point);background:var(--soft);border:1.5px dashed var(--point);border-radius:10px;padding:9px 14px;cursor:pointer;align-self:flex-start} .dada-preview{margin-top:8px} .dada-preview img{max-width:100%;border-radius:10px;border:1.5px solid var(--line-soft)} .dada-submit{font-family:var(--sans);font-weight:700;font-size:.9rem;color:#fff;background:var(--point);border:0;border-radius:11px;padding:11px 24px;cursor:pointer;transition:filter .15s} .dada-submit:hover{filter:brightness(1.08)} .dada-submit:disabled{opacity:.55;cursor:default} .dv-date{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-bottom:12px} .dv-img{margin-bottom:14px} .dv-img img{max-width:100%;border-radius:12px;border:1.5px solid var(--line-soft);display:block} .dv-body{font-family:var(--body);font-size:.94rem;line-height:1.8;color:var(--ink);white-space:pre-wrap;word-break:break-word} .dv-foot{margin-top:18px;display:flex;justify-content:flex-end} .dv-del{font-family:var(--sans);font-size:.82rem;font-weight:700;color:#e2536a;background:transparent;border:1.5px solid #e2536a;border-radius:9px;padding:7px 14px;cursor:pointer} /* 다다수원 첨부 칩(작성) + 갤러리(보기) */ .dada-att{position:relative;display:inline-block} .dada-meter{display:block;width:100%;font-family:var(--body);font-size:.78rem;color:var(--muted);margin:0 0 6px} .dada-meter.warn{color:#b8860b} .dada-meter.over{color:#c0392b;font-weight:700} .dv-att-load{font-family:var(--body);font-size:.85rem;color:var(--muted);padding:14px 0} .dada-att img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line-soft);display:block} .dada-att .x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--bg);border:0;font-size:.8rem;line-height:1;cursor:pointer;display:grid;place-items:center} .dv-atts{display:flex;flex-direction:column;gap:14px;margin-top:18px} .dv-atts img{width:100%;border-radius:12px;border:1px solid var(--line-soft);display:block} .dv-del:hover{background:rgba(226,83,106,.1)} /* 인스타그램 섹션 */ .insta-sec{margin-top:34px;border-top:1px dashed var(--line-soft);padding-top:30px} .insta-head{display:flex;align-items:center;gap:11px;margin-bottom:6px} .insta-logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .insta-logo svg{width:22px;height:22px} .insta-head h3{font-family:var(--disp);font-size:1.3rem;color:var(--ink)} .insta-head .insta-handle{font-family:var(--sans);font-size:.82rem;color:var(--muted)} .insta-desc{font-family:var(--body);font-size:.9rem;color:var(--muted);margin:0 0 18px;line-height:1.6} .insta-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid var(--line-soft);border-radius:20px;padding:22px 24px;background:linear-gradient(135deg,#fff7fb 0%,#fff 55%);box-shadow:0 4px 15px rgba(214,41,118,.12)} .insta-card-main{flex:1 1 240px;min-width:220px} .insta-card-main .ic-h{font-family:var(--disp);font-size:1.1rem;color:var(--ink);margin-bottom:4px} .insta-card-main .ic-s{font-family:var(--body);font-size:.84rem;color:var(--muted);line-height:1.55} .insta-follow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.9rem;font-weight:700;color:#fff;text-decoration:none;border:0;border-radius:13px;padding:12px 22px;background:linear-gradient(45deg,#fa7e1e,#d62976,#962fbf);box-shadow:0 6px 16px rgba(214,41,118,.28);transition:transform .18s,filter .18s;white-space:nowrap} .insta-follow:hover{transform:translateY(-2px);filter:brightness(1.06)} .insta-follow svg{width:19px;height:19px} @media(max-width:520px){.insta-card{padding:20px}.insta-follow{width:100%;justify-content:center}} /* 인스타 명함 카드 (작고 세련되게) */ .ig-card-row{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch} .ig-card{flex:1 1 300px;min-width:280px;display:flex;align-items:stretch;gap:0;border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;background:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(214,41,118,.12);transition:transform .2s,box-shadow .2s} .ig-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(214,41,118,.2)} .ig-card.th-card{box-shadow:0 6px 18px rgba(0,0,0,.14)} .ig-card.th-card:hover{box-shadow:0 12px 26px rgba(0,0,0,.24)} .ig-card-thumb{flex:0 0 auto;width:108px;background:#f3f3f3;position:relative;overflow:hidden} .ig-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .ig-card:hover .ig-card-thumb img{transform:scale(1.06)} .ig-card-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:15px 17px} .ig-card-top{display:flex;align-items:center;gap:10px} .ig-card-logo{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);display:flex;align-items:center;justify-content:center} .ig-card-logo svg{width:18px;height:18px} .ig-card-names{min-width:0} .ig-card-name{display:block;font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ig-card-handle{display:block;font-family:var(--sans);font-size:.74rem;color:var(--muted);line-height:1.2} .ig-card-bio{font-family:var(--body);font-size:.8rem;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ig-card-go{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:.8rem;font-weight:700;color:#d62976;margin-top:2px} .ig-card-go b{font-weight:700} /* 쓰레드 카드 색상 */ .th-thumb{background:#000 !important;display:flex;align-items:center;justify-content:center} .th-thumb svg{width:58px;height:58px} .th-logo{background:#000 !important} .th-go{color:#111 !important} /* 2026-08-03: !important 라 다크모드 규칙이 이길 수 없었다(1.15:1, 사실상 비가시). 다크에서만 같은 강도로 되받는다. */ body.dark .th-go{color:#ff77a9 !important} @media(max-width:520px){.ig-card{max-width:none}.ig-card-thumb{width:92px}} /* simple content page */ .simple{max-width:680px} .simple p{font-family:var(--body);font-size:1.02rem;color:var(--ink);line-height:1.9;margin-bottom:16px;padding:0 2px} .simple .placeholder-note{font-family:var(--sans);font-size:.82rem;color:var(--muted);border:1px dashed var(--line-soft);border-radius:16px;padding:16px 22px;margin-top:10px} /* 디자인 서비스 강화 콘텐츠 */ .dsg-manifesto{margin-top:30px;border-left:4px solid var(--point);background:linear-gradient(180deg,#faf8fd,#fff);border-radius:0 16px 16px 0;padding:22px 26px;position:relative} .dsg-quote-mark{position:absolute;top:6px;left:14px;font-family:var(--disp);font-size:2.4rem;color:#d8cce8;line-height:1} .dsg-quote{font-family:var(--disp);font-size:clamp(1.05rem,2.6vw,1.32rem);color:var(--ink);line-height:1.55;margin:0 0 10px;padding-left:18px} .dsg-quote-sub{font-family:var(--body);font-size:.92rem;color:var(--muted);line-height:1.7;padding-left:18px;margin:0} .dsg-block{margin-top:28px} .dsg-h{font-family:var(--disp);font-size:1.18rem;color:var(--title);margin-bottom:10px} .dsg-p{font-family:var(--body);font-size:.95rem;color:var(--ink);line-height:1.8;margin:0;max-width:640px} .dsg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media(max-width:680px){.dsg-grid{grid-template-columns:1fr 1fr}} @media(max-width:440px){.dsg-grid{grid-template-columns:1fr}} .dsg-item{border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px;background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s} .dsg-item:hover{border-color:#cfc3e2;transform:translateY(-2px);box-shadow:0 6px 16px rgba(107,78,142,.1)} .dsg-item b{display:block;font-family:var(--sans);font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:4px} .dsg-item span{font-family:var(--body);font-size:.82rem;color:var(--muted);line-height:1.55} /* 콘텐츠 크리에이팅: 통계 + 대표작 */ .cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px} @media(max-width:560px){.cc-stats{grid-template-columns:1fr}} .cc-stat{border:1px solid var(--line-soft);border-radius:16px;padding:18px 16px;text-align:center;background:linear-gradient(135deg,#fff,#f6f2fb);box-shadow:0 2px 9px rgba(107,78,142,.16)} .cc-stat b{display:block;font-family:var(--disp);font-size:1.7rem;color:var(--point);line-height:1.1} .cc-stat span{display:block;font-family:var(--body);font-size:.82rem;color:var(--muted);margin-top:6px} .cc-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px} @media(max-width:620px){.cc-gallery{grid-template-columns:1fr}} .cc-shot{margin:0} .cc-shot img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line-soft);box-shadow:0 8px 20px rgba(0,0,0,.12)} .cc-shot figcaption{font-family:var(--body);font-size:.8rem;color:var(--muted);margin-top:9px;text-align:center} /* ===== 가격 안내 ===== */ .price-tier{margin-top:34px} .pt-kicker{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.22em;color:var(--point);text-transform:uppercase;margin-bottom:6px} .price-tier-h{font-family:var(--disp);font-size:1.22rem;color:var(--title);margin-bottom:4px} .price-tier-sub{font-family:var(--body);font-size:.85rem;color:var(--muted);margin-bottom:22px} .pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch} @media(max-width:720px){.pt-grid{grid-template-columns:1fr;gap:20px}} .pt-card{border:1px solid var(--line-soft);border-radius:20px;padding:24px 22px 20px;background:var(--bg);box-shadow:0 2px 10px rgba(0,0,0,.05);display:flex;flex-direction:column;position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .pt-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--point),0 12px 28px rgba(0,0,0,.1)} body.dark .pt-card{background:var(--soft)} .pt-card.feature{border:1px solid var(--point);background:linear-gradient(170deg,rgba(107,78,142,.06),rgba(107,78,142,0) 50%),var(--bg);box-shadow:0 0 0 1px var(--point),0 8px 24px rgba(107,78,142,.18)} body.dark .pt-card.feature{background:linear-gradient(170deg,rgba(160,130,200,.13),rgba(160,130,200,0) 50%),var(--soft)} .pt-card.feature:hover{box-shadow:0 0 0 1px var(--point),0 14px 32px rgba(107,78,142,.28)} .pt-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--point);border-radius:999px;padding:4px 14px;white-space:nowrap;box-shadow:0 3px 10px rgba(107,78,142,.35)} .pt-name{font-family:var(--sans);font-size:.84rem;font-weight:700;color:var(--point);letter-spacing:.02em;margin-bottom:10px;display:flex;align-items:center;gap:6px} .pt-price{font-family:var(--disp);font-size:1.7rem;color:var(--ink);line-height:1.15;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap} .pt-price small{font-family:var(--body);font-size:.8rem;color:var(--muted);font-weight:400} .pt-price.ask{font-size:1.3rem;color:var(--point)} .pt-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .pt-meta span{font-family:var(--body);font-size:.72rem;color:var(--muted);background:var(--soft);border:1px solid var(--line-soft);border-radius:999px;padding:3px 10px;line-height:1.4} body.dark .pt-meta span{background:rgba(255,255,255,.05)} .pt-for{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);font-size:.74rem;color:var(--point);background:rgba(107,78,142,.07);border:1px solid rgba(107,78,142,.16);border-radius:999px;padding:3px 11px;margin-top:11px;align-self:flex-start;line-height:1.4} body.dark .pt-for{background:rgba(160,130,200,.14);border-color:rgba(160,130,200,.3)} .pt-desc{font-family:var(--body);font-size:.83rem;color:var(--muted);line-height:1.6;margin-top:10px} .pt-list{list-style:none;margin:15px 0 0;padding:15px 0 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px;flex:1} .pt-list li{font-family:var(--body);font-size:.83rem;color:var(--ink);line-height:1.55;padding-left:20px;position:relative} .pt-list li:before{content:"✓";position:absolute;left:0;color:var(--point);font-weight:700} .pt-list li b{font-weight:700;color:var(--ink)} .pt-cta{margin-top:18px;font-family:var(--disp);font-size:.92rem;color:var(--point);background:transparent;border:1.5px solid var(--point);border-radius:999px;padding:10px 0;width:100%;cursor:pointer;transition:background .15s,color .15s,transform .12s,box-shadow .15s} .pt-cta:hover{background:var(--point);color:#fff;box-shadow:0 4px 14px rgba(107,78,142,.3)} .pt-cta:active{transform:scale(.98)} .pt-card.feature .pt-cta{background:var(--point);color:#fff} .pt-card.feature .pt-cta:hover{filter:brightness(1.12)} .pt-note{font-family:var(--body);font-size:.76rem;color:var(--muted);margin-top:18px;line-height:1.7;text-align:center} /* ===== 출판 패키지 등급 테이블 ===== */ .pkg-table-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:18px;box-shadow:0 3px 12px rgba(0,0,0,.08);background:var(--bg)} body.dark .pkg-table-wrap{background:var(--soft)} .pkg-table{width:100%;border-collapse:collapse;min-width:680px;font-family:var(--body)} .pkg-table thead th{font-family:var(--sans);font-size:.82rem;font-weight:700;color:#fff;background:var(--bar);padding:13px 14px;text-align:left;letter-spacing:.01em;white-space:nowrap} .pkg-table tbody td{padding:14px 14px;font-size:.86rem;color:var(--ink);line-height:1.55;border-top:1px solid var(--line-soft);vertical-align:top} .pkg-table tbody tr:nth-child(even){background:rgba(107,78,142,.035)} body.dark .pkg-table tbody tr:nth-child(even){background:rgba(183,156,255,.06)} .pkg-table tbody tr.pkg-feature{background:rgba(107,78,142,.10)} body.dark .pkg-table tbody tr.pkg-feature{background:rgba(183,156,255,.14)} .pkg-grade{font-family:var(--sans);font-weight:700;font-size:.8rem;color:var(--point);white-space:nowrap} .pkg-name{font-family:var(--disp);font-size:.98rem;color:var(--ink);white-space:nowrap} .pkg-price{font-family:var(--disp);font-size:1.04rem;color:var(--ink);white-space:nowrap} .pkg-svc{font-size:.84rem;color:var(--ink);min-width:200px} .pkg-note-cell{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--point);white-space:nowrap} /* ===== 출판 문의 폼 ===== */ .pub-inquiry{margin-top:34px;border:1px solid var(--line-soft);border-radius:22px;padding:34px 30px;background:linear-gradient(180deg,#fbfbfd 0%,#fff 60%)} .pub-inquiry .pi-head{margin-bottom:26px} .pub-inquiry .pi-head h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.3rem,3.2vw,1.7rem);color:var(--ink);line-height:1.4;margin-bottom:10px} .pub-inquiry .pi-head p{font-family:var(--body);font-size:.95rem;color:var(--muted);line-height:1.7;max-width:560px} .pi-field{margin-bottom:24px} .pi-label{display:block;font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:12px} .pi-opts{display:flex;flex-direction:column;gap:10px} .pi-opt{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s;font-family:var(--body);font-size:.93rem;color:var(--ink);line-height:1.55} .pi-opt:hover{border-color:#c9bedb;background:#faf8fd} body.dark .pi-opt:hover{border-color:rgba(183,156,255,.55);background:rgba(160,130,200,.1)} body.dark .pi-opt:has(input:checked){background:rgba(160,130,200,.16)} body.dark .pi-opt .pi-otag{background:rgba(160,130,200,.18);color:#cbb6ee} body.dark .pi-textarea{background:var(--soft)} .pi-opt input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid #c4c0cb;border-radius:50%;margin-top:2px;flex:0 0 auto;cursor:pointer;transition:border-color .2s;position:relative} .pi-opt input:checked{border-color:var(--point)} .pi-opt input:checked::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--point)} .pi-opt:has(input:checked){border-color:var(--point);background:#f6f2fb} .pi-opt .pi-otext{flex:1} .pi-opt .pi-otag{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--point);background:#f0eaf7;border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle} .pi-textarea{width:100%;min-height:120px;border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px;font-family:var(--body);font-size:.93rem;color:var(--ink);line-height:1.7;resize:vertical;outline:none;transition:border-color .2s} .pi-textarea:focus{border-color:var(--point)} .pi-textarea::placeholder{color:#b7b4b0} .pi-input{width:100%;border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px;font-family:var(--body);font-size:.93rem;color:var(--ink);outline:none;transition:border-color .2s;background:var(--bg)} body.dark .pi-input{background:var(--soft)} .pi-input:focus{border-color:var(--point)} .pi-input::placeholder{color:#b7b4b0} .lecture-inquiry{background:linear-gradient(180deg,#f7f4fb 0%,#fff 65%)} body.dark .lecture-inquiry{background:var(--soft)!important} .lecture-inquiry .pi-head h3::before{content:'🎤 ';font-size:.9em} /* 홈 강연 CTA */ .home-cta{margin-top:40px;padding-top:8px;margin-bottom:72px} .home-cta-head{text-align:center;max-width:600px;margin:0 auto 22px} .home-cta-eyebrow{display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.08em;color:var(--point);background:rgba(107,78,142,.1);border-radius:999px;padding:5px 14px;margin-bottom:12px} .home-cta-head h3{font-family:var(--disp);font-size:clamp(1.4rem,3.6vw,1.9rem);color:var(--title);line-height:1.35;margin-bottom:10px} .home-cta-head p{font-family:var(--body);font-size:.95rem;color:var(--muted);line-height:1.75} /* ===== 허블 스토어 ===== */ .store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:8px} .store-card{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:20px;overflow:hidden;background:var(--bg);box-shadow:0 4px 15px rgba(0,0,0,.09);text-decoration:none;transition:transform .18s,box-shadow .18s} body.dark .store-card{background:var(--soft)} .store-card:hover{transform:translateY(-4px);box-shadow:0 6px 27px rgba(0,0,0,.12)} .store-top{display:flex;align-items:center;gap:14px;padding:22px 22px 16px} .store-logo{width:52px;height:52px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center} .store-logo svg{width:30px;height:30px} .store-logo.naver{background:#03c75a} .store-logo.marpple{background:#1c1c1c} .store-tt{display:flex;flex-direction:column;gap:3px;min-width:0} .store-name{font-family:var(--disp);font-size:1.18rem;color:var(--ink)} .store-sub{font-family:var(--body);font-size:.8rem;color:var(--muted)} .store-desc{padding:0 22px 18px;font-family:var(--body);font-size:.9rem;color:var(--ink);line-height:1.65;flex:1} .store-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 18px} .store-tag{font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:4px 11px} body.dark .store-tag{background:var(--bg)} .store-go{margin:0 22px 22px;font-family:var(--sans);font-size:.92rem;font-weight:700;color:#fff;border-radius:13px;padding:13px;text-align:center;transition:filter .18s} .store-go.naver{background:#03c75a} .store-go.marpple{background:#1c1c1c} .store-card:hover .store-go{filter:brightness(1.08)} #lecHomeInquiry{max-width:640px;margin:0 auto} /* 파일 첨부 */ .pi-file-drop{display:flex;align-items:center;gap:14px;border:1.5px dashed #cfc8db;border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .2s,background .2s} .pi-file-drop:hover,.pi-file-drop.drag{border-color:var(--point);background:#faf8fd} .pi-file-drop .pi-file-ic{font-size:1.5rem;flex:0 0 auto;line-height:1} .pi-file-drop .pi-file-txt{font-family:var(--body);font-size:.9rem;color:var(--muted);line-height:1.5} .pi-file-drop .pi-file-txt b{color:var(--point);font-weight:600} .pi-file-hint{font-family:var(--body);font-size:.78rem;color:#9b9893;margin-top:8px} .pi-file-list{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px} .pi-file-item{display:flex;align-items:center;gap:10px;background:#f6f2fb;border-radius:10px;padding:9px 12px;font-family:var(--body);font-size:.85rem;color:var(--ink)} .pi-file-item .pi-fi-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pi-file-item .pi-fi-size{color:var(--muted);font-size:.78rem;flex:0 0 auto} .pi-file-item .pi-fi-del{flex:0 0 auto;border:0;background:none;cursor:pointer;font-size:1.05rem;line-height:1;padding:0 2px;color:#9a8fb3;transition:color .2s} .pi-file-item .pi-fi-del:hover{color:#c0392b} .pi-submit{width:100%;font-family:var(--sans);font-size:.96rem;font-weight:600;color:#fff;background:var(--point);border:0;border-radius:14px;padding:15px;cursor:pointer;transition:filter .2s,transform .15s} .pi-submit:hover{filter:brightness(1.08)} /* ── 2026-07 폴리싱: 타이포 렌더링·포커스·호버 디테일 (기존 디자인 유지) ── */ html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } ::selection{background:rgba(107,78,142,.2)} body.dark ::selection{background:rgba(183,156,255,.28)} :focus-visible{outline:2px solid var(--point);outline-offset:2px;border-radius:4px} .pfc-nav{transition:transform .18s ease,opacity .18s ease} .pfc-nav:hover{transform:scale(1.1)} .prow{transition:background .15s ease} .prow:hover{background:rgba(107,78,142,.05)} body.dark .prow:hover{background:rgba(183,156,255,.07)} .pd-react{transition:transform .15s ease} .pd-react:hover{transform:translateY(-2px)} .pi-privacy{font-family:var(--sans);font-size:.72rem;color:var(--muted);line-height:1.55;margin:12px 0 8px} .pi-privacy a{color:var(--point);text-decoration:underline} .pp-body{font-family:var(--sans);font-size:.86rem;line-height:1.7;color:var(--ink,#333);text-align:left} .pp-body h3{font-size:.94rem;margin:20px 0 6px;color:var(--point)} .pp-body p{margin:6px 0} .pp-meta{color:var(--muted);font-size:.78rem} .pp-note{background:var(--soft,#f3f0f7);border-radius:10px;padding:10px 12px;font-size:.8rem} .pi-submit:active{transform:translateY(1px)} .pi-submit:disabled{filter:grayscale(.4) brightness(1.1);cursor:default} .pi-note{font-family:var(--body);font-size:.82rem;color:var(--muted);line-height:1.65;margin-top:16px;text-align:center} .pi-done{display:none;text-align:center;padding:30px 10px} .pi-done.show{display:block} .pi-done .pi-done-mark{font-size:2.2rem;margin-bottom:10px} .pi-done h4{font-family:var(--disp);font-weight:400;font-size:1.25rem;color:var(--ink);margin-bottom:8px} .pi-done p{font-family:var(--body);font-size:.92rem;color:var(--muted);line-height:1.7} /* guestbook */ .gb{background:var(--soft);border:1px solid var(--line-soft);border-radius:24px;padding:32px 34px;margin-top:8px} .gb-top{display:flex;align-items:center;gap:10px;margin-bottom:4px} .gb h3{font-family:var(--disp);font-size:1.4rem;color:var(--ink);font-weight:400} .gb .sub{font-family:var(--body);font-size:.84rem;color:var(--muted);margin-bottom:20px} .gb-form{display:grid;grid-template-columns:160px 1fr auto;gap:10px;margin-bottom:8px} @media(max-width:600px){.gb-form{grid-template-columns:1fr}} .gb-form input,.gb-form textarea{font-family:var(--body);font-size:.92rem;color:var(--ink);background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:12px 18px;resize:none;width:100%} .gb-form input:focus,.gb-form textarea:focus{outline:none;box-shadow:0 2px 9px rgba(0,0,0,.1)} .gb-form textarea{min-height:46px} .gb-btn{font-family:var(--disp);font-weight:400;font-size:1rem;color:#fff;background:var(--point);border:1.5px solid var(--point);border-radius:14px;padding:0 24px;cursor:pointer;white-space:nowrap;transition:transform .15s,filter .15s} .gb-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}.gb-btn:active{transform:translateY(1px)}.gb-btn:disabled{opacity:.5} .gb-note{font-family:var(--body);font-size:.76rem;color:var(--muted);margin-bottom:18px} .gb-list{display:flex;flex-direction:column;gap:12px;margin-top:18px} .entry{background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:15px 20px;box-shadow:0 2px 9px rgba(0,0,0,.06);transform:rotate(var(--rot,0deg))} .entry .e-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px} .entry .e-name{font-family:var(--disp);font-weight:400;font-size:1.05rem;color:var(--ink)} .entry .e-name .ava{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-soft);border-radius:50%;font-size:.72rem;margin-right:7px;vertical-align:-5px;background:var(--soft)} .entry .e-date{font-family:var(--sans);font-size:.72rem;color:var(--muted)} .entry .e-msg{font-family:var(--body);font-size:.92rem;color:var(--ink);white-space:pre-wrap;word-break:break-word} .gb-empty,.gb-loading{font-family:var(--body);font-size:.9rem;color:var(--muted);text-align:center;padding:22px 0} /* 소설 & 만화 게시판 */ .story-board{animation:fade .4s ease} .sb-head{margin-bottom:18px} .sb-head h3{font-family:var(--disp);font-size:1.4rem;color:var(--title);margin-bottom:5px} .sb-head p{font-family:var(--body);font-size:.92rem;color:var(--muted)} .sb-list{min-height:200px;display:flex;flex-direction:column;gap:10px} .sb-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:50px 20px;border:2px dashed var(--line-soft);border-radius:18px;text-align:center} .sb-empty-ic{font-size:3rem;opacity:.7} .sb-empty p{font-family:var(--body);font-size:.95rem;color:var(--muted);line-height:1.7} .sb-fab{margin:18px auto 4px} /* ===== 작품 표지 그리드 (소설·만화) ===== */ .sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;min-height:200px} @media(max-width:480px){.sb-grid{grid-template-columns:repeat(2,1fr);gap:13px}} .sw-card{border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--bg);box-shadow:0 3px 12px rgba(0,0,0,.08);cursor:pointer;transition:transform .16s,box-shadow .16s;text-align:left;padding:0;display:flex;flex-direction:column} body.dark .sw-card{background:var(--soft)} .sw-card:hover{transform:translateY(-3px);box-shadow:0 5px 21px rgba(107,78,142,.18)} .sw-cover{position:relative;width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,#ece7f4,#f7f4fb);overflow:hidden} body.dark .sw-cover{background:linear-gradient(135deg,rgba(107,78,142,.2),rgba(107,78,142,.08))} .sw-cover img{width:100%;height:100%;object-fit:cover;display:block} .sw-cover-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;opacity:.5} .sw-status{position:absolute;top:8px;left:8px;font-family:var(--sans);font-size:.66rem;font-weight:700;color:#fff;background:var(--point);border-radius:999px;padding:3px 9px} .sw-status.done{background:#2e7d6b}.sw-status.hiatus{background:#b5642e}.sw-status.short{background:#5a5750} .sw-info{padding:10px 12px 13px;display:flex;flex-direction:column;gap:4px} .sw-genre{font-family:var(--sans);font-size:.68rem;font-weight:700;color:var(--point)} .sw-title{font-family:var(--disp);font-size:1rem;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sw-meta{font-family:var(--body);font-size:.74rem;color:var(--muted);display:flex;gap:7px} /* ===== 작품 등록 모달 ===== */ .st-mode-tabs{display:flex;gap:8px;margin-bottom:18px} .st-mode{flex:1;font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--muted);background:var(--soft);border:2px solid var(--line-soft);border-radius:11px;padding:9px 0;cursor:pointer;transition:all .15s} body.dark .st-mode{background:var(--bg)} .st-mode.on{color:#fff;background:var(--point);border-color:var(--point)} .st-cover-row{display:flex;gap:16px;margin-bottom:14px} @media(max-width:480px){.st-cover-row{flex-direction:column;align-items:center}} .st-cover-drop{flex:0 0 130px;cursor:pointer} .st-cover-prev{width:130px;height:130px;border:2px dashed var(--line-soft);border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--soft);transition:border-color .15s} body.dark .st-cover-prev{background:var(--bg)} .st-cover-drop:hover .st-cover-prev{border-color:var(--point)} .st-cover-prev img{width:100%;height:100%;object-fit:cover} .st-cover-ph{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.5} .st-cover-ph small{font-size:.66rem;font-weight:500;opacity:.8} .st-cover-fields{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0} .st-cover-fields input,.st-cover-fields textarea,.st-cover-fields select{font-family:var(--body);font-size:.9rem;border:1.5px solid var(--line-soft);border-radius:9px;padding:9px 11px;background:var(--bg);color:var(--ink);width:100%} body.dark .st-cover-fields input,body.dark .st-cover-fields textarea,body.dark .st-cover-fields select{background:var(--soft)} .st-cover-fields textarea{resize:vertical;line-height:1.6} /* ===== 작품 뷰어 ===== */ .st-view{max-width:1080px} .st-view-head{display:flex;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line-soft);position:relative} .st-view-cover{width:96px;height:96px;object-fit:cover;border-radius:11px;border:1px solid var(--line-soft);flex:0 0 auto;background:var(--soft)} .st-view-meta{flex:1;min-width:0} .st-view-badges{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap} .stv-badge{font-family:var(--sans);font-size:.68rem;font-weight:700;color:var(--point);background:rgba(107,78,142,.12);border-radius:999px;padding:3px 9px} .st-view-meta h3{font-family:var(--disp);font-size:1.3rem;color:var(--title);line-height:1.3} .st-view-author{font-family:var(--body);font-size:.82rem;color:var(--muted);margin-top:3px} .st-view-intro{font-family:var(--body);font-size:.88rem;color:var(--ink);line-height:1.6;margin-top:9px} .st-eps-head{font-family:var(--disp);font-size:1rem;color:var(--ink);margin:18px 0 4px} .st-eps-hint{font-family:var(--body);font-size:.76rem;color:var(--muted);margin:0 0 11px} .st-eps-list{display:flex;flex-direction:column;gap:9px} .st-ep-item{display:flex;align-items:center;gap:13px;text-align:left;background:var(--soft);border:1.5px solid var(--line-soft);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .15s,transform .12s,box-shadow .15s} body.dark .st-ep-item{background:var(--bg)} .st-ep-item:hover{border-color:var(--point);transform:translateX(2px);box-shadow:0 3px 13px rgba(107,78,142,.14)} .st-ep-thumb{flex:0 0 auto;width:52px;height:52px;border-radius:9px;overflow:hidden;background:var(--bg);border:1px solid var(--line-soft);display:grid;place-items:center} body.dark .st-ep-thumb{background:var(--soft)} .st-ep-thumb img{width:100%;height:100%;object-fit:cover;display:block} .st-ep-thumb.ph{font-size:1.35rem;opacity:.65} .st-ep-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .st-ep-line{display:flex;align-items:center;gap:8px;min-width:0} .st-ep-no{font-family:var(--sans);font-size:.7rem;font-weight:800;color:#fff;background:var(--point);border-radius:999px;padding:3px 9px;flex:0 0 auto;letter-spacing:.02em} .st-ep-ti{font-family:var(--disp);font-size:.98rem;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .st-ep-sub{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .st-ep-dt{font-family:var(--body);font-size:.74rem;color:var(--muted)} .st-ep-go{flex:0 0 auto;font-size:1.4rem;color:var(--line-soft);font-weight:400;padding-right:3px;transition:color .15s} .st-ep-item:hover .st-ep-go{color:var(--point)} .st-eps-empty{font-family:var(--body);font-size:.88rem;color:var(--muted);text-align:center;padding:24px} .st-reader{animation:fade .3s ease} .st-reader-back{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--point);background:none;border:0;cursor:pointer;padding:4px 0;margin-bottom:10px} .st-reader h4{font-family:var(--disp);font-size:1.15rem;color:var(--title);margin-bottom:14px} .st-reader-atts{display:flex;flex-direction:column;gap:12px;margin-bottom:16px} .st-reader-atts img{width:100%;border-radius:10px;border:1px solid var(--line-soft)} .st-reader-body{font-family:var(--body);font-size:.98rem;color:var(--ink);line-height:1.9;white-space:pre-wrap;word-break:break-word} .st-reader-body b,.st-reader-body strong{font-weight:700}.st-reader-body i,.st-reader-body em{font-style:italic}.st-reader-body u{text-decoration:underline} .st-view-foot{margin-top:18px;display:flex;justify-content:flex-end} /* 작품 카드 */ .sb-work{border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:0 3px 12px rgba(0,0,0,.08);transition:transform .16s,box-shadow .16s} body.dark .sb-work{background:var(--soft)} .sb-work:hover{transform:translateY(-2px);box-shadow:0 5px 21px rgba(61,88,167,.16)} .sb-work-head{display:flex;align-items:center;gap:9px;padding:13px 16px;cursor:pointer} .sb-w-type{font-family:var(--sans);font-size:.68rem;font-weight:700;color:#fff;background:var(--point);border-radius:999px;padding:3px 10px;flex:0 0 auto} .sb-w-ep{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--title);flex:0 0 auto} .sb-w-title{font-family:var(--disp);font-size:1.05rem;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-w-date{font-family:var(--body);font-size:.74rem;color:var(--muted);flex:0 0 auto} .sb-w-toggle{font-size:.9rem;color:var(--point);flex:0 0 auto;transition:transform .25s} .sb-work.open .sb-w-toggle{transform:rotate(180deg)} .sb-w-body{max-height:0;overflow:hidden;transition:max-height .4s ease} .sb-work.open .sb-w-body{max-height:6000px} .sb-w-inner{padding:4px 18px 20px;border-top:1px solid var(--line-soft)} .sb-w-text{font-family:var(--body);font-size:.96rem;color:var(--ink);line-height:1.85;margin-top:14px;white-space:pre-wrap;word-break:break-word} .sb-w-text b,.sb-w-text strong{font-weight:700}.sb-w-text i,.sb-w-text em{font-style:italic}.sb-w-text u{text-decoration:underline} .sb-w-imgs{display:flex;flex-direction:column;gap:12px;margin-top:14px} .sb-w-imgs img{width:100%;border-radius:10px;border:1px solid var(--line-soft);cursor:pointer} .sb-w-admin{display:flex;gap:8px;margin-top:14px} .sb-w-admin button{font-family:var(--body);font-size:.78rem;background:var(--bg);border:1.5px solid var(--line-soft);border-radius:999px;padding:5px 13px;cursor:pointer;color:var(--muted);transition:border-color .15s,color .15s} body.dark .sb-w-admin button{background:var(--soft)} .sb-w-admin button:hover{border-color:var(--point);color:var(--point)} .sb-w-admin .sbw-del:hover{border-color:#d24;color:#d24} .sb-guest{font-family:var(--body);font-size:.82rem;color:var(--muted);text-align:center;margin-top:14px} /* 갤러리 상단 최신/인기 2블록 */ .board-top{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px} @media(max-width:620px){.board-top{grid-template-columns:1fr}} .bt-col{border:1.5px solid var(--line-soft);border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:0 2px 12px rgba(0,0,0,.05)} body.dark .bt-col{background:var(--soft);box-shadow:0 2px 12px rgba(0,0,0,.25)} .bt-head{font-family:var(--disp);font-size:.95rem;color:var(--ink);background:var(--soft);border-bottom:1.5px solid var(--line-soft);padding:11px 16px;display:flex;align-items:center;gap:8px} body.dark .bt-head{background:var(--bg)} .bt-sub{font-family:var(--sans);font-size:.68rem;font-weight:700;color:var(--point);background:rgba(107,78,142,.12);border-radius:999px;padding:2px 8px} .bt-list{padding:6px} .bt-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .14s} .bt-item:hover{background:var(--soft)} body.dark .bt-item:hover{background:var(--bg)} .bt-it-rank{font-family:var(--disp);font-size:.9rem;color:var(--muted);flex:0 0 auto;width:16px;text-align:center} .bt-col:first-child .bt-it-rank{color:var(--title)} .bt-col:last-child .bt-it-rank{color:#c0392b} .bt-it-main{flex:1;min-width:0} .bt-it-title{font-family:var(--body);font-size:.84rem;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bt-it-meta{font-family:var(--sans);font-size:.68rem;color:var(--muted);margin-top:1px} .bt-it-rec{color:#c0392b;font-weight:700} .bt-it-mood{font-size:.82rem;margin-right:2px} .bt-empty{font-family:var(--body);font-size:.78rem;color:var(--muted);text-align:center;padding:18px 8px;line-height:1.6} /* ===== 사진앱: 말풍선 밈 메이커 ===== */ @font-face{font-family:'NeoDunggeunmo';src:url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@1.601/neodgm/neodgm.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@1.601/neodgm/neodgm.woff') format('woff');font-display:swap} .meme-app{padding:0} .calc-panel.meme-panel.open{max-height:8000px} .meme-head h4{font-family:var(--disp);font-size:1.15rem;color:var(--ink);margin-bottom:6px} .meme-head p{font-family:var(--body);font-size:.86rem;color:var(--muted);line-height:1.6;margin-bottom:14px} .meme-drop{display:flex;flex-direction:column;align-items:center;gap:10px;border:2px dashed var(--point);border-radius:18px;padding:38px 20px;cursor:pointer;text-align:center;background:rgba(107,78,142,.04);transition:background .18s,transform .15s} .meme-drop:hover{background:rgba(107,78,142,.1)} .meme-drop.drag{background:rgba(107,78,142,.16);transform:scale(1.01)} .meme-drop-ic{font-size:2.4rem} .meme-drop-txt{font-family:var(--body);font-size:.95rem;color:var(--ink);line-height:1.6} .meme-drop-txt b{color:var(--point)} .meme-drop-txt small{color:var(--muted)} .meme-stage{border:1.5px solid var(--line-soft);border-radius:16px;overflow:hidden;background:#111;line-height:0} .meme-stage canvas{width:100%;height:auto;touch-action:pan-y pinch-zoom;cursor:grab;display:block} /* [2026-08-11] none→pan-y: 사진 위 터치로도 페이지가 스크롤되게. 말풍선 드래그는 JS가 짚었을 때만 가로챔 */ .meme-controls{margin-top:14px;display:flex;flex-direction:column;gap:10px} .meme-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .meme-input{flex:1;min-width:160px;border:1.5px solid var(--line-soft);border-radius:11px;padding:11px 13px;font-family:var(--body);font-size:.95rem;color:var(--ink);background:var(--bg);outline:none} .meme-input:focus{border-color:var(--point)} textarea.meme-input{resize:vertical;min-height:74px;line-height:1.55;white-space:pre-wrap} .meme-row.top{align-items:flex-start} .meme-row.top .meme-btn{margin-top:2px} .meme-lbl{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--muted)} #memeSize{flex:1;min-width:90px;accent-color:var(--point)} .meme-chip{font-family:var(--body);font-size:.85rem;border:1.5px solid var(--line-soft);border-radius:999px;padding:8px 14px;background:var(--bg);color:var(--ink);cursor:pointer;transition:all .14s} .meme-chip.sm{padding:7px 12px} .meme-chip.on{border-color:var(--point);background:var(--point);color:#fff} .meme-tails{display:flex;gap:6px} .meme-btn{font-family:var(--sans);font-size:.85rem;font-weight:700;border:1.5px solid var(--point);border-radius:11px;padding:10px 14px;background:var(--point);color:#fff;cursor:pointer;transition:filter .15s} .meme-btn:hover{filter:brightness(1.08)} .meme-btn.ghost{background:var(--bg);color:var(--point)} .meme-btn.save{background:#2e7d6b;border-color:#2e7d6b} .meme-hint{font-family:var(--body);font-size:.76rem;color:var(--muted)} body.dark .meme-input,body.dark .meme-chip,body.dark .meme-btn.ghost{background:var(--soft)} body.dark .meme-drop{background:rgba(155,107,245,.08)} /* footer */ /* 푸터 위 정보 바 (방문자/날씨/환율/명언) */ .infobar{background:var(--soft);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:8px 0;margin-top:24px} /* 2026-08-03: 환율·명언 행이 빠진 뒤 남은 2행 기준으로 상하 여백 26px→8px, 행 패딩 14px→8px 축소 */ .infobar .wrap{display:grid;grid-template-columns:1fr 1fr;gap:6px 36px} .ib-row{display:flex;align-items:center;gap:13px;padding:8px 4px;border-bottom:1px dashed var(--line-soft);font-family:var(--body);font-size:.9rem;color:var(--ink);min-height:26px} .infobar .wrap .ib-row:nth-last-child(1),.infobar .wrap .ib-row:nth-last-child(2){border-bottom:0} .ib-ico{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:#fff;border:1.5px solid var(--line-soft);display:flex;align-items:center;justify-content:center;font-size:1.02rem;line-height:1} .ib-label{flex:0 0 auto;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--point);min-width:64px} .ib-val{flex:1 1 auto;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis} .ib-val .muted{color:var(--muted)} .ib-val b{font-weight:700;color:var(--title)} .ib-quote{font-style:italic;color:var(--ink)} .ib-quote .qa{font-style:normal;color:var(--muted);font-size:.82rem;margin-left:6px} .ib-sub{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-left:8px} @media(max-width:680px){ .infobar .wrap{grid-template-columns:1fr;gap:0} .ib-row{border-bottom:1px dashed var(--line-soft)!important} .infobar .wrap .ib-row:last-child{border-bottom:0!important} .ib-label{min-width:64px} .ib-row{font-size:.86rem;gap:10px} .ib-sub{display:block;margin-left:0;margin-top:2px} } footer{background:var(--bar);margin-top:30px;padding:40px 0 56px} /* 영상 아카이브 (유튜브) */ .vid-arch{margin-top:38px} .vid-arch-head{display:flex;align-items:center;gap:11px;margin-bottom:8px} .vid-logo{width:38px;height:38px;border-radius:10px;background:#ff0000;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .vid-logo svg{width:24px;height:24px} .vid-arch-head h3{font-family:var(--disp);font-size:1.35rem;color:var(--ink)} .vid-arch-head .vid-handle{font-family:var(--sans);font-size:.8rem;color:var(--muted)} .vid-desc{font-family:var(--body);font-size:.9rem;color:var(--muted);margin:0 0 16px;line-height:1.6} .vid-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line-soft);box-shadow:0 4px 15px rgba(0,0,0,.1);background:#000} .vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* 유튜브 채널 카드(임베드 대체) */ .vid-channel-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-decoration:none;background:linear-gradient(135deg,#1a1a1a,#3a0000);cursor:pointer;transition:transform .18s,box-shadow .18s} .vid-channel-card:hover{transform:translateY(-2px);box-shadow:0 5px 21px rgba(0,0,0,.14)} .vcc-play{display:flex;align-items:center;justify-content:center;width:74px;height:52px;background:#ff0000;border-radius:14px;box-shadow:0 6px 18px rgba(255,0,0,.4);transition:transform .18s} .vid-channel-card:hover .vcc-play{transform:scale(1.08)} .vcc-play svg{width:30px;height:30px} .vcc-txt{font-family:var(--sans);font-size:1.05rem;font-weight:700;color:#fff;text-align:center;line-height:1.5} .vcc-txt small{font-family:var(--body);font-size:.78rem;font-weight:400;color:rgba(255,255,255,.7)} .vid-visit{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--sans);font-size:.92rem;font-weight:700;color:#fff;text-decoration:none;border-radius:13px;padding:12px 24px;background:#ff0000;box-shadow:0 6px 16px rgba(255,0,0,.25);transition:transform .18s,filter .18s} .vid-visit:hover{transform:translateY(-2px);filter:brightness(1.06)} .vid-visit svg{width:19px;height:19px} /* 핀터레스트 라이브 위젯(공식) */ .pin-live{margin:0 0 18px;overflow-x:auto;border-radius:16px;border:1px solid var(--line-soft);padding:10px;background:var(--bg)} body.dark .pin-live{background:var(--soft)} .pin-live:empty{display:none} .pin-live-note{font-family:var(--body);font-size:.78rem;color:var(--muted);margin:-8px 0 16px} /* 인스타그램 게시물 임베드(공식) */ .ig-embed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0 0 18px} .ig-embed-grid:empty{display:none} .ig-embed-grid blockquote.instagram-media{margin:0!important;min-width:0!important;max-width:100%!important} /* 이미지 아카이브 (핀터레스트) */ .img-arch{margin-top:38px} .img-logo{background:#e60023} .img-visit{background:#e60023;box-shadow:0 6px 16px rgba(230,0,35,.25)} @media(max-width:480px){} body.dark body.dark .pin-thumb img{width:100%;height:100%;object-fit:cover;display:block} .pin-thumb-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;opacity:.6} .pin-thumb-tag{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:#e60023;display:grid;place-items:center} .pin-thumb-tag svg{width:15px;height:15px} .pin-info{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px} .pin-count{font-family:var(--body);font-size:.76rem;color:var(--muted)} .pin-embed{border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:0 4px 15px rgba(0,0,0,.1);min-height:200px;padding:6px} body.dark .pin-embed{background:var(--soft)} .pin-embed > span{width:100%!important} .pin-embed-fallback{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;text-align:center;font-family:var(--body);font-size:.88rem;color:var(--muted)} .foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap} .foot .fl{font-family:var(--disp);font-weight:400;color:#fff;font-size:1.12rem} .foot .fr{display:flex;gap:20px} .foot .fr a{font-family:var(--body);font-size:.86rem;color:#b9b9b9;text-decoration:none;transition:color .2s;cursor:pointer} .foot .fr a:hover{color:#fff} .foot-copy{font-family:var(--sans);font-size:.72rem;color:#8a8a8a;margin-top:18px} /* 🔴 2026-08-09: z-index 70 이었다. 그런데 겹창(글쓰기 130·상세 75·로그인 120)이 전부 이보다 위라, 글쓰기 창에서 "제목을 입력해 주세요" 같은 안내가 창 뒤에 깔려 사용자 눈에 보이지 않았다 — 등록을 눌러도 아무 일도 안 일어나는 것처럼 보인다. 안내는 무엇에도 가려지면 안 되므로 맨 위로 올린다. pointer-events:none 이라 위로 올려도 클릭을 가로채지 않는다. */ .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-family:var(--body);font-size:.88rem;padding:12px 22px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:100000;box-shadow:0 8px 20px rgba(0,0,0,.25)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ============ FAN BOARD (디시식 갤러리) ============ */ .gall-group{margin-bottom:30px} /* 갤러리 아코디언 토글 */ .gall-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;background:linear-gradient(135deg,#fff 0%,#f6f2fb 100%);border:1px solid var(--line-soft);border-radius:16px;padding:17px 52px;cursor:pointer;font-family:var(--disp);font-size:1.32rem;color:var(--ink);box-shadow:0 3px 12px rgba(107,78,142,.18);transition:background .18s,box-shadow .18s,transform .18s,border-color .18s} .gall-toggle:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(107,78,142,.28);border-color:var(--point)} .gall-toggle:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(107,78,142,.2)} .gall-toggle .gg-text{line-height:1.2} .gall-toggle .gg-arrow{position:absolute;right:20px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--point);color:#fff;font-size:.8rem;transition:transform .28s} .gall-toggle[aria-expanded="true"]{background:var(--point);color:#fff;border-color:var(--point);box-shadow:0 3px 12px rgba(107,78,142,.3);border-bottom-left-radius:0;border-bottom-right-radius:0} .gall-toggle[aria-expanded="true"] .gg-arrow{transform:rotate(180deg);background:#fff;color:var(--point)} body.dark .gall-toggle{background:linear-gradient(135deg,var(--soft) 0%,rgba(107,78,142,.18) 100%);border-color:var(--line-soft);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.3)} body.dark .gall-toggle:hover{border-color:var(--point);box-shadow:0 6px 18px rgba(107,78,142,.35)} body.dark .gall-toggle[aria-expanded="true"]{background:var(--point);color:#fff;border-color:var(--point)} .gall-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .25s ease,padding .25s ease;border:2px solid transparent;border-top:0} .gall-body.open{max-height:3000px;opacity:1;padding:22px 0 8px;border-color:var(--point);border-radius:0 0 16px 16px} /* ===== 허블 계산기 ===== */ .calc-list{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:0 auto} /* 허블앱 대분류 토글 */ .app-group{border:1.5px solid var(--point);border-radius:18px;overflow:hidden;box-shadow:0 3px 12px rgba(107,78,142,.18)} .app-toggle{width:100%;display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,rgba(107,78,142,.1),transparent);border:0;padding:18px 22px;cursor:pointer;font-family:var(--disp);font-size:1.22rem;color:var(--ink);transition:background .18s} body.dark .app-toggle{background:linear-gradient(135deg,rgba(155,107,245,.2),var(--soft));color:var(--ink)} .app-toggle:hover{background:linear-gradient(135deg,rgba(107,78,142,.18),transparent)} .app-toggle .at-ic{font-size:1.6rem;flex:0 0 auto} .app-toggle .at-name{font-weight:800;flex:0 0 auto} .app-toggle .at-sub{flex:1;text-align:left;font-family:var(--body);font-size:.78rem;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .app-toggle .at-arrow{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--point);color:#fff;font-size:.85rem;flex:0 0 auto;transition:transform .3s} .app-toggle[aria-expanded="true"]{background:var(--point);color:#fff} .app-toggle[aria-expanded="true"] .at-sub{color:rgba(255,255,255,.8)} .app-toggle[aria-expanded="true"] .at-arrow{transform:rotate(180deg);background:#fff;color:var(--point)} .app-panel{max-height:0;overflow:hidden;transition:max-height .4s ease;background:var(--bg)} body.dark .app-panel{background:var(--bg)} .app-panel.open{max-height:120000px} /* 그룹 안 카드들이 동시에 열려도 잘리지 않도록 — 자식 상한 합보다 크게 */ .app-panel>.calc-item{margin:0 16px} .app-panel>.calc-item:first-child{margin-top:18px} .app-panel>.calc-item:last-child{margin-bottom:18px} .app-panel>.calc-item+.calc-item{margin-top:14px} .calc-item{} .calc-toggle{width:100%;display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line-soft);border-radius:16px;padding:16px 20px;cursor:pointer;font-family:var(--disp);font-size:1.12rem;color:var(--ink);box-shadow:0 3px 12px rgba(107,78,142,.14);transition:transform .16s,box-shadow .16s,border-color .16s} body.dark .calc-toggle{background:var(--soft)} .calc-toggle:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(107,78,142,.24);border-color:var(--point)} .calc-toggle .ct-ic{font-size:1.4rem;flex:0 0 auto} .calc-toggle .ct-name{flex:1;text-align:left} .calc-toggle .ct-badge{font-family:var(--sans);font-size:.68rem;font-weight:700;color:#fff;background:#b5642e;border-radius:999px;padding:3px 10px;flex:0 0 auto} .calc-toggle .ct-badge.ready{background:#2e7d6b} .calc-toggle .ct-arrow{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--point);color:#fff;font-size:.8rem;flex:0 0 auto;transition:transform .28s} .calc-toggle[aria-expanded="true"]{background:var(--point);color:#fff;border-color:var(--point);border-bottom-left-radius:0;border-bottom-right-radius:0} .calc-toggle[aria-expanded="true"] .ct-arrow{transform:rotate(180deg);background:#fff;color:var(--point)} .calc-panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .25s ease,padding .25s ease;border:2px solid transparent;border-top:0} /* 🔧 2026-08-10 유휴 CPU: 닫힌 접이 패널(max-height:0)은 화면에 없지만 안의 CSS 무한 애니메이션(게임 타이틀 글로우·글리치·스캔라인 등)은 계속 돌았다 — 아코디언을 한 번 열었다 닫아도 스타일 재계산이 남는 원인. 닫힌 패널 트리의 애니메이션을 일시정지한다(트랜지션·JS rAF 게임 루프에는 영향 없음). */ .calc-panel:not(.open) *,.calc-panel:not(.open) *::before,.calc-panel:not(.open) *::after, .app-panel:not(.open) *,.app-panel:not(.open) *::before,.app-panel:not(.open) *::after{animation-play-state:paused!important} .calc-panel.open{max-height:2200px;opacity:1;padding:22px 20px;border-color:var(--point);border-radius:0 0 16px 16px;background:var(--bg)} body.dark .calc-panel.open{background:var(--soft)} .calc-field{margin-bottom:15px} .calc-field label{display:block;font-family:var(--sans);font-size:.84rem;font-weight:700;color:var(--ink);margin-bottom:7px} .calc-input-wrap{position:relative;display:flex;align-items:center} .calc-input-wrap input,.calc-input-wrap select{width:100%;border:1.5px solid var(--line-soft);border-radius:11px;padding:12px 44px 12px 14px;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--bg);outline:none;transition:border-color .15s} body.dark .calc-input-wrap input,body.dark .calc-input-wrap select{background:#26242c} .calc-input-wrap input:focus,.calc-input-wrap select:focus{border-color:var(--point)} .calc-input-wrap .unit{position:absolute;right:14px;font-family:var(--body);font-size:.86rem;color:var(--muted);pointer-events:none} .calc-radio{display:flex;gap:8px;flex-wrap:wrap} .calc-radio label{flex:1;min-width:90px;text-align:center;border:1.5px solid var(--line-soft);border-radius:11px;padding:10px;font-size:.86rem;cursor:pointer;font-weight:600;color:var(--muted);transition:all .15s} .calc-radio input{display:none} .calc-radio input:checked + span{color:var(--point)} .calc-radio label:has(input:checked){border-color:var(--point);background:rgba(107,78,142,.08);color:var(--point)} .calc-go{width:100%;font-family:var(--sans);font-size:.96rem;font-weight:700;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:13px;padding:13px;cursor:pointer;margin-top:4px;box-shadow:0 2px 9px rgba(0,0,0,.12);transition:filter .15s,transform .12s} .calc-go:hover{filter:brightness(1.08)} .calc-go:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.12)} .calc-result{margin-top:18px;border:1.5px solid var(--point);border-radius:14px;padding:18px;background:rgba(107,78,142,.05);display:none} .calc-result.show{display:block;animation:fade .35s ease} .calc-result .cr-main{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line-soft)} .calc-result .cr-main .cr-label{font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--ink)} .calc-result .cr-main .cr-val{font-family:var(--disp);font-size:1.5rem;color:var(--point)} .calc-result .cr-row{display:flex;justify-content:space-between;font-family:var(--body);font-size:.9rem;color:var(--ink);padding:4px 0} .calc-result .cr-row span:last-child{font-weight:700} .calc-prep{text-align:center;padding:30px 20px;font-family:var(--body);font-size:.92rem;color:var(--muted);line-height:1.7} .calc-prep .cp-ic{font-size:2.2rem;display:block;margin-bottom:10px;opacity:.7} .calc-note{font-family:var(--body);font-size:.74rem;color:var(--muted);margin-top:12px;line-height:1.6;text-align:center} /* ===== 계약서 작성 도구 ===== */ .contract-group{border-color:#b5642e} .ctr-wrap{padding:18px} .ctr-intro{font-family:var(--body);font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:16px;background:var(--soft);border-radius:12px;padding:12px 14px} .ctr-intro b{color:var(--point)} .ctr-field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px} .ctr-field label{font-family:var(--sans);font-weight:700;font-size:.85rem;color:var(--ink)} .ctr-hint{font-family:var(--body);font-weight:400;font-size:.76rem;color:var(--muted)} .ctr-field input,.ctr-body{font-family:var(--body);font-size:.9rem;padding:10px 12px;border:1.5px solid var(--line-soft);border-radius:10px;background:var(--bg);color:var(--ink)} .ctr-field input:focus,.ctr-body:focus{outline:none;border-color:var(--point)} .ctr-body{resize:vertical;line-height:1.7;white-space:pre-wrap;min-height:220px} .ctr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .ctr-grid .ctr-field{margin-bottom:0} .ctr-col2{grid-column:1 / -1} @media(max-width:560px){.ctr-grid{grid-template-columns:1fr}} .ctr-types{display:flex;flex-wrap:wrap;gap:8px} .ctr-type{font-family:var(--sans);font-weight:700;font-size:.85rem;color:var(--muted);background:var(--bg);border:1.5px solid var(--line-soft);border-radius:999px;padding:8px 15px;cursor:pointer;transition:all .15s} .ctr-type:hover{border-color:var(--point);color:var(--point)} .ctr-type.on{background:var(--point);color:#fff;border-color:var(--point)} .ctr-actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px} .ctr-btn{font-family:var(--sans);font-weight:700;font-size:.9rem;border-radius:12px;padding:12px 18px;cursor:pointer;border:1px solid var(--line-soft);transition:transform .14s,box-shadow .14s} .ctr-make{background:var(--point);color:#fff;border-color:var(--point);box-shadow:0 2px 9px rgba(107,78,142,.24)} .ctr-make:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(107,78,142,.32)} .ctr-inbox-btn{background:var(--bg);color:var(--ink)} body.dark .ctr-inbox-btn{background:var(--soft)} .ctr-inbox-btn:hover{border-color:var(--point);color:var(--point)} .ctr-result{margin-top:14px;padding:14px 16px;border:1.5px dashed var(--point);border-radius:12px;background:rgba(107,78,142,.06)} .ctr-result .crr-ttl{font-family:var(--disp);font-size:1rem;color:var(--point);margin-bottom:8px} .ctr-result .crr-link{display:flex;gap:8px;align-items:stretch} .ctr-result input{flex:1;font-family:var(--body);font-size:.82rem;padding:9px 11px;border:1.5px solid var(--line-soft);border-radius:9px;background:var(--bg);color:var(--ink)} .ctr-result .crr-copy{flex:0 0 auto;font-family:var(--sans);font-weight:700;font-size:.85rem;color:#fff;background:var(--point);border:0;border-radius:9px;padding:0 16px;cursor:pointer} .ctr-inbox{margin-top:16px;border-top:1.5px solid var(--line-soft);padding-top:14px} .ctr-inbox-head{font-family:var(--disp);font-size:1rem;color:var(--ink);margin-bottom:12px} .ctr-inbox-head span{color:var(--point)} .ctr-inbox-list{display:flex;flex-direction:column;gap:10px} .cin-item{border:1.5px solid var(--line-soft);border-radius:12px;padding:12px 14px;background:var(--soft);display:flex;flex-direction:column;gap:6px} .cin-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cin-proj{font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--ink)} .cin-badge{font-family:var(--sans);font-size:.7rem;font-weight:700;border-radius:999px;padding:3px 9px} .cin-badge.wait{background:#b5642e;color:#fff} .cin-badge.signed{background:#2e7d6b;color:#fff} .cin-meta{font-family:var(--body);font-size:.78rem;color:var(--muted)} .cin-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px} .cin-acts button{font-family:var(--sans);font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;border:1.5px solid var(--line-soft);background:var(--bg);color:var(--ink)} body.dark .cin-acts button{background:var(--soft)} .cin-acts button:hover{border-color:var(--point);color:var(--point)} .ctr-sign-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9500;padding:16px;overflow-y:auto} .ctr-sign-mask.open{display:flex} .ctr-sign{background:#fff;border:1px solid var(--line-soft);border-radius:20px;max-width:720px;width:100%;margin:auto;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3)} body.dark .ctr-sign{background:var(--bg)} .ctr-sign-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1.5px solid var(--line-soft)} .cs-ttl{font-family:var(--disp);font-size:1.2rem;color:var(--ink)} .cs-x{background:transparent;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer} .ctr-sign-body{padding:20px;overflow-y:auto} .cs-doc{font-family:var(--body);font-size:.9rem;line-height:1.75;color:var(--ink);white-space:pre-wrap;background:var(--soft);border:1px solid var(--line-soft);border-radius:12px;padding:18px;margin-bottom:16px} .cs-status{font-family:var(--sans);font-size:.9rem;font-weight:700;text-align:center;padding:12px;border-radius:10px;margin-bottom:14px} .cs-status.signed{background:rgba(46,125,107,.12);color:#2e7d6b} .cs-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .cs-field label{font-family:var(--sans);font-weight:700;font-size:.85rem;color:var(--ink)} .cs-field input{font-family:var(--body);font-size:.92rem;padding:10px 12px;border:1.5px solid var(--line-soft);border-radius:10px;background:var(--bg);color:var(--ink)} .cs-field input:focus{outline:none;border-color:var(--point)} .cs-agree{display:flex;align-items:flex-start;gap:8px;font-family:var(--body);font-size:.88rem;color:var(--ink);line-height:1.5;margin-bottom:14px;cursor:pointer} .cs-agree input{margin-top:3px} .cs-sign-btn{width:100%;font-family:var(--sans);font-weight:700;font-size:.95rem;color:#fff;background:var(--point);border:0;border-radius:12px;padding:13px;cursor:pointer;transition:filter .15s} .cs-sign-btn:hover{filter:brightness(1.08)} .cs-sign-btn:disabled{opacity:.55;cursor:default} .cs-sublabel{font-weight:400;color:var(--muted);font-size:.8em} .cs-pad-wrap{position:relative;border:1.5px dashed var(--line-soft);border-radius:12px;background:#fff;touch-action:none} body.dark .cs-pad-wrap{background:#f7f5fb} .cs-pad{display:block;width:100%;height:auto;aspect-ratio:640/200;border-radius:12px;cursor:crosshair} .cs-pad-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c7c2cf;font-family:var(--body);font-size:1.05rem;pointer-events:none;letter-spacing:.06em} .cs-pad-wrap.inked .cs-pad-ph{display:none} .cs-pad-clear{position:absolute;top:8px;right:8px;font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--muted);background:rgba(255,255,255,.9);border:1px solid var(--line-soft);border-radius:8px;padding:5px 9px;cursor:pointer} .cs-pad-clear:hover{color:var(--point);border-color:var(--point)} .cs-sign-img{max-width:230px;border:1px solid var(--line-soft);border-radius:10px;background:#fff;margin-top:8px} /* ===== 아라베스타: 색 스와치 ===== */ .arb-swatches{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* ===== 아라베스타 v2: 직관적 패턴 믹싱 UI ===== */ .arb-section{margin:14px 0 4px} .arb-sec-head{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:800;margin-bottom:9px;color:var(--ink)} .arb-sec-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--point);color:#fff;font-size:.72rem;flex:0 0 auto} .arb-cx-hint{margin-left:auto;font-weight:600;font-size:.8rem;color:var(--point);background:rgba(107,78,142,.1);padding:2px 10px;border-radius:20px} /* 액자 카드 그리드 (탭해서 미리보기) */ .arb-frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px} .arb-fcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 6px 8px;border:2px solid var(--line-soft);border-radius:14px;background:var(--bg);cursor:pointer;transition:transform .12s,border-color .14s,box-shadow .14s;font-family:inherit} .arb-fcard:hover{transform:translateY(-2px);border-color:var(--point)} .arb-fcard.on{border-color:var(--point);box-shadow:0 0 0 3px rgba(107,78,142,.16)} .arb-fc-pv{width:100%;aspect-ratio:1;border-radius:9px;background:linear-gradient(135deg,#f6f2fb,#efe8f7)} .arb-fc-pv svg{width:100%;height:100%;display:block} .arb-fc-nm{font-size:.75rem;font-weight:700;color:var(--soft-ink)} /* 복잡도 슬라이더 */ .arb-slider-row{display:flex;align-items:center;gap:10px} .arb-slider-cap{font-size:.76rem;color:var(--muted);flex:0 0 auto;font-weight:600} #arbComplex,#arbZoom{flex:1;accent-color:var(--point);height:6px} #arbComplexWrap.arb-off{opacity:.4;pointer-events:none} /* 색 탭 + 스와치 */ .arb-color-tabs{display:flex;gap:8px;margin-bottom:10px} .arb-ctab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:.84rem;font-weight:700;padding:9px 10px;border:2px solid var(--line-soft);border-radius:11px;background:var(--bg);cursor:pointer;color:var(--soft-ink);transition:border-color .14s,background .14s} .arb-ctab.on{border-color:var(--point);background:rgba(107,78,142,.07);color:var(--ink)} .arb-ctab i{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(0,0,0,.15);display:inline-block} .arb-swatch-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:8px} @media(max-width:520px){.arb-swatch-grid{grid-template-columns:repeat(5,1fr)}} .arb-sw{position:relative;aspect-ratio:1;border-radius:50%;border:2px solid var(--line-soft);background:var(--c);cursor:pointer;padding:0;transition:transform .1s,box-shadow .12s} .arb-sw:hover{transform:scale(1.14)} .arb-sw.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--point)} .arb-sw-custom{display:grid;place-items:center;background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#6be585,#4facfe,#c471f5,#ff5f6d);color:#fff;overflow:hidden} .arb-sw-custom span{font-size:1rem;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none} .arb-sw-custom input{position:absolute;inset:0;opacity:0;cursor:pointer} .arb-color-note{font-size:.76rem;color:var(--muted);margin:8px 2px 0;line-height:1.5} .arb-sw-orig{display:grid;place-items:center;background:conic-gradient(from 45deg,#1a3a6b,#2e7d6b,#c9a227,#c0392b,#1a3a6b);color:#fff} .arb-sw-orig span{font-size:.6rem;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none} /* 로고 토글 */ .arb-logo-row{align-items:center;gap:10px;flex-wrap:wrap} .arb-toggle{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:.84rem;font-weight:700;padding:8px 14px;border:2px solid var(--line-soft);border-radius:20px;background:var(--bg);cursor:pointer;color:var(--soft-ink);transition:all .14s} .arb-toggle .arb-tg-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);transition:background .14s} .arb-toggle.on{border-color:var(--point);color:var(--ink);background:rgba(107,78,142,.06)} .arb-toggle.on .arb-tg-dot{background:var(--point)} .arb-logo-pos{font-family:inherit;font-size:.82rem;padding:7px 10px;border:2px solid var(--line-soft);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer} .arb-logo-pos:disabled{opacity:.4} .arb-swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-soft);background:var(--sw);cursor:pointer;padding:0;transition:transform .1s, box-shadow .1s} .arb-swatch:hover{transform:scale(1.12)} .arb-swatch.on{border-color:var(--point);box-shadow:0 0 0 3px rgba(107,78,142,.25)} .arb-custom{width:26px;height:26px;border-radius:50%;border:2px dashed var(--line-soft);display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;position:relative;overflow:hidden} .arb-custom.on{border-color:var(--point);border-style:solid;box-shadow:0 0 0 3px rgba(107,78,142,.25)} .arb-custom input{position:absolute;inset:0;opacity:0;cursor:pointer} /* ===== 틱과 틱 사이 (횡스크롤 러너) ===== */ .calc-panel.btt-panel.open{max-height:2200px} .btt-wrap{display:flex;flex-direction:column;gap:12px} .btt-stage{position:relative;background:#0d0f14;border:2px solid var(--ink);border-radius:14px;overflow:hidden;line-height:0} .btt-stage canvas{width:100%;height:auto;display:block;image-rendering:pixelated;cursor:pointer} .btt-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:20px;background:rgba(10,12,17,.88);color:#f2f4f8;line-height:1.6;font-family:'NeoDunggeunmo',monospace} .btt-ov.hidden{display:none} .btt-eyebrow{font-size:clamp(9px,2.2vw,11px);color:#2ee66b;letter-spacing:3px} .btt-title{font-size:clamp(20px,5.4vw,34px);letter-spacing:2px} .btt-title.green{color:#2ee66b} .btt-body{font-size:clamp(11px,2.6vw,14px);color:#c9cede;max-width:440px} .btt-body em{font-style:normal;color:#fff;border-bottom:2px solid var(--point)} .btt-keys{font-size:clamp(9px,2.2vw,11px);color:#8b90a0} .btt-line{font-size:clamp(10px,2.4vw,12px);color:#2ee66b;white-space:pre-wrap;min-height:1.6em} .btt-btn{font-family:'NeoDunggeunmo',monospace;font-size:clamp(12px,2.8vw,15px);background:var(--point);color:#fff;border:2px solid #fff;border-radius:8px;padding:9px 24px;cursor:pointer;letter-spacing:2px;box-shadow:3px 3px 0 rgba(255,255,255,.25);transition:transform .06s} .btt-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(255,255,255,.25)} .btt-ctrl{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .btt-ctrl .btt-cap{font-family:var(--body);font-size:.78rem;color:var(--muted)} .btt-mute{font-family:'NeoDunggeunmo',monospace;font-size:.75rem;background:none;border:2px solid var(--ink);border-radius:8px;padding:4px 12px;cursor:pointer;color:var(--ink)} .btt-glitch{animation:bttGl .35s steps(2) infinite} @keyframes bttGl{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-2px)}} @media (prefers-reduced-motion: reduce){.btt-glitch{animation:none}} /* ===== 모로쏴도 (포격 게임) ===== */ .ms-wrap{display:flex;flex-direction:column;gap:12px} .ms-stage{position:relative;width:100%;max-width:960px;margin:0 auto;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;box-shadow:0 3px 12px rgba(107,78,142,.18);background:#1c1424;aspect-ratio:8/5} #msCanvas{display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom} /* [2026-08-12] 이 캔버스는 표시 전용(조작은 전부 버튼) — 스크롤을 막을 이유가 없다 */ .ms-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:rgba(28,20,36,.86);color:#fff;padding:20px;z-index:5} .ms-ov.hidden{display:none} .ms-ov .mso-title{font-family:var(--disp);font-size:2rem;color:#b79cff;letter-spacing:.04em} .ms-ov .mso-sub{font-family:var(--body);font-size:.92rem;line-height:1.8;color:#e6def5} .ms-btn{padding:12px 26px;border:0;border-radius:12px;cursor:pointer;font-family:var(--disp);font-size:1.05rem;color:#fff;background:var(--point);box-shadow:0 3px 0 rgba(0,0,0,.3)} .ms-btn.alt{background:#2e7d6b} .ms-btn:active{transform:translateY(2px);box-shadow:none} .ms-hud{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--line-soft);border-radius:14px;padding:10px 12px} body.dark .ms-hud{background:var(--soft)} .ms-block{display:flex;align-items:center;gap:7px} .ms-hud label{font-family:var(--body);font-size:.72rem;letter-spacing:.08em;color:var(--muted);font-weight:700} .ms-val{font-family:var(--disp);font-size:1.05rem;min-width:46px;text-align:center;color:var(--ink);background:rgba(107,78,142,.1);border:1px solid var(--line-soft);border-radius:8px;padding:2px 6px;font-variant-numeric:tabular-nums} .ms-k{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-soft);background:rgba(107,78,142,.12);color:var(--ink);font-size:15px;font-weight:700;cursor:pointer;user-select:none;touch-action:none} .ms-k:active{background:var(--point);color:#fff} .ms-gauge{position:relative;width:104px;height:14px;background:rgba(0,0,0,.18);border:1px solid var(--line-soft);border-radius:7px;overflow:hidden} .ms-gauge i{position:absolute;top:0;bottom:0;left:0;width:50%;background:linear-gradient(90deg,#2e7d6b,#c9a227,#c0392b)} .ms-gauge.fuel i{background:linear-gradient(90deg,#4ea1ff,#b79cff)} .ms-fire{padding:9px 22px;border:0;border-radius:10px;cursor:pointer;font-family:var(--disp);font-size:1.05rem;letter-spacing:.1em;color:#fff;background:#c0392b;box-shadow:0 3px 0 #7d2318} .ms-fire:active{transform:translateY(2px);box-shadow:0 1px 0 #7d2318} .ms-fire:disabled{opacity:.4;box-shadow:none;transform:none;cursor:default} .ms-wpn{padding:6px 10px;border-radius:8px;border:1px solid var(--line-soft);background:transparent;color:var(--ink);font-family:var(--body);font-size:.78rem;font-weight:700;cursor:pointer} .ms-wpn.on{background:var(--point);border-color:var(--point);color:#fff} /* ===== 핑퐁 게임 ===== */ .pong-wrap{display:flex;flex-direction:column;gap:14px} .pong-score{display:flex;align-items:center;justify-content:center;gap:22px;font-family:var(--disp)} .pong-side{display:flex;flex-direction:column;align-items:center;gap:2px} .pong-side .ps-label{font-family:var(--body);font-size:.78rem;color:var(--muted)} .pong-side .ps-num{font-size:2rem;color:var(--point);line-height:1;font-variant-numeric:tabular-nums} .pong-vs{font-size:1.5rem;color:var(--muted);align-self:center;padding-top:14px} .pong-stage{position:relative;width:100%;max-width:480px;margin:0 auto;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;box-shadow:0 3px 12px rgba(107,78,142,.18);background:#f3eefb;aspect-ratio:3/2} body.dark .pong-stage{background:#1f1b26;border-color:rgba(183,156,255,.5)} #pongCanvas{display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom;cursor:pointer} /* [2026-08-12] none→pan-y: 대기·종료 상태에선 페이지 스크롤 통과, 랠리 중에만 JS가 가로챈다 */ .pong-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:rgba(107,78,142,.78);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#fff;padding:20px;transition:opacity .25s} body.dark .pong-overlay{background:rgba(38,34,46,.86)} .pong-overlay.hide{opacity:0;pointer-events:none} .pong-overlay .po-title{font-family:var(--disp);font-size:1.6rem;line-height:1} .pong-overlay .po-desc{font-family:var(--body);font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.92)} .pong-start{font-family:var(--sans);font-size:.96rem;font-weight:700;color:var(--point);background:#fff;border:0;border-radius:999px;padding:11px 30px;cursor:pointer;box-shadow:0 2px 9px rgba(0,0,0,.18);transition:transform .12s,filter .15s;margin-top:4px} .pong-start:hover{filter:brightness(1.04);transform:translateY(-1px)} .pong-start:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.18)} .pong-ctrl{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:480px;margin:0 auto;width:100%} .pong-diff{display:flex;gap:6px} .pd-btn{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--muted);background:var(--bg);border:1.5px solid var(--line-soft);border-radius:999px;padding:7px 15px;cursor:pointer;transition:all .15s} .pd-btn:hover{border-color:var(--point);color:var(--point)} .pd-btn.on{background:var(--point);color:#fff;border-color:var(--point)} .pong-reset{font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--line-soft);border-radius:999px;padding:8px 18px;cursor:pointer;box-shadow:0 2px 9px rgba(107,78,142,.14);transition:transform .14s,box-shadow .14s} body.dark .pong-reset{background:var(--soft)} .pong-reset:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(107,78,142,.22)} .pong-reset:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(107,78,142,.14)} @media(max-width:560px){.pong-score{gap:16px}.pong-side .ps-num{font-size:1.6rem}.pong-ctrl{justify-content:center}} /* ===== 틱택토 게임 ===== */ .ttt-wrap{display:flex;flex-direction:column;align-items:center;gap:16px} .ttt-status{font-family:var(--disp);font-size:1.15rem;color:var(--ink);text-align:center;min-height:1.4em} .ttt-status.win{color:var(--point)} .ttt-status.lose{color:#b5642e} .ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:300px} .ttt-cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:2.4rem;line-height:1;background:#f3eefb;border:1px solid var(--line-soft);border-radius:14px;cursor:pointer;box-shadow:0 2px 9px rgba(107,78,142,.16);transition:transform .12s,background .15s,box-shadow .12s;user-select:none} body.dark .ttt-cell{background:#1f1b26;border-color:rgba(183,156,255,.5)} .ttt-cell:hover:not(:disabled){background:#e9e0fa;transform:translate(-1px,-1px);box-shadow:0 3px 12px rgba(107,78,142,.24)} body.dark .ttt-cell:hover:not(:disabled){background:#26222e} .ttt-cell:disabled{cursor:default} .ttt-cell.o{color:var(--point)} .ttt-cell.x{color:#b5642e} .ttt-cell.win-cell{background:var(--point);border-color:var(--point);color:#fff;animation:tttPop .35s ease} body.dark .ttt-cell.win-cell{background:var(--point)} @keyframes tttPop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}} .ttt-score{display:flex;gap:20px;font-family:var(--body);font-size:.9rem;color:var(--muted)} .ttt-score b{font-family:var(--disp);font-size:1.2rem;color:var(--point);margin-right:2px} .ttt-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} .ttt-diff{display:flex;gap:6px} .td-btn{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--muted);background:var(--bg);border:1.5px solid var(--line-soft);border-radius:999px;padding:7px 15px;cursor:pointer;transition:all .15s} .td-btn:hover{border-color:var(--point);color:var(--point)} .td-btn.on{background:var(--point);color:#fff;border-color:var(--point)} .ttt-reset{font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--line-soft);border-radius:999px;padding:8px 18px;cursor:pointer;box-shadow:0 2px 9px rgba(107,78,142,.14);transition:transform .14s,box-shadow .14s} body.dark .ttt-reset{background:var(--soft)} .ttt-reset:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(107,78,142,.22)} .ttt-reset:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(107,78,142,.14)} /* ===== 하이로 카드게임 ===== */ .hl-wrap{display:flex;flex-direction:column;align-items:center;gap:16px} .hl-streak{font-family:var(--body);font-size:.9rem;color:var(--muted)} .hl-streak b{font-family:var(--disp);font-size:1.15rem;color:var(--point);margin:0 2px} .hl-card{width:130px;height:182px;background:#fff;border:1px solid var(--line-soft);border-radius:16px;box-shadow:0 3px 12px rgba(107,78,142,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;transition:transform .18s} body.dark .hl-card{background:#f7f4fc} .hl-card.flip{animation:hlFlip .32s ease} @keyframes hlFlip{0%{transform:rotateY(80deg) scale(.96)}100%{transform:rotateY(0) scale(1)}} .hlc-rank{font-family:var(--disp);font-size:2.6rem;line-height:1;color:#1c1c1c} .hlc-suit{font-size:2.2rem;line-height:1} .hl-card.red .hlc-rank{color:#d23b3b} .hl-msg{font-family:var(--disp);font-size:1.1rem;color:var(--ink);text-align:center;min-height:1.4em} .hl-msg.win{color:var(--point)} .hl-msg.lose{color:#b5642e} .hl-actions{display:flex;gap:12px} .hl-btn{font-family:var(--disp);font-size:1.05rem;color:#fff;border:1px solid var(--line-soft);border-radius:13px;padding:12px 26px;cursor:pointer;box-shadow:0 2px 9px rgba(0,0,0,.16);transition:transform .12s,filter .15s,box-shadow .12s} .hl-high{background:#2e7d6b} .hl-low{background:#b5642e} .hl-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} .hl-btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.16)} .hl-btn:disabled{opacity:.45;cursor:default;filter:grayscale(.3)} .hl-reset{font-family:var(--sans);font-size:.9rem;font-weight:700;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:999px;padding:10px 24px;cursor:pointer;box-shadow:0 2px 9px rgba(107,78,142,.2);transition:transform .14s,filter .15s} .hl-reset:hover{filter:brightness(1.08);transform:translateY(-1px)} .hl-reset:active{transform:translateY(1px)} /* ===== 메모리 짝맞추기 (보드게임) ===== */ .mem-wrap{display:flex;flex-direction:column;align-items:center;gap:16px} .mem-status{display:flex;gap:18px;font-family:var(--body);font-size:.9rem;color:var(--muted);flex-wrap:wrap;justify-content:center} .mem-status b{font-family:var(--disp);font-size:1.15rem;color:var(--point);margin-left:3px} .mem-board{display:grid;gap:9px;width:100%;max-width:360px} .mem-board.cols4{grid-template-columns:repeat(4,1fr)} .mem-cell{aspect-ratio:3/4;position:relative;cursor:pointer;border:0;background:none;padding:0;perspective:600px} .mem-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s;border-radius:12px} .mem-cell.flipped .mem-inner,.mem-cell.matched .mem-inner{transform:rotateY(180deg)} .mem-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12px;backface-visibility:hidden;border:1px solid var(--line-soft);box-shadow:0 2px 9px rgba(107,78,142,.16)} .mem-back{background:linear-gradient(135deg,var(--point),#9b6bf5);color:#fff;font-size:1.5rem} .mem-front{background:#f3eefb;transform:rotateY(180deg);font-size:1.9rem;line-height:1} body.dark .mem-front{background:#1f1b26} .mem-cell.matched .mem-front{background:var(--point);border-color:var(--point);animation:memPop .35s ease} body.dark .mem-cell.matched .mem-front{background:var(--point)} @keyframes memPop{0%{transform:rotateY(180deg) scale(.85)}60%{transform:rotateY(180deg) scale(1.12)}100%{transform:rotateY(180deg) scale(1)}} .mem-cell:hover:not(.flipped):not(.matched) .mem-inner{transform:translateY(-2px)} .mem-cell.lock{pointer-events:none} .mem-msg{font-family:var(--disp);font-size:1.1rem;color:var(--ink);text-align:center;min-height:1.4em} .mem-msg.win{color:var(--point)} .mem-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} .mem-diff{display:flex;gap:6px} .md-btn{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--muted);background:var(--bg);border:1.5px solid var(--line-soft);border-radius:999px;padding:7px 15px;cursor:pointer;transition:all .15s} .md-btn:hover{border-color:var(--point);color:var(--point)} .md-btn.on{background:var(--point);color:#fff;border-color:var(--point)} .mem-reset{font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--line-soft);border-radius:999px;padding:8px 18px;cursor:pointer;box-shadow:0 2px 9px rgba(107,78,142,.14);transition:transform .14s,box-shadow .14s} body.dark .mem-reset{background:var(--soft)} .mem-reset:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(107,78,142,.22)} .mem-reset:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(107,78,142,.14)} /* ===== 허블 그림판 ===== */ .draw-wrap{max-width:900px;margin:0 auto} .draw-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:7px 0;border:1px solid var(--line-soft); border-radius:14px 14px 0 0;border-bottom:0;padding:8px 12px;background:var(--bg)} .dt-group{padding:1px 11px 1px 0;margin-right:11px;border-right:1px solid var(--line-soft)} .dt-group:last-child{border-right:0;margin-right:0;padding-right:0} @media(max-width:640px){.dt-group{border-right:0;margin-right:0;padding-right:0;width:100%}} body.dark .draw-toolbar{background:var(--soft)} .dt-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .dt-label{font-family:var(--sans);font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.02em} .dt-colors{display:flex;gap:5px;margin:0 4px 0 1px} .draw-fcbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;border:1px solid var(--line-soft);border-top:0;padding:9px 12px;background:var(--soft)} .draw-fcbar[hidden],.dt-btn[hidden]{display:none!important} /* ── 레이어 캔버스 샌드위치 ── */ .draw-view{background:#fff} #drawBelow,#drawAbove{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} #drawBelow{z-index:0} #drawCanvas{background:transparent;z-index:1} #drawAbove{z-index:2} #drawOverlay{z-index:3} body.dark .draw-view{background:#fff} /* ── 레이어 패널 ── */ .lay-head{display:flex;align-items:center;gap:9px;width:100%} .lay-acts{display:flex;gap:5px;margin-left:auto} .lay-acts .dt-btn{padding:4px 9px;font-size:.86rem} .lay-list{display:flex;flex-direction:column-reverse;gap:5px;width:100%; max-height:186px;overflow-y:auto;padding:3px;border:1px solid var(--line-soft); border-radius:11px;background:var(--bg)} body.dark .lay-list{background:var(--soft)} .lay-row{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px; cursor:pointer;transition:background .16s var(--e-soft),box-shadow .16s var(--e-soft)} .lay-row:hover{background:var(--soft)} body.dark .lay-row:hover{background:rgba(255,255,255,.05)} .lay-row.on{background:rgba(107,78,142,.1);box-shadow:inset 0 0 0 1.5px rgba(107,78,142,.45)} .lay-thumb{width:38px;height:26px;flex:none;border:1px solid var(--line-soft);border-radius:5px; background:#fff;background-image: linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%); background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;object-fit:contain} .lay-nm{flex:1;min-width:0;font-family:var(--body);font-size:.8rem;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lay-nm input{width:100%;border:1px solid var(--point);border-radius:6px;padding:2px 5px; font-family:var(--body);font-size:.8rem;background:var(--bg);color:var(--ink)} .lay-op{font-family:var(--sans);font-size:.66rem;color:var(--muted);flex:none; font-variant-numeric:tabular-nums} .lay-ic{background:none;border:0;cursor:pointer;font-size:.86rem;line-height:1;padding:3px; opacity:.78;flex:none;transition:opacity .15s var(--e-soft),transform .15s var(--e-out)} .lay-ic:hover{opacity:1;transform:scale(1.12)} .lay-ic.off{opacity:.28} .lay-props{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%} .lay-select{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--ink); background:var(--bg);border:1.5px solid var(--line-soft);border-radius:9px;padding:5px 8px;cursor:pointer} body.dark .lay-select{background:var(--soft)} /* 말풍선 세로쓰기 토글 */ .dt-btn.vt-on{background:var(--point);color:#fff;border-color:var(--point)} /* ── 도구·도형은 아이콘만 (그림이 곧 이름이라 글자가 없어도 읽힌다) ── */ #dtTools .dt-btn,#dtShapes .dt-btn,#dtAssist .dt-btn,#dtPressure,#dtUndo,#dtRedo{ padding:0;width:32px;height:32px;font-size:1.02rem;line-height:1; display:inline-flex;align-items:center;justify-content:center;border-radius:9px} #dtTools .dt-btn .dtx,#dtShapes .dt-btn .dtx,#dtAssist .dt-btn .dtx,#dtPressure .dtx, #dtUndo .dtx,#dtRedo .dtx{display:none} #dtUndo:disabled,#dtRedo:disabled{opacity:.32;cursor:default} #dtTools .dt-btn.on,#dtShapes .dt-btn.on{background:var(--point);color:#fff;border-color:var(--point)} /* 도구·도형은 한 덩어리로 보이게 묶는다 */ #dtTools,#dtShapes{gap:3px} #dtTools .dt-btn,#dtShapes .dt-btn{border-width:1px} /* 편집 버튼은 아이콘 + 글자 유지(파괴적 동작이라 이름이 필요) */ #dtAssist .dt-size{width:78px} /* ── 그림판 컴팩트 인터페이스 ── */ .dt-btn{font-size:.76rem;padding:5px 9px;border-radius:9px;border-width:1.2px} .dt-color{width:22px;height:22px} .dt-color-pick{width:26px;height:26px} .dt-size{width:104px} .dfc-range{width:104px} [data-page="draw"] .sec-head{margin-bottom:6px} [data-page="draw"] .sec-desc{margin:0 0 8px;font-size:.83rem} [data-page="draw"] .page-pad{padding-top:14px} /* 좁은 화면: 도구·꾸미기는 아이콘만 남겨 두 줄을 넘기지 않게 */ @media(max-width:820px){ .draw-toolbar{padding:7px 9px;gap:6px 0} .dt-group{padding-right:8px;margin-right:8px} .dt-group .dt-btn .dtx{display:none} .dt-btn{padding:6px 8px;font-size:.95rem} .dt-size,.dfc-range{width:82px} #dtAssist .dt-size{width:64px} } @media(max-width:640px){ .dt-group{border-right:0;margin-right:0;padding-right:0;width:auto} .draw-toolbar{gap:5px 4px} .dt-label{display:none} .dt-label.keep{display:inline} } /* 필압 토글 */ .dt-btn.pw-on{background:var(--point);color:#fff;border-color:var(--point)} body.dark .draw-fcbar{background:var(--bg)} .dfc-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .dfc-label{font-family:var(--sans);font-size:.72rem;font-weight:800;letter-spacing:.05em;color:var(--muted)} .dfc-seg{display:inline-flex;border:1.5px solid var(--line-soft);border-radius:999px;overflow:hidden;background:var(--bg)} .dfc-seg button{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--muted);background:none;border:0;padding:5px 11px;cursor:pointer;transition:background .15s,color .15s} .dfc-seg button+button{border-left:1px solid var(--line-soft)} .dfc-seg button:hover{color:var(--point)} .dfc-seg button.on{background:var(--point);color:#fff} .dfc-range{width:110px;accent-color:var(--point)} .dfc-sliders{gap:7px} .dt-color{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-soft);cursor:pointer;transition:transform .12s} .dt-color:hover{transform:scale(1.15)} .dt-color.on{border-color:var(--point);transform:scale(1.2);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--point)} .dt-color-pick{width:26px;height:26px;border:1.5px solid var(--line-soft);border-radius:6px;padding:0;cursor:pointer;background:none} .dt-size{width:96px;accent-color:var(--point)} .dt-btn{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--ink);background:var(--soft);border:1.5px solid var(--line-soft);border-radius:10px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s} body.dark .dt-btn{background:var(--bg)} .dt-btn:hover{border-color:var(--point);color:var(--point)} .dt-btn.on{background:var(--point);color:#fff;border-color:var(--point)} .dt-btn.primary{background:var(--point);color:#fff;border-color:var(--point)} .draw-stage{position:relative;border:1px solid var(--line-soft);border-radius:0 0 16px 16px;overflow:hidden;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.1);touch-action:none;overscroll-behavior:contain} .draw-view{position:relative;transform-origin:0 0;will-change:transform} /* 말풍선 안에서 바로 글자를 고치는 입력칸 — 캔버스 위에 딱 겹쳐 뜬다 */ .dt-bubedit{position:absolute;z-index:6;margin:0;padding:0;border:0;outline:0;resize:none; overflow:hidden;background:transparent;color:#2e2a36;text-align:center; font-family:'Gowun Dodum','Apple SD Gothic Neo',sans-serif;font-weight:400; caret-color:#6b4e8e;letter-spacing:0;white-space:pre-wrap;word-break:break-all} .dt-bubedit::selection{background:rgba(107,78,142,.25)} .dt-bubedit-ring{position:absolute;z-index:5;pointer-events:none;border:1.5px dashed #6b4e8e; border-radius:8px;opacity:.75} #drawCanvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;background:#fff;position:relative;z-index:1} #drawCanvas.has-ref{background:transparent} #drawRef{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;display:none;z-index:0} #drawOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .draw-size-badge{position:absolute;top:10px;right:12px;z-index:3;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.05em;color:var(--muted);background:rgba(255,255,255,.82);border:1px solid var(--line-soft);border-radius:999px;padding:3px 10px;pointer-events:none} /* 확대 중에만 나타나는 이동용 스크롤바 — 썸을 찝어서 끌면 화면이 움직인다 */ .draw-sb{position:absolute;z-index:4;background:rgba(28,28,34,.08);border-radius:999px;touch-action:none} .draw-sb-x{left:12px;right:30px;bottom:9px;height:13px} .draw-sb-y{top:12px;bottom:30px;right:9px;width:13px} .draw-sb-thumb{position:absolute;background:rgba(107,78,142,.6);border:1px solid rgba(255,255,255,.65);border-radius:999px;cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.18)} .draw-sb-x .draw-sb-thumb{top:0;height:100%;min-width:26px} .draw-sb-y .draw-sb-thumb{left:0;width:100%;min-height:26px} .draw-sb-thumb:active{cursor:grabbing;background:rgba(107,78,142,.85)} .dt-btn:disabled{opacity:.35;cursor:default} .draw-ai{margin-top:16px;border:1px solid var(--line-soft);border-radius:16px;background:var(--bg);overflow:hidden} body.dark .draw-ai{background:var(--soft)} .draw-ai-head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:linear-gradient(135deg,rgba(107,78,142,.12),transparent);border-bottom:1px solid var(--line-soft)} .draw-ai-head .dai-ic{width:34px;height:34px;border-radius:50%;background:var(--point);display:grid;place-items:center;font-size:1.1rem;flex:0 0 auto} .draw-ai-head h4{font-family:var(--disp);font-size:1.05rem;color:var(--title)} .draw-ai-head p{font-family:var(--body);font-size:.76rem;color:var(--muted);margin-top:1px} .draw-ai-body{padding:16px 18px} .dai-acts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .dai-act{font-family:var(--body);font-size:.86rem;color:var(--point);background:var(--bg);border:1.5px solid var(--point);border-radius:11px;padding:9px 14px;cursor:pointer;transition:background .15s} body.dark .dai-act{background:var(--soft)} .dai-act:hover{background:rgba(107,78,142,.08)} .dai-prompt{display:flex;gap:8px;margin-bottom:12px} .dai-prompt input{flex:1;border:1.5px solid var(--line-soft);border-radius:11px;padding:11px 14px;font-family:var(--body);font-size:.9rem;color:var(--ink);background:var(--soft);outline:none} body.dark .dai-prompt input{background:var(--bg)} .dai-prompt input:focus{border-color:var(--point)} .dai-prompt button{flex:0 0 auto;font-family:var(--sans);font-weight:700;font-size:.86rem;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:11px;padding:0 18px;cursor:pointer} .dai-out{font-family:var(--body);font-size:.9rem;color:var(--ink);line-height:1.7;background:var(--soft);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px;min-height:54px;white-space:pre-wrap} body.dark .dai-out{background:var(--bg)} .dai-out.empty{color:var(--muted)} .dai-note{font-family:var(--body);font-size:.72rem;color:var(--muted);margin-top:10px;line-height:1.6} /* ===== 그림 자랑 게시판 ===== */ .gboard{margin-top:30px} .gboard-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px} .gboard-head h3{font-family:var(--disp);font-size:1.25rem;color:var(--title);display:flex;align-items:center;gap:8px} .gboard-head .gbh-count{font-family:var(--body);font-size:.82rem;color:var(--muted)} .gboard-up{font-family:var(--sans);font-size:.86rem;font-weight:700;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:11px;padding:9px 16px;cursor:pointer;box-shadow:0 2px 9px rgba(0,0,0,.12);transition:filter .15s,transform .12s} .gboard-up:hover{filter:brightness(1.08)} .gboard-up:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.12)} .gb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px} @media(max-width:480px){.gb-grid{grid-template-columns:repeat(2,1fr);gap:12px}} .gbart{border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--bg);box-shadow:0 3px 12px rgba(0,0,0,.08);cursor:pointer;transition:transform .16s,box-shadow .16s;display:flex;flex-direction:column;text-align:left;padding:0} body.dark .gbart{background:var(--soft)} .gbart:hover{transform:translateY(-3px);box-shadow:0 5px 21px rgba(107,78,142,.18)} .gbart-img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#fff;display:block;border-bottom:1px solid var(--line-soft)} .gbart-info{padding:9px 11px 11px} .gbart-title{font-family:var(--disp);font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gbart-meta{font-family:var(--body);font-size:.74rem;color:var(--muted);display:flex;justify-content:space-between;margin-top:3px} .gbart-like{color:var(--point);font-weight:700} .gb-empty{grid-column:1/-1;text-align:center;padding:44px 20px;border:2px dashed var(--line-soft);border-radius:16px;font-family:var(--body);color:var(--muted);line-height:1.7} .gb-empty .gbe-ic{font-size:2.6rem;display:block;margin-bottom:10px;opacity:.7} /* 업로드 모달 */ .gbup-mask{position:fixed;inset:0;background:rgba(17,17,17,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:140;display:none;align-items:center;justify-content:center;padding:20px} .gbup-mask.open{display:flex} .gbup{background:var(--bg);border:1px solid var(--line-soft);border-radius:20px;box-shadow:0 7px 30px rgba(0,0,0,.16);width:100%;max-width:440px;padding:24px;max-height:90vh;overflow-y:auto} .gbup h4{font-family:var(--disp);font-size:1.2rem;color:var(--title);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between} .gbup .gbup-x{background:none;border:0;font-size:1.5rem;color:var(--muted);cursor:pointer} .gbup-prev{width:100%;aspect-ratio:1/1;border:2px dashed var(--line-soft);border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden;margin-bottom:14px} .gbup-prev img{width:100%;height:100%;object-fit:contain} .gbup-prev .ph{font-family:var(--body);font-size:.86rem;color:var(--muted);text-align:center;line-height:1.6} .gbup input[type=text]{width:100%;border:1.5px solid var(--line-soft);border-radius:11px;padding:11px 14px;font-family:var(--body);font-size:.92rem;color:var(--ink);background:var(--soft);outline:none;margin-bottom:10px} body.dark .gbup input[type=text]{background:var(--soft)} .gbup input[type=text]:focus{border-color:var(--point)} .gbup-pick{display:block;text-align:center;font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--point);background:var(--bg);border:1.5px solid var(--point);border-radius:11px;padding:10px;cursor:pointer;margin-bottom:12px} .gbup-submit{width:100%;font-family:var(--sans);font-size:.94rem;font-weight:700;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:12px;padding:12px;cursor:pointer} /* ===== 그림 자랑 게시판 ===== */ .gboard{margin-top:34px} .gboard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap} .gboard-head h3{font-family:var(--disp);font-size:1.3rem;color:var(--title)} .gboard-head p{font-family:var(--body);font-size:.84rem;color:var(--muted);margin-top:3px} .gboard-up{font-family:var(--sans);font-size:.88rem;font-weight:700;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:12px;padding:10px 18px;cursor:pointer;box-shadow:0 2px 9px rgba(0,0,0,.12);transition:filter .15s,transform .12s} .gboard-up:hover{filter:brightness(1.08)} .gboard-up:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.12)} .gboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;min-height:120px} @media(max-width:480px){.gboard-grid{grid-template-columns:repeat(2,1fr);gap:12px}} .gb-empty{grid-column:1/-1;text-align:center;padding:46px 20px;border:2px dashed var(--line-soft);border-radius:16px;color:var(--muted);font-family:var(--body);font-size:.92rem;line-height:1.7} .gb-card{border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--bg);box-shadow:0 3px 12px rgba(0,0,0,.08);cursor:pointer;transition:transform .16s,box-shadow .16s;display:flex;flex-direction:column;padding:0} body.dark .gb-card{background:var(--soft)} .gb-card:hover{transform:translateY(-3px);box-shadow:0 5px 21px rgba(107,78,142,.18)} .gb-thumb{width:100%;aspect-ratio:1/1;background:#fff;overflow:hidden} .gb-thumb img{width:100%;height:100%;object-fit:cover;display:block} .gb-info{padding:9px 12px 11px;display:flex;flex-direction:column;gap:3px} .gb-title{font-family:var(--disp);font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gb-meta{font-family:var(--body);font-size:.74rem;color:var(--muted);display:flex;justify-content:space-between} .gb-like{color:var(--point);font-weight:700} @media(max-width:560px){.draw-toolbar{gap:8px 10px}.dt-size{width:70px}} /* 터치 기기: 대지 양옆에 스크롤 레일 여백 — 이 모서리를 잡고 끌면 페이지가 움직인다 (도화지 위는 잠김) 화면 폭 기준이 아니라 터치 기기 기준이라, 갤럭시 폴드를 펼쳐도 레일이 항상 남는다 */ @media(pointer:coarse){ /* 오른쪽에만 50px — 이 자리에 전용 스크롤바가 상주하고, 툴·대지는 왼쪽으로 붙는다 */ [data-page="draw"] .draw-wrap{max-width:min(900px,calc(100% - 26px));margin:0 26px 0 0} } /* ── 그림판 전용 페이지 스크롤바 (터치 기기) — 이 썸을 끌어야만 페이지가 위아래로 움직인다. 트랙이 오른쪽 50px 기둥 전체를 차지해 굵은 손가락도 빗맞지 않는다 ── */ .draw-pgsb{display:none;position:fixed;right:0;top:76px;bottom:76px;width:26px;z-index:60; background:transparent;border-left:0;touch-action:none;opacity:.34;transition:opacity .22s ease} .draw-pgsb::before{content:'';position:absolute;left:11px;right:11px;top:6px;bottom:6px; border-radius:999px;background:var(--muted);opacity:.16} .draw-pgsb.awake,.draw-pgsb:hover,.draw-pgsb.dragging{opacity:1} .draw-pgsb-thumb{position:absolute;left:8px;right:8px;min-height:52px;background:var(--point); border:0;border-radius:999px;box-shadow:0 1px 5px rgba(0,0,0,.22);cursor:grab;touch-action:none; transition:left .16s ease,right .16s ease,filter .16s ease; background-image:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.45) 6px 8px);background-size:16px 22px;background-position:center;background-repeat:no-repeat} .draw-pgsb:hover .draw-pgsb-thumb{left:6px;right:6px} .draw-pgsb-thumb:active,.draw-pgsb.dragging .draw-pgsb-thumb{cursor:grabbing;left:5px;right:5px;filter:brightness(1.1)} body.dark .draw-pgsb::before{background:#fff;opacity:.2} @media(pointer:coarse){ .draw-pgsb{display:block} } .gall-gtitle{font-family:var(--disp);font-size:1.25rem;color:var(--ink);margin-bottom:0;text-align:center} .mbti-help{font-family:var(--body);font-size:.85rem;color:var(--muted);margin:-6px 0 14px;text-align:center} /* 4x4 만다라트 */ .mbti-grid{display:grid;grid-template-columns:repeat(4,112px);gap:10px;justify-content:center;max-width:max-content;margin:0 auto} @media(max-width:560px){.mbti-grid{grid-template-columns:repeat(4,1fr);gap:6px;max-width:none}} .mcell{position:relative;aspect-ratio:1/1;border:1px solid var(--line-soft);border-radius:13px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px;color:#fff;box-shadow:0 2px 9px rgba(0,0,0,.1);transition:transform .16s,box-shadow .16s,filter .16s} .mcell:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(0,0,0,.16);filter:brightness(1.08)} .mcell:active{transform:translateY(1px)} .mcell .mt{font-family:var(--sans);font-weight:700;font-size:clamp(.95rem,2.8vw,1.2rem);letter-spacing:.02em;line-height:1} .mcell .mn{font-family:var(--body);font-size:clamp(.58rem,1.8vw,.72rem);opacity:.9;line-height:1.15;text-align:center} /* group colors */ .g-analyst{background:#5b4b8a} /* 보라 - 분석가 */ .g-diplo{background:#3f7d6e} /* 초록 - 외교관 */ .g-sentinel{background:#3d58a7} /* 파랑 - 관리자 (가이드라인 블루 계열) */ .g-explorer{background:#b07d3a} /* 노랑/브론즈 - 탐험가 */ .mbti-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-family:var(--body);font-size:.8rem;color:var(--soft-ink);justify-content:center} .mbti-legend span{display:inline-flex;align-items:center;gap:6px} .mbti-legend i.lg{width:13px;height:13px;border-radius:4px;border:1px solid var(--line-soft);display:inline-block} .board-grid{display:grid;grid-template-columns:repeat(3,150px);gap:12px;justify-content:center;max-width:max-content;margin:0 auto} @media(max-width:560px){.board-grid{grid-template-columns:repeat(2,1fr);max-width:none}} .board{border:1px solid var(--line-soft);border-radius:15px;background:var(--bc,#222);color:#fff;cursor:pointer;padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:88px;box-shadow:0 3px 12px rgba(0,0,0,.1);transition:transform .18s,box-shadow .18s} .board:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.14)} .board .bcode{font-family:var(--sans);font-weight:700;font-size:1.45rem;letter-spacing:.02em;line-height:1.1;color:#fff} .board .btypes{font-family:var(--body);font-size:.72rem;color:rgba(255,255,255,.7);margin-top:5px} .gall-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:.92rem;font-weight:700;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:12px;cursor:pointer;padding:10px 18px;margin-bottom:18px;box-shadow:0 2px 9px rgba(0,0,0,.18);transition:transform .16s,box-shadow .16s,filter .16s} .gall-back:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.24);filter:brightness(1.06)} .gall-back:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.2)} .gall-back:before{content:"←";font-size:1.05rem;font-weight:800} .gall-head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--point);padding:0 4px 10px 6px;margin-bottom:12px} .gall-head h3{font-family:var(--disp);font-size:1.5rem;color:var(--ink)} .gall-count{font-family:var(--sans);font-size:.82rem;color:var(--muted)} /* 베스트 모니터링 */ .best-monitor{border:1.5px solid var(--point);border-radius:14px;overflow:hidden;margin-bottom:14px;background:linear-gradient(135deg,rgba(107,78,142,.08),transparent)} /* ===== 갤러리 연대기 (허브 상단 — 전 갤러리 최신 흐름 타임라인) ===== */ .gall-chrono{margin-bottom:26px} .gc-head{display:flex;align-items:baseline;gap:10px;margin-bottom:2px} .gc-title{font-family:var(--disp);font-size:1.02rem;color:var(--ink)} .gc-sub{font-family:var(--body);font-size:.78rem;color:var(--muted)} .gc-rail{display:flex;overflow-x:auto;padding:20px 2px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .gc-item{position:relative;flex:0 0 auto;width:200px;background:none;border:0;text-align:left;padding:16px 18px 10px 14px;cursor:pointer;display:flex;flex-direction:column;gap:4px} .gc-item::before{content:'';position:absolute;top:5px;left:0;right:0;height:2px;background:var(--line-soft)} .gc-item:first-child::before{left:14px;border-radius:2px 0 0 2px} .gc-item:last-child::before{right:calc(100% - 14px - 60px)} .gc-item::after{content:'';position:absolute;top:0;left:14px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2.5px solid var(--point);box-sizing:border-box;transition:background .15s} .gc-item:first-child::after{background:var(--point);box-shadow:0 0 0 4px rgba(107,78,142,.18);animation:gcPulse 2.2s ease-in-out infinite} @keyframes gcPulse{0%,100%{box-shadow:0 0 0 3px rgba(107,78,142,.22)}50%{box-shadow:0 0 0 7px rgba(107,78,142,.05)}} .gc-item:hover::after{background:var(--point)} .gc-ago{font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--point);letter-spacing:.02em} .gc-board{font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line-soft);border-radius:999px;padding:2px 9px;align-self:flex-start;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .gc-ttl{font-family:var(--body);font-size:.9rem;font-weight:600;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s} .gc-item:hover .gc-ttl{color:var(--point)} .gc-nick{font-family:var(--body);font-size:.76rem;color:var(--muted)} .gc-rail::-webkit-scrollbar{height:6px} .gc-rail::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:999px} body.dark .gc-item::after{background:var(--bg)} body.dark .gc-item:first-child::after{background:var(--point)} .hub-monitor{margin-bottom:24px;box-shadow:0 4px 15px rgba(107,78,142,.12)} .bm-head{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--point)} .bm-badge{font-family:var(--disp);font-size:.92rem;color:#fff;font-weight:400} .bm-dots{display:flex;gap:5px} .bm-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s,transform .2s;cursor:pointer} .bm-dots i.on{background:#fff;transform:scale(1.3)} .bm-body{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;background:none;border:0;text-align:left;transition:background .15s} .bm-body:hover{background:rgba(107,78,142,.06)} .bm-rank{font-family:var(--disp);font-size:1.5rem;color:var(--point);font-weight:400;flex:0 0 auto;min-width:26px;text-align:center} .bm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .bm-title{font-family:var(--body);font-size:1rem;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bm-meta{font-family:var(--body);font-size:.78rem;color:var(--muted)} .bm-rec{font-family:var(--sans);font-size:.92rem;font-weight:700;color:var(--point);flex:0 0 auto} .bm-empty .bm-title{color:var(--muted);font-weight:400} /* 게시판별 주간·월간 인기글 (접이식) */ .board-best{border:2px solid var(--line-soft);border-radius:14px;overflow:hidden;margin-top:18px} .bb-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--soft);border:0;padding:13px 18px;cursor:pointer;font-family:var(--disp);font-size:1rem;color:var(--ink);transition:background .15s} body.dark .bb-toggle{background:var(--bg)} .bb-toggle:hover{background:rgba(107,78,142,.07)} .bb-toggle-label{font-weight:700} .bb-toggle-arrow{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--point);color:#fff;font-size:.78rem;transition:transform .28s} .bb-toggle[aria-expanded="true"]{background:var(--point);color:#fff} .bb-toggle[aria-expanded="true"] .bb-toggle-arrow{transform:rotate(180deg);background:#fff;color:var(--point)} .bb-panel{max-height:0;overflow:hidden;transition:max-height .32s ease} .bb-panel.open{max-height:600px} .bb-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--line-soft)} .bb-tab{flex:0 0 auto;font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--muted);background:none;border:0;padding:11px 18px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s} .bb-tab.on{color:var(--point);border-bottom-color:var(--point)} .bb-list{padding:8px 10px} .bb-item{width:100%;display:flex;align-items:center;gap:12px;padding:9px 10px;background:none;border:0;border-radius:9px;cursor:pointer;text-align:left;transition:background .14s} .bb-item:hover{background:rgba(107,78,142,.06)} .bb-item + .bb-item{border-top:1px solid var(--line-soft)} .bb-rank{font-family:var(--disp);font-size:1rem;font-weight:400;color:var(--point);flex:0 0 auto;min-width:20px;text-align:center} .bb-main{flex:1;min-width:0} .bb-title{font-family:var(--body);font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .bb-meta{font-family:var(--body);font-size:.74rem;color:var(--muted)} .bb-rec{font-family:var(--sans);font-size:.84rem;font-weight:700;color:var(--point);flex:0 0 auto} .bb-empty{font-family:var(--body);font-size:.86rem;color:var(--muted);text-align:center;padding:18px} /* 게시판 광고 슬롯 */ .board-ad{margin:18px 0 4px;border:1.5px dashed var(--line-soft);border-radius:12px;padding:10px;position:relative;background:rgba(0,0,0,.015)} /* ═══ 통합 광고 슬롯 ═══ · 미승인(클라이언트 ID 미설정) 상태에서는 자리 자체를 감춘다 → 빈 점선 상자가 안 보인다 · ?ads=preview 로 접속하면 위치만 확인할 수 있다 · 본문·버튼과 충분히 떨어뜨려 오클릭(무효 트래픽)을 막는다 */ .mrgd-ad{position:relative;margin:30px auto 26px;max-width:760px;padding:12px 10px 10px; border:1.5px dashed var(--line-soft);border-radius:14px;background:rgba(0,0,0,.015)} .mrgd-ad[hidden],.mrgd-ad--off,.mrgd-ad--dead{display:none!important} .mrgd-ad-label{position:absolute;top:-9px;left:14px;background:var(--bg);font-family:var(--sans); font-size:.64rem;font-weight:700;color:var(--muted);padding:0 7px;letter-spacing:.04em} /* 광고가 도착하기 전에도 자리 높이를 잡아 둔다 — 뒤늦게 밀려나는 레이아웃 점프(CLS) 방지 */ .mrgd-ad-mount{min-height:100px} @media(max-width:640px){ .mrgd-ad-mount{min-height:110px} } .mrgd-ad-mount .adsbygoogle{display:block} .mrgd-ad-ph{display:flex;align-items:center;justify-content:center;gap:9px;min-height:96px; color:var(--muted);font-family:var(--body);font-size:.86rem} .mrgd-ad.is-live .mrgd-ad-ph{display:none} .mrgd-ad.is-live{border-style:solid;background:transparent} .mrgd-ad.is-live .mrgd-ad-mount{min-height:0} body.dark .mrgd-ad{background:rgba(255,255,255,.02)} @media(max-width:640px){ .mrgd-ad{margin:24px auto 20px;padding:11px 8px 9px} } /* ═══ 심리테스트 → 모로가도 콘텐츠 유도 ═══ */ .psy-cta{margin:16px 0 2px;padding:16px 17px;border:1.5px solid var(--line-soft);border-radius:15px; background:var(--soft);position:relative;overflow:hidden} .psy-cta::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--point);opacity:.55} .psy-cta-t{font-family:var(--disp);font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 5px} .psy-cta-d{font-family:var(--body);font-size:.84rem;color:var(--soft-ink);line-height:1.7;margin:0 0 12px} .psy-cta-row{display:flex;flex-wrap:wrap;gap:8px} .psy-cta-row button{font-family:var(--body);font-size:.83rem;font-weight:600;color:var(--ink); background:var(--bg);border:1.5px solid var(--line-soft);border-radius:999px;padding:9px 15px; cursor:pointer;transition:border-color .15s,color .15s,transform .15s} .psy-cta-row button:hover{border-color:var(--point);color:var(--point);transform:translateY(-1px)} body.dark .psy-cta{background:rgba(255,255,255,.04)} body.dark .board-ad{background:rgba(255,255,255,.02)} .board-ad-label{position:absolute;top:-9px;left:14px;background:var(--bg);font-family:var(--sans);font-size:.64rem;font-weight:700;color:var(--muted);padding:0 7px;letter-spacing:.04em} .board-ad-ph{display:flex;align-items:center;justify-content:center;gap:9px;min-height:90px;color:var(--muted);font-family:var(--body)} .board-ad-ph .bap-ic{font-size:1.4rem;opacity:.7} .board-ad-ph .bap-tx{font-size:.88rem} .board-ad-ph .bap-tx small{font-size:.76rem;opacity:.75} /* 게시판 검색 */ .board-search{display:flex;gap:8px;margin:16px 4px 16px 6px;flex-wrap:wrap} .bs-field{font-family:var(--body);font-size:.88rem;border:1.5px solid var(--line-soft);border-radius:10px;padding:9px 12px;background:var(--bg);color:var(--ink);flex:0 0 auto} body.dark .bs-field{background:var(--soft)} .bs-input{flex:1;min-width:140px;font-family:var(--body);font-size:.9rem;border:1.5px solid var(--line-soft);border-radius:10px;padding:9px 14px;background:var(--bg);color:var(--ink);outline:none} body.dark .bs-input{background:var(--soft)} .bs-input:focus{border-color:var(--point)} .bs-go{font-family:var(--sans);font-size:.88rem;font-weight:700;color:#fff;background:var(--point);border:0;border-radius:10px;padding:9px 18px;cursor:pointer;flex:0 0 auto} .bs-clear{font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--muted);background:var(--soft);border:1.5px solid var(--line-soft);border-radius:10px;padding:9px 14px;cursor:pointer;flex:0 0 auto} .bs-write{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--disp);font-size:.95rem;color:#fff;background:var(--point);border:1px solid var(--line-soft);border-radius:12px;padding:9px 20px;cursor:pointer;flex:0 0 auto;box-shadow:0 2px 9px rgba(107,78,142,.22);transition:transform .16s,box-shadow .16s,filter .16s} .bs-write:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(107,78,142,.3);filter:brightness(1.05)} .bs-write:active{transform:translateY(0);box-shadow:0 2px 6px rgba(107,78,142,.22)} .bs-write span{font-size:.92rem} @media(max-width:520px){ .bs-write{flex:1 1 100%;margin-top:2px;padding:12px 20px;font-size:1.02rem} .bs-write span{font-size:1rem} } /* 페이지네이션 */ .board-pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:18px;flex-wrap:wrap} .board-pager button{font-family:var(--sans);font-size:.88rem;font-weight:700;color:var(--ink);background:var(--bg);border:1.5px solid var(--line-soft);border-radius:9px;min-width:36px;height:36px;padding:0 10px;cursor:pointer;transition:all .14s} body.dark .board-pager button{background:var(--soft)} .board-pager button:hover:not(:disabled){border-color:var(--point);color:var(--point)} .board-pager button.on{background:var(--point);color:#fff;border-color:var(--point)} .board-pager button:disabled{opacity:.4;cursor:default} .board-pager .pg-ellipsis{color:var(--muted);padding:0 2px} .post-form{border:1px solid var(--line-soft);border-radius:18px;background:var(--soft);padding:18px 20px;margin-bottom:22px} .pf-row{display:grid;grid-template-columns:110px 180px 1fr;gap:10px;margin-bottom:10px} @media(max-width:640px){.pf-row{grid-template-columns:1fr 1fr}.pf-row #pfTitle{grid-column:span 2}} .pf-tag,.post-form input,.post-form textarea{font-family:var(--body);font-size:.9rem;color:var(--ink);background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:10px 14px;width:100%} .pf-tag:focus,.post-form input:focus,.post-form textarea:focus{outline:none;box-shadow:0 2px 6px rgba(0,0,0,.1)} .post-form input.pf-pass,.ci-form input.ci-pass,.aj-form input.ajf-pass{flex:0 0 auto !important;width:118px !important;letter-spacing:.16em;text-align:center;font-size:.8rem !important;font-weight:700 !important;color:var(--point) !important;padding:8px 10px !important;border:1.5px solid var(--point) !important;border-radius:10px !important;background:rgba(107,78,142,.08) !important;box-shadow:none !important;margin-bottom:0 !important} .post-form input.pf-pass::placeholder,.ci-form input.ci-pass::placeholder,.aj-form input.ajf-pass::placeholder{color:var(--point) !important;opacity:.85 !important;font-weight:700} body.dark .post-form input.pf-pass,body.dark .ci-form input.ci-pass,body.dark .aj-form input.ajf-pass{background:rgba(183,156,255,.14) !important} .post-form input.pf-pass:focus,.ci-form input.ci-pass:focus,.aj-form input.ajf-pass:focus{border-color:var(--point) !important;background:rgba(107,78,142,.14) !important;box-shadow:0 0 0 3px rgba(107,78,142,.18) !important} .post-form textarea{min-height:70px;resize:vertical;margin-bottom:10px} /* 리치 텍스트 에디터 */ .rte{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;margin-bottom:10px;background:#fff} body.dark .rte{background:var(--soft)} .rte-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:7px 8px;background:var(--soft);border-bottom:1.5px solid var(--line-soft)} .rte-b{font-family:var(--sans);font-size:.85rem;min-width:30px;height:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line-soft);border-radius:7px;cursor:pointer;color:var(--ink);transition:background .14s,border-color .14s} body.dark .rte-b{background:var(--bg)} .rte-b:hover{background:var(--point);color:#fff;border-color:var(--point)} .rte-b.active{background:var(--point);color:#fff;border-color:var(--point)} .rte-b.rte-clear{font-size:.72rem;color:var(--muted)} .rte-font,.rte-lh,.rte-fs{font-family:var(--sans);font-size:.8rem;height:30px;border:1px solid var(--line-soft);border-radius:7px;background:#fff;color:var(--ink);padding:0 6px;cursor:pointer} body.dark .rte-font,body.dark .rte-lh,body.dark .rte-fs{background:var(--bg)} .rte-sep{width:1px;height:20px;background:var(--line-soft);margin:0 3px} /* 2026-08-03: word-break:break-word 추가 — body 전역 keep-all이 에디터에 상속되면 띄어쓰기 없는 긴 구간이 통째로 다음 줄로 '점프'해 엔터 없이 행갈이된 것처럼 보였다. 읽기 화면(.pd-body·.st-reader-body·.ci-c-msg)과 같은 값이라 쓰는 줄바꿈=게시 줄바꿈. */ .rte-area{min-height:140px;max-height:50vh;overflow-y:auto;padding:13px 15px;font-family:var(--body);font-size:.95rem;color:var(--ink);line-height:1.8;outline:none;word-break:break-word} .rte-area:empty:before{content:attr(data-ph);color:var(--muted)} .rte-area b,.rte-area strong{font-weight:700} .rte-area i,.rte-area em{font-style:italic} /* 본문 삽입 이미지 (편집기 + 상세보기 공통) */ .rte-inline-img{display:block;max-width:100%;height:auto;border-radius:12px;border:1.5px solid var(--line-soft);margin:10px 0} .rte-area .rte-inline-img{cursor:pointer} /* ── 이미지 배치(Pages식): 클릭하면 툴바가 떠서 감싸기·가운데·크기 조절 ── */ .rte-area,.pd-body-text,.aj-e-body,.ci-c-msg{display:flow-root} /* float가 밖으로 새지 않게 */ img.rte-inline-img.rte-img-left{float:left;width:46%;margin:6px 16px 10px 0} img.rte-inline-img.rte-img-right{float:right;width:46%;margin:6px 0 10px 16px} img.rte-inline-img.rte-img-center{display:block;float:none;margin-left:auto;margin-right:auto} img.rte-inline-img.rte-img-s{width:32%} img.rte-inline-img.rte-img-m{width:58%} img.rte-inline-img.rte-img-f{width:100%;max-width:100%} @media(max-width:560px){ img.rte-inline-img.rte-img-left,img.rte-inline-img.rte-img-right{width:52%} } .rte-area img.rte-sel{outline:2.5px solid var(--point);outline-offset:2px} #rteImgTb{position:fixed;z-index:300;display:none;gap:3px;align-items:center;background:var(--card,#fff);border:1.5px solid var(--line-soft);border-radius:12px;padding:5px 6px;box-shadow:0 10px 26px rgba(0,0,0,.18);font-family:var(--sans)} #rteImgTb.open{display:flex} #rteImgTb button{border:0;background:none;font:inherit;font-size:.8rem;padding:5px 8px;border-radius:8px;cursor:pointer;color:var(--ink);white-space:nowrap} #rteImgTb button:hover{background:var(--soft)} #rteImgTb button.on{background:var(--point);color:#fff} #rteImgTb .tb-sep{width:1px;height:16px;background:var(--line-soft);margin:0 2px} body.dark #rteImgTb{background:var(--bg)} /* ── 유튜브 자동 임베드 ── */ .yt-embed{display:block;position:relative;width:100%;max-width:640px;aspect-ratio:16/9;margin:12px auto;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 6px 18px rgba(0,0,0,.14)} .yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .pd-att-loading{font-family:var(--sans);font-size:.85rem;color:var(--muted);padding:8px 0} .pw-modal .rte-area{min-height:200px} @media(max-width:560px){.pw-modal .rte-area{min-height:150px}} /* 게시글 본문에 서식 표시 */ .pd-body b,.pd-body strong{font-weight:700} .pd-body i,.pd-body em{font-style:italic} .pd-body u{text-decoration:underline} .ci-c-msg b,.ci-c-msg strong{font-weight:700} .ci-c-msg i,.ci-c-msg em{font-style:italic} .pf-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .pf-hint{font-family:var(--body);font-size:.74rem;color:var(--muted);flex:1 1 200px} .pf-btn{font-family:var(--disp);font-size:1rem;color:#fff;background:var(--point);border:1.5px solid var(--point);border-radius:12px;padding:9px 22px;cursor:pointer;transition:filter .15s,transform .15s} .pf-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.pf-btn:disabled{opacity:.5} /* 글쓰기: 비밀번호 + 파일첨부 */ .pf-row2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .post-form input.pf-pass:focus{outline:none;border-color:var(--point);background:#fff;box-shadow:none} .pf-attach{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:.85rem;color:var(--ink);background:#fff;border:1px dashed var(--line-soft);border-radius:12px;padding:9px 16px;cursor:pointer;transition:background .15s} .pf-attach:hover{background:#f2effa} .pf-attach .ic{font-size:1.05rem} .pf-prev{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px} /* 글쓰기 버튼 (목록 하단 고정 배치) + 모달 */ .fab-write{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px auto 4px;font-family:var(--disp);font-size:1.05rem;color:#fff;background:var(--point);border:0;border-radius:14px;padding:14px 28px;cursor:pointer;box-shadow:0 3px 12px rgba(107,78,142,.22);transition:transform .18s,filter .18s,box-shadow .18s} .fab-write:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 4px 18px rgba(107,78,142,.3)} .fab-write:active{transform:translateY(0);box-shadow:0 2px 6px rgba(107,78,142,.22)} .fab-write span{font-size:.98rem} .fab-ci{display:none} .fab-ci.show{display:flex} /* ===== 소설·만화 예약 발행 ===== */ .pf-schedule{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:10px;padding:9px 12px;border:1px dashed var(--line-soft);border-radius:9px} .pf-sch-label{font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap} .pf-sch-label input{cursor:pointer} .pf-sch-at{font-family:var(--body);font-size:.82rem;padding:6px 9px;border:1px solid var(--line-soft);border-radius:7px;background:transparent;color:var(--ink)} .pf-sch-at:disabled{opacity:.4} .pf-sch-hint{font-family:var(--body);font-size:.72rem;color:var(--muted)} /* 회차 목록: 예약 상태 표시 (작성자에게만 노출) */ .st-ep-item.scheduled{opacity:.72} .st-ep-sch{font-family:var(--sans);font-size:.64rem;font-weight:700;color:#fff;background:#c98a2e;border-radius:6px;padding:2px 7px;flex:0 0 auto} .st-ep-item.scheduled .st-ep-no{background:#c98a2e} /* ===== JIN 허블 AI 창작도우미 (접이식 · 마름모 · 헤어라인) ===== */ .jinw{margin:38px auto 8px;max-width:640px;position:relative} .jinw::before{content:'';position:absolute;inset:0;border:1px solid var(--ornc);opacity:.55;pointer-events:none;border-radius:2px} .jinw-toggle{display:flex;align-items:center;gap:11px;width:100%;background:var(--bg);border:none;padding:15px 18px;cursor:pointer;text-align:left} .jinw-dia{width:9px;height:9px;border:1.5px solid var(--point);transform:rotate(45deg);flex:0 0 auto;transition:background .2s} .jinw:hover .jinw-dia,.jinw.open .jinw-dia{background:var(--point)} .jinw.open .jinw-dia{animation:jinwPulse 2.4s ease-in-out infinite} @keyframes jinwPulse{0%,100%{box-shadow:0 0 0 3px rgba(107,78,142,.16)}50%{box-shadow:0 0 0 7px rgba(107,78,142,.03)}} @media (prefers-reduced-motion: reduce){.jinw.open .jinw-dia{animation:none}} .jinw-name{font-family:var(--disp);font-size:1rem;color:var(--ink);flex:0 0 auto} .jinw-name em{font-style:normal;font-family:var(--body);font-size:.76rem;color:var(--muted);margin-left:7px} .jinw-hint{font-family:var(--sans);font-size:.68rem;font-weight:700;color:var(--muted);margin-left:auto;letter-spacing:.04em;white-space:nowrap} .jinw-arrow{font-style:normal;color:var(--muted);transition:transform .25s;flex:0 0 auto} .jinw.open .jinw-arrow{transform:rotate(180deg)} .jinw-body{padding:0 18px 16px;border-top:1px solid var(--line-soft)} .jinw-mode{font-family:var(--sans);font-size:.64rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-align:center;padding:9px 0 2px;opacity:.75} .jinw-msgs{max-height:340px;min-height:110px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px 2px;scrollbar-width:thin} .jinw-msgs::-webkit-scrollbar{width:6px}.jinw-msgs::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:99px} .jmw{display:flex;gap:9px;max-width:90%} .jmw-jin{align-self:flex-start} .jmw-user{align-self:flex-end;flex-direction:row-reverse} .jmw-av{width:8px;height:8px;border:1.5px solid var(--point);transform:rotate(45deg);flex:0 0 auto;margin-top:8px;background:var(--point)} .jmw-user .jmw-av{border-color:var(--muted);background:transparent} .jmw-bub{font-family:var(--body);font-size:.88rem;line-height:1.65;color:var(--ink);border:1px solid var(--line-soft);border-radius:2px;padding:9px 13px;background:var(--bg);white-space:pre-wrap;word-break:break-word} .jmw-user .jmw-bub{background:var(--soft)} .jmw-typing .jmw-bub{color:var(--muted);letter-spacing:.2em} .jinw-quick{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:10px} .jinw-quick:empty{display:none} .jqw{font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--muted);background:transparent;border:1px solid var(--line-soft);border-radius:2px;padding:5px 11px;cursor:pointer;transition:border-color .15s,color .15s} .jqw:hover{border-color:var(--point);color:var(--point)} .jinw-form{display:flex;gap:8px;align-items:flex-end} .jinw-in{flex:1;font-family:var(--body);font-size:.88rem;line-height:1.5;padding:10px 12px;border:1px solid var(--line-soft);border-radius:2px;background:transparent;color:var(--ink);resize:none;max-height:110px} .jinw-in:focus{outline:none;border-color:var(--point)} .jinw-send{width:40px;height:40px;flex:0 0 auto;font-size:1.05rem;color:#fff;background:var(--point);border:1.5px solid var(--point);border-radius:2px;cursor:pointer;transition:filter .15s} .jinw-send:hover:not(:disabled){filter:brightness(1.1)} .jinw-send:disabled{opacity:.4;cursor:default} .jinw-gem{margin-top:12px;border-top:1px dashed var(--line-soft);padding-top:12px} .jinw-gem-open{font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--muted);background:transparent;border:1px solid var(--line-soft);border-radius:2px;padding:6px 12px;cursor:pointer} .jinw-gem-open:hover{border-color:var(--point);color:var(--point)} .jinw-gem-form{display:flex;flex-direction:column;gap:7px;margin-top:10px} .jinw-gem-form label{font-family:var(--sans);font-size:.67rem;font-weight:700;color:var(--muted);letter-spacing:.03em;margin-top:3px} .jinw-cfg-hint{font-weight:400;opacity:.7} select.ara-in{cursor:pointer} /* ===== JIN 챗봇 위젯 ===== */ .jin-fab{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;align-items:center;gap:10px;background:var(--point);color:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:9px 18px 9px 11px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.18);transition:transform .18s,box-shadow .18s;font-family:var(--sans);font-weight:700;font-size:.92rem} .jin-fab:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(0,0,0,.22)} .jin-fab .jin-ava{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 auto} .jin-fab .jin-ava svg{width:26px;height:34px;color:var(--point);transform:translateY(3px)} .jin-fab .jin-fab-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left} .jin-fab .jin-fab-txt small{font-weight:500;font-size:.7rem;opacity:.85} .jin-fab.hide{display:none} @media(max-width:560px){.jin-fab .jin-fab-txt{display:none}.jin-fab{padding:9px}} .jin-mask{position:fixed;inset:0;background:rgba(17,17,17,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:135;display:none;align-items:flex-end;justify-content:flex-end;padding:0} .jin-mask.open{display:flex} .jin-panel{width:400px;max-width:100%;height:100%;max-height:640px;margin:auto 22px 22px auto;background:var(--bg);border:1px solid var(--line-soft);border-radius:22px;box-shadow:0 7px 30px rgba(0,0,0,.16);display:flex;flex-direction:column;overflow:hidden;animation:jinUp .28s cubic-bezier(.2,.8,.3,1)} @keyframes jinUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @media(max-width:560px){.jin-panel{margin:0;height:100%;max-height:100%;border-radius:0;width:100%}} .jin-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft);background:linear-gradient(135deg,rgba(107,78,142,.12),transparent)} .jin-head .jin-ava-lg{width:42px;height:42px;border-radius:50%;background:var(--point);display:grid;place-items:center;overflow:hidden;flex:0 0 auto;border:1px solid var(--line-soft)} .jin-head .jin-ava-lg svg{width:32px;height:42px;color:#fff;transform:translateY(4px)} .jin-head .jin-tt{flex:1;min-width:0} .jin-head .jin-name{font-family:var(--disp);font-size:1.1rem;color:var(--title);display:flex;align-items:center;gap:6px} .jin-head .jin-status{font-family:var(--body);font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:5px} .jin-head .jin-dot{width:6px;height:6px;border-radius:50%;background:#43c463;box-shadow:0 0 5px #43c463} .jin-head .jin-x{background:none;border:0;font-size:1.5rem;color:var(--muted);cursor:pointer;line-height:1;padding:2px 4px;border-radius:8px} .jin-head .jin-x:hover{background:var(--soft);color:var(--ink)} .jin-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px} .jin-row{display:flex;gap:9px;align-items:flex-end} .jin-row .jin-ava-sm{width:30px;height:30px;border-radius:50%;background:var(--point);display:grid;place-items:center;overflow:hidden;flex:0 0 auto;border:1px solid var(--line-soft)} .jin-row .jin-ava-sm svg{width:22px;height:30px;color:#fff;transform:translateY(3px)} .jin-bubble{background:var(--soft);border:1px solid var(--line-soft);border-radius:16px;border-bottom-left-radius:5px;padding:12px 15px;font-family:var(--body);font-size:.9rem;color:var(--ink);line-height:1.65;max-width:78%} body.dark .jin-bubble{background:#26242c} .jin-row.me{flex-direction:row-reverse} .jin-row.me .jin-bubble{background:var(--point);color:#fff;border:1px solid var(--line-soft);border-bottom-left-radius:16px;border-bottom-right-radius:5px} .jin-sugs{display:flex;flex-direction:column;gap:8px;margin-top:2px} .jin-sug{text-align:left;font-family:var(--body);font-size:.86rem;color:var(--point);background:var(--bg);border:1.5px solid var(--point);border-radius:13px;padding:10px 13px;cursor:pointer;transition:background .15s,transform .12s} .jin-sug:hover{background:rgba(107,78,142,.08);transform:translateX(2px)} .jin-foot{border-top:1px solid var(--line-soft);padding:12px 14px;display:flex;gap:8px;align-items:center} .jin-input{flex:1;border:1.5px solid var(--line-soft);border-radius:999px;padding:11px 16px;font-family:var(--body);font-size:.9rem;color:var(--ink);background:var(--soft);outline:none} body.dark .jin-input{background:#26242c} .jin-input:focus{border-color:var(--point)} .jin-send{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--point);border:1px solid var(--line-soft);color:#fff;font-size:1.1rem;cursor:pointer;display:grid;place-items:center;transition:filter .15s} .jin-send:hover{filter:brightness(1.1)} .jin-note{font-family:var(--body);font-size:.68rem;color:var(--muted);text-align:center;padding:0 14px 10px} /* 🔴 2026-08-09: z-index 130 이었다 — 모바일 하단 탭바와 '완전히 같은 값'이라 DOM 순서가 뒤인 탭바가 위로 올라왔다. 그 결과 390px 화면에서 등록 버튼(y=786)이 탭바(y=781~844)에 덮여 **휴대폰에서는 글을 등록할 수 없었다**(실측: 클릭이 탭바로 흡수됨. 360·390·430·768px 전부 재현, 1280px는 탭바가 없어 정상). 겹창은 탭바(130)·맨위로(131)·JIN(132)보다 확실히 위여야 한다. ※ #stMask·#ciMask 도 이 클래스를 공유하므로 함께 고쳐진다. */ .pw-mask{position:fixed;inset:0;background:rgba(17,17,17,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:210;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto} .pw-mask.open{display:flex} .pw-modal{background:var(--bg);border:1px solid var(--line-soft);border-radius:22px;box-shadow:0 7px 30px rgba(0,0,0,.14);width:100%;max-width:1080px;margin:auto} .pw-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 0} .pw-modal-head h3{font-family:var(--disp);font-size:1.3rem;color:var(--ink)} .pw-x{background:transparent;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px} .pw-x:hover{color:var(--ink)} .pw-modal .post-form{margin:0;padding:16px 22px 22px;border:0;box-shadow:none} .pw-modal .post-form textarea{min-height:160px} .pw-modal .ci-form textarea{min-height:170px} @media(max-width:560px){.pw-modal .post-form textarea,.pw-modal .ci-form textarea{min-height:120px}} /* AI 글감 도우미 */ .pf-ai{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;border:1px dashed var(--line-soft);border-radius:12px;background:linear-gradient(135deg,rgba(107,78,142,.05),transparent)} .pf-ai-label{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--point);white-space:nowrap} .pf-ai-btn{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--point);background:var(--bg);border:1.5px solid var(--point);border-radius:999px;padding:5px 13px;cursor:pointer;transition:background .15s,color .15s,transform .15s} .pf-ai-btn:hover{background:var(--point);color:#fff;transform:translateY(-1px)} .pf-ai-btn:disabled{opacity:.5;cursor:default;transform:none} .pf-ai-stat{font-family:var(--body);font-size:.78rem;color:var(--muted)} .pf-prev:empty{display:none} .pf-chip{position:relative;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:5px 8px;font-family:var(--body);font-size:.78rem;color:var(--ink);max-width:200px} .pf-chip img{width:34px;height:34px;object-fit:cover;border-radius:6px;display:block} .pf-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pf-chip .x{flex:0 0 auto;border:0;background:none;cursor:pointer;color:#b33;font-size:1rem;line-height:1;padding:0 2px} /* 게시글 상세: 첨부 영역 */ .pd-atts{padding:0 24px 8px;display:flex;flex-direction:column;gap:12px} .pd-atts:empty{display:none} .pd-img{max-width:100%;border-radius:12px;border:1px solid var(--line-soft);display:block} .pd-file{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-size:.88rem;color:var(--point);text-decoration:none;border:2px solid var(--line-soft);border-radius:10px;padding:9px 14px;width:fit-content} .pd-file:hover{border-color:var(--point);background:#faf8fd} .pd-edit,.pd-del{font-family:var(--body);font-size:.9rem;font-weight:600;background:#fff;border:1.5px solid var(--line-soft);color:var(--ink)} body.dark .pd-edit,body.dark .pd-del{background:transparent} .pd-edit:hover{border-color:var(--point);color:var(--point)} .pd-del:hover{border-color:#d24;color:#d24} .list-head{display:grid;grid-template-columns:54px 64px 1fr 96px 64px 52px 52px;gap:8px;padding:11px 14px;background:var(--bar);color:#cfcfcf;border-radius:14px 14px 0 0;font-family:var(--sans);font-size:.74rem;font-weight:600;box-shadow:0 2px 12px rgba(0,0,0,.05)} .post-list{border:1.5px solid var(--line-soft);border-top:0;border-radius:0 0 16px 16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.05)} .prow{display:grid;grid-template-columns:54px 64px 1fr 96px 64px 52px 52px;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line-soft);align-items:center;cursor:pointer;background:#fff;transition:background .12s} .prow:last-child{border-bottom:0} .prow:hover{background:var(--soft)} .prow .c{font-family:var(--sans);font-size:.8rem;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums} .prow .ptag{font-family:var(--body);font-size:.74rem;color:var(--point);text-align:center;font-weight:600} .prow .ptitle{font-family:var(--body);font-size:.92rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px;min-width:0} .prow .ptitle .pthumb{flex:0 0 auto;width:34px;height:34px;border-radius:7px;object-fit:cover;border:1.5px solid var(--line-soft);background:var(--soft)} .prow .ptitle>*:not(.pthumb){overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prow .ptitle .reply{color:var(--point);font-weight:700;margin-left:6px;font-size:.82rem} .prow .pnick{font-family:var(--body);font-size:.8rem;color:var(--soft-ink);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prow.hot .ptitle{font-weight:700} .prow.hot .ptag{color:#d24} @media(max-width:640px){ /* 모바일: 표 대신 카드형 2줄 레이아웃 */ .list-head{display:none} .post-list{border-radius:16px} .prow{ display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"title title title" "tag meta rec"; gap:8px 8px; padding:15px 16px; align-items:center; border-bottom:1px solid var(--line-soft); } .prow .ptitle{ grid-area:title; white-space:normal; font-size:1rem; line-height:1.4; font-weight:600; } .prow .ptag{ grid-area:tag; text-align:left; font-size:.72rem; background:var(--soft); padding:3px 10px; border-radius:999px; justify-self:start; font-weight:600; } .prow .pnick{ grid-area:meta; text-align:left; font-size:.78rem; color:var(--muted); align-self:center; } /* 닉네임 뒤에 조회/날짜를 메타로 합쳐 보여주기 */ .prow .pnick::after{content:attr(data-meta);color:var(--muted)} .prow .c:not(.prow-rec),.prow .pdate{display:none} .prow .prow-rec{ grid-area:rec; text-align:right; font-size:.85rem; font-weight:700; color:var(--point); font-variant-numeric:tabular-nums; } .prow .prow-rec::before{content:"♥ ";font-size:.78rem} } /* post detail modal */ /* 🔴 2026-08-09: z-index 75 → 205. 탭바(130)보다 낮아 태블릿 폭(768px)에서 상세 창의 '닫기' 버튼이 탭바에 가려 눌리지 않았다. */ .pd-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:205;display:none;align-items:flex-start;justify-content:center;padding:40px 16px 56px;overflow-y:auto} .pd-mask.open{display:flex} .pd{background:#fff;border:1px solid var(--line-soft);border-radius:22px;max-width:1080px;width:100%;margin:0 auto;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.3)} .pd-head{padding:20px 24px;border-bottom:1px solid var(--line-soft)} .pd-head .pdt{font-family:var(--disp);font-size:1.35rem;color:var(--ink);line-height:1.35} .pd-head .pdm{font-family:var(--body);font-size:.8rem;color:var(--muted);margin-top:8px;display:flex;gap:14px;flex-wrap:wrap} .pd-body{padding:22px 24px;font-family:var(--body);font-size:1rem;line-height:1.85;color:var(--ink);white-space:pre-wrap;word-break:break-word;min-height:40px} .pd-foot{padding:16px 24px 22px;margin-top:6px;border-top:1.5px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between} /* ===== 댓글 ===== */ .pd-comments{padding:18px 24px 4px;border-top:1.5px solid var(--line-soft)} /* 댓글이 없을 때: 빈 안내문과 여백을 크게 줄이고 입력창도 한 줄로 접어, 본문 대비 아래가 늘어져 보이지 않게 */ .pd-comments.is-empty{padding:12px 24px 4px} .pd-comments.is-empty .pdc-head{margin-bottom:8px;font-size:.95rem} .pd-comments.is-empty .pdc-list{margin-bottom:8px} .pd-comments.is-empty .pdc-empty{display:none} /* 별도 안내문 숨김 (입력창 placeholder가 안내 역할) */ .pd-comments.is-empty .pdc-form{margin-bottom:6px} .pd-comments.is-empty .pdc-body{min-height:60px} /* 2026-08-10: 0이면 좁은 화면에서 placeholder 둘째 줄이 잘렸다 */ .pdc-head{font-family:var(--disp);font-size:1.05rem;color:var(--ink);margin-bottom:14px} .pdc-head #pdcCount{color:var(--point)} .pdc-list{display:flex;flex-direction:column;gap:14px;margin-bottom:20px} .pdc-empty{font-family:var(--body);font-size:.9rem;color:var(--muted);text-align:center;padding:22px 0} /* 댓글 아이템: 원형 아바타 + 말풍선 */ .pdc-item{display:flex;gap:11px;align-items:flex-start;animation:pdcIn .3s ease} @keyframes pdcIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.pdc-item{animation:none}} .pdc-ava{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;font-size:.95rem;color:#fff;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.12);user-select:none} .pdc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .pdc-bubble{background:var(--soft);border:1px solid var(--line-soft);border-radius:4px 16px 16px 16px;padding:10px 14px} body.dark .pdc-bubble{background:rgba(255,255,255,.04)} .pdc-item.is-admin .pdc-bubble{background:linear-gradient(135deg,rgba(107,78,142,.1),rgba(107,78,142,.03));border-color:rgba(107,78,142,.3)} .pdc-top{display:flex;align-items:center;gap:7px;margin-bottom:3px} .pdc-nickname{font-family:var(--sans);font-weight:700;font-size:.88rem;color:var(--ink)} .pdc-badge{font-family:var(--sans);font-size:.64rem;font-weight:700;color:#fff;background:var(--point);border-radius:999px;padding:2px 8px;letter-spacing:.02em} .pdc-time{font-family:var(--body);font-size:.72rem;color:var(--muted);margin-left:auto;white-space:nowrap} .pdc-del-btn{background:transparent;border:0;color:var(--muted);font-size:.74rem;cursor:pointer;padding:2px 7px;border-radius:999px;transition:color .15s,background .15s;opacity:.6} /* ═ 소통기능 고도화 (2026-08-10): 대댓글 · 답글배너 · 카운터 · 소프트삭제 · DM 액션 ═ */ .pdc-reply-btn{background:transparent;border:0;color:var(--muted);font-size:.74rem;cursor:pointer;padding:2px 7px;border-radius:999px;transition:color .15s,background .15s;opacity:.6} .pdc-item:hover .pdc-reply-btn{opacity:1} .pdc-reply-btn:hover{color:var(--point);background:rgba(107,78,142,.1)} .pdc-item.pdc-reply{margin-left:30px;position:relative} .pdc-item.pdc-reply::before{content:'';position:absolute;left:-16px;top:0;bottom:50%;width:12px;border-left:2px solid var(--line-soft);border-bottom:2px solid var(--line-soft);border-radius:0 0 0 8px} @media(max-width:560px){ .pdc-item.pdc-reply{margin-left:22px} .pdc-item.pdc-reply::before{left:-13px;width:9px} } .pdc-item.is-deleted .pdc-text{color:var(--muted);font-style:italic} .pdc-item.is-deleted .pdc-nickname{opacity:.55} .pdc-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:0} .pdc-replying{display:none;align-items:center;gap:6px;font-family:var(--sans);font-size:.76rem;font-weight:700;color:var(--point);background:rgba(107,78,142,.08);border-radius:999px;padding:3px 6px 3px 11px} .pdc-replying.on{display:inline-flex} .pdc-replying .x{background:transparent;border:0;color:inherit;cursor:pointer;font-size:.85rem;padding:0 4px;line-height:1} .pdc-count{margin-left:auto;font-family:var(--sans);font-size:.72rem;color:var(--muted);opacity:0;transition:opacity .15s} .pdc-count.on{opacity:.85} .pdc-count.warn{color:#c0392b;opacity:1;font-weight:700} .pdc-like-btn{background:transparent;border:0;color:var(--muted);font-size:.74rem;cursor:pointer;padding:2px 7px;border-radius:999px;transition:color .15s,background .15s;opacity:.6;font-family:var(--sans);font-weight:700;white-space:nowrap} .pdc-item:hover .pdc-like-btn{opacity:1} .pdc-like-btn:hover{color:#e2536a;background:rgba(226,83,106,.1)} .pdc-like-btn.on{color:#e2536a;opacity:1} .pdc-best{display:inline-flex;align-items:center;background:linear-gradient(135deg,#f4b942,#e2892b);color:#fff;font-family:var(--sans);font-size:.62rem;font-weight:800;letter-spacing:.04em;border-radius:6px;padding:2px 6px;line-height:1} .pdc-item.is-best .pdc-bubble{border:1.5px solid rgba(226,137,43,.45);background:rgba(244,185,66,.06)} body.dark .pdc-item.is-best .pdc-bubble{background:rgba(244,185,66,.09)} .dm-head-act{margin-left:auto;display:inline-flex;gap:4px} .dm-head-act button{background:transparent;border:1px solid var(--line-soft);color:var(--muted);font-size:.72rem;font-family:var(--sans);font-weight:700;cursor:pointer;padding:4px 10px;border-radius:999px;transition:color .15s,border-color .15s} .dm-head-act button:hover{color:var(--point);border-color:var(--point)} .dm-count{position:absolute;right:66px;bottom:14px;font-family:var(--sans);font-size:.7rem;color:var(--muted);pointer-events:none;display:none} .dm-count.on{display:block} .dm-count.warn{color:#c0392b;font-weight:700} .pdc-item:hover .pdc-del-btn{opacity:1} .pdc-del-btn:hover{color:#e2536a;background:rgba(226,83,106,.1)} .pdc-text{font-family:var(--body);font-size:.92rem;line-height:1.62;color:var(--ink);white-space:pre-wrap;word-break:break-word} /* 입력 폼: 아바타 힌트 + 부드러운 필드 */ .pdc-form{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;padding:14px;background:var(--soft);border:1px solid var(--line-soft);border-radius:16px} body.dark .pdc-form{background:rgba(255,255,255,.03)} .pdc-form:focus-within{border-color:var(--point);box-shadow:0 0 0 3px rgba(107,78,142,.08)} .pdc-nick{font-family:var(--body);font-size:.86rem;padding:9px 13px;border:1px solid var(--line-soft);border-radius:999px;background:var(--bg);color:var(--ink);max-width:180px} .pdc-nick:focus{outline:none;border-color:var(--point)} .pdc-input-row{display:flex;gap:9px;align-items:flex-end} .pdc-body{flex:1;font-family:var(--body);font-size:.92rem;padding:11px 14px;border:1px solid var(--line-soft);border-radius:16px;background:var(--bg);color:var(--ink);resize:none;line-height:1.55;min-height:60px;max-height:150px} .pdc-body:focus{outline:none;border-color:var(--point)} .pdc-submit{flex:0 0 auto;font-family:var(--sans);font-weight:700;font-size:.88rem;color:#fff;background:var(--point);border:0;border-radius:999px;padding:0 22px;height:44px;cursor:pointer;transition:filter .15s,transform .15s;box-shadow:0 3px 10px rgba(107,78,142,.25)} .pdc-submit:hover{filter:brightness(1.08);transform:translateY(-1px)} .pdc-submit:active{transform:translateY(0)} .pdc-submit:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none} .pd-comments.is-empty .pdc-form{background:var(--soft)} .pdf-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center} /* 게시글 하단 버튼 공통: 높이·정렬 통일 */ .pd-foot button{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:38px;padding:0 17px;border-radius:999px;line-height:1;cursor:pointer;white-space:nowrap;box-sizing:border-box;transition:background .15s,color .15s,border-color .15s} .pd-rec{font-family:var(--disp);font-size:.92rem;color:var(--point);background:#fff;border:1.5px solid var(--point)} .pd-rec:hover{background:var(--point);color:#fff} .pd-unrec{font-family:var(--disp);font-size:.92rem;color:#888;background:#fff;border:2px solid #bbb} .pd-unrec:hover{background:#888;color:#fff;border-color:#888} body.dark .pd-rec,body.dark .pd-unrec{background:transparent} /* 공유 버튼 + 드롭다운 */ .pd-share-wrap{position:relative;display:inline-flex} .pd-share{font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line-soft)} .pd-share:hover{border-color:var(--point);color:var(--point)} body.dark .pd-share{background:transparent} .pd-share-menu{position:absolute;bottom:calc(100% + 8px);left:0;min-width:170px;background:var(--bg);border:1.5px solid var(--line-soft);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.16);padding:6px;display:none;flex-direction:column;gap:2px;z-index:5} .pd-share-menu.open{display:flex} .pd-share-menu button{display:flex;align-items:center;gap:10px;width:100%;height:auto;text-align:left;justify-content:flex-start;font-family:var(--body);font-size:.92rem;color:var(--ink);background:transparent;border:0;border-radius:9px;padding:9px 12px;cursor:pointer;transition:background .12s} .pd-share-menu button:hover{background:var(--soft)} .pd-share-menu .psm-i{font-size:1.05rem;width:1.3em;text-align:center;flex:0 0 auto} @media(max-width:560px){.pd-share-menu{left:auto;right:0} .pd-foot{justify-content:center} .pdf-group{justify-content:center;width:100%} } /* 회원 등급 뱃지 */ .tier-badge{display:inline-flex;align-items:center;gap:3px;font-family:var(--sans);font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.02em;vertical-align:middle;white-space:nowrap} .tier-bronze{background:linear-gradient(135deg,#b08d57,#8a6d3b);color:#fff} .tier-silver{background:linear-gradient(135deg,#c8ccd0,#9aa0a6);color:#33373b} .tier-gold{background:linear-gradient(135deg,#f2c84b,#e0a92e);color:#5a4300} .tier-platinum{background:linear-gradient(135deg,#7fe3d4,#46b3a3);color:#063b34} .tier-diamond{background:linear-gradient(135deg,#9ec9ff,#6ba8f5);color:#0a2a5e} .tier-master{background:linear-gradient(135deg,#c9a0ff,#9b6bf5);color:#fff;box-shadow:0 0 8px rgba(155,107,245,.5)} .auth-tier{margin:0 2px} .pnick .tier-badge{font-size:.6rem;padding:1px 6px;margin-right:3px} /* 마이페이지 등급 카드 */ .tier-card{border:1.5px solid var(--point);border-radius:14px;padding:16px;margin:14px 0;background:linear-gradient(135deg,rgba(107,78,142,.07),transparent)} .tier-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px} .tier-card-top .tc-tier{font-family:var(--disp);font-size:1.3rem} .tier-bar{height:10px;border-radius:999px;background:var(--line-soft);overflow:hidden;margin:8px 0 6px} .tier-bar i{display:block;height:100%;background:var(--point);border-radius:999px;transition:width .5s} .tier-card .tc-next{font-family:var(--body);font-size:.8rem;color:var(--muted)} .tier-stats{display:flex;gap:18px;font-family:var(--body);font-size:.86rem;color:var(--ink);margin-top:8px} .tier-stats b{color:var(--point)} /* AI 감정 태그 + 요약 */ .ptitle .pmood{margin-right:5px;font-size:1.02em} .ptitle .psum{display:block;font-family:var(--body);font-size:.76rem;color:var(--muted);margin-top:2px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-summary{font-family:var(--body);font-size:.88rem;color:var(--point);background:var(--soft);border-left:3px solid var(--point);border-radius:0 10px 10px 0;padding:9px 13px;margin-bottom:14px;line-height:1.5} /* 이모지 반응 */ .pd-reacts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px} #pdReacts{justify-content:center} /* 게시글 이모지 반응은 가운데 정렬 */ .ptitle .plink{color:inherit;text-decoration:none} .pd-react{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.92rem;background:var(--soft);border:1.5px solid var(--line-soft);border-radius:999px;padding:6px 13px;cursor:pointer;transition:transform .14s,border-color .15s,background .15s;user-select:none} .pd-react:hover{transform:translateY(-2px);border-color:var(--point)} .pd-react:active{transform:scale(.92)} .pd-react .pr-emo{font-size:1.05rem;line-height:1} .pd-react .pr-n{font-weight:700;color:var(--muted);min-width:8px} .pd-react.on{background:#f6f2fb;border-color:var(--point)} body.dark .pd-react.on{background:rgba(183,156,255,.14)} .pd-react.on .pr-n{color:var(--point)} .pd-react.pop{animation:prPop .35s ease} @keyframes prPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}} .pd-close{font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--muted);background:#fff;border:1.5px solid var(--line-soft)} body.dark .pd-close{background:transparent} .pd-close:hover{border-color:var(--point);color:var(--point)} .pd-close:hover{color:var(--ink)} /* ============ 디자인&출판: 갈림길 선택 ============ */ .crossroad{perspective:1100px;margin-top:6px} .cr-stage{position:relative;height:440px;display:flex;border-radius:22px;overflow:hidden;background:#0f1424;transform-style:preserve-3d} @media(max-width:600px){.cr-stage{height:380px}} .path{position:relative;flex:1;border:0;cursor:pointer;padding:0;overflow:hidden;background:none;transition:flex .5s cubic-bezier(.6,.05,.3,1)} .path-floor{position:absolute;left:0;right:0;bottom:0;height:42%;transform-origin:bottom center} .path-wall{position:absolute;left:0;right:0;top:0;height:60%;display:flex;align-items:center;justify-content:center} /* left = design : blue wall, lime floor (업로드 이미지 톤) */ .path-left .path-wall{background:linear-gradient(135deg,#15448f,#0c2a5e)} .path-left .path-floor{background:linear-gradient(180deg,#a6e22e,#cde84a);transform:perspective(500px) rotateX(60deg) scaleY(1.4)} .path-left{border-right:2px solid rgba(255,255,255,.08)} /* right = publish : purple wall, warm floor */ .path-right .path-wall{background:linear-gradient(135deg,#5b3f86,#33245a)} .path-right .path-floor{background:linear-gradient(180deg,#e8b84b,#f0cf6a);transform:perspective(500px) rotateX(60deg) scaleY(1.4)} .path-label{position:relative;z-index:2;text-align:center;color:#fff;transition:transform .4s,opacity .3s;transform:translateZ(0)} .pl-en{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.3em;opacity:.7} .pl-ko{display:block;font-family:var(--disp);font-size:1.7rem;margin:6px 0 4px} .pl-desc{display:block;font-family:var(--body);font-size:.82rem;opacity:.82} /* hover: widen chosen path, brighten, dim other */ .cr-stage:hover .path{flex:.8} .cr-stage .path:hover{flex:1.5} .path:hover .path-label{transform:scale(1.12)} .path:hover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.18),transparent 60%);z-index:1;pointer-events:none} .cr-stage:hover .path:not(:hover){filter:brightness(.62) saturate(.8)} /* arrow cue on hover */ .path::before{content:"→";position:absolute;bottom:18px;left:50%;transform:translateX(-50%) translateY(10px);font-size:1.6rem;color:#fff;opacity:0;transition:opacity .3s,transform .3s;z-index:3} .path-left::before{content:"←"} .path:hover::before{opacity:.9;transform:translateX(-50%) translateY(0)} /* All joints overlap, and every moving part lives inside the same figure. */ .cr-person{position:absolute;left:var(--guide-x,50%);bottom:13%;transform:translateX(-50%);width:86px;z-index:5;color:#fff;transition:left .55s cubic-bezier(.22,1,.36,1),opacity .5s;pointer-events:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.25)) drop-shadow(0 0 3px rgba(222,244,255,.2))} .cr-person svg{width:100%;height:auto;display:block;overflow:visible} .cr-person .gp-figure{transform-box:view-box;transform-origin:var(--pivot-x,60px) 161px;transform:translateY(var(--lift,0px)) rotate(var(--lean,0deg));transition:transform .55s cubic-bezier(.22,1.15,.36,1)} .cr-person .gp-hair{transform-box:view-box;transform-origin:60px 30px;transform:skewX(var(--hair-sway,0deg));transition:transform .75s cubic-bezier(.22,1.18,.36,1)} .cr-person .gp-hair-tip{transform-box:view-box;transform-origin:60px 30px} .cr-stage.reaching .gp-hair-tip{animation:gpHairFlow 2.2s ease-in-out infinite} @keyframes gpHairFlow{0%,100%{transform:rotate(0deg) skewX(0deg)}25%{transform:rotate(1.8deg) skewX(.7deg)}75%{transform:rotate(-1.4deg) skewX(-.6deg)}} .cr-person .gp-arm{transform-box:view-box;transition:transform .5s cubic-bezier(.22,1,.36,1)} .cr-person .gp-arm-l{transform-origin:46px 67px;transform:rotate(var(--armL,0deg))} .cr-person .gp-arm-r{transform-origin:74px 67px;transform:rotate(var(--armR,0deg))} .cr-person .gp-leg{transform-box:view-box;transition:transform .55s cubic-bezier(.22,1.15,.36,1)} .cr-person .gp-leg-l{transform-origin:53px 117px;transform:rotate(var(--legL,0deg))} .cr-person .gp-leg-r{transform-origin:67px 117px;transform:rotate(var(--legR,0deg))} .cr-person .gp-shadow{transform-box:fill-box;transform-origin:center;transform:scaleX(var(--shadow-scale,1));transition:transform .5s ease} .cr-stage.reaching .cr-person,.cr-stage.go-left .cr-person,.cr-stage.go-right .cr-person{filter:drop-shadow(0 2px 5px rgba(0,0,0,.2)) drop-shadow(0 0 3px rgba(246,253,255,.8)) drop-shadow(0 0 9px rgba(145,218,255,.55))} .cr-stage.go-left .gp-leg-r{transform:rotate(-46deg)} .cr-stage.go-right .gp-leg-l{transform:rotate(46deg)} .cr-stage .path:focus-visible{outline:3px solid #fff;outline-offset:-5px;z-index:2} @media(max-width:600px){.cr-person{width:80px}} .cr-hint{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:6;font-family:var(--body);font-size:.82rem;color:rgba(255,255,255,.85);background:rgba(0,0,0,.3);padding:5px 14px;border-radius:999px;transition:opacity .3s;pointer-events:none} .cr-stage:hover .cr-hint{opacity:0} /* walk-in animation when chosen — 가리키며 그쪽으로 뛰어 들어감 */ .cr-stage.go-left .cr-person{animation:walkLeft .85s cubic-bezier(.5,0,.4,1) forwards} .cr-stage.go-right .cr-person{animation:walkRight .85s cubic-bezier(.5,0,.4,1) forwards} .cr-stage.go-left .gp-arm-l{transform:rotate(118deg)} .cr-stage.go-right .gp-arm-r{transform:rotate(-118deg)} .cr-stage.go-left .gp-figure,.cr-stage.go-right .gp-figure{animation-play-state:paused} .cr-stage.go-left .path-left, .cr-stage.go-right .path-right{animation:zoomPath .85s forwards} .cr-stage.go-left .path-right, .cr-stage.go-right .path-left{animation:fadeAway .6s forwards} @keyframes walkLeft{0%{}60%{transform:translateX(-50%) rotate(-13deg) translateY(-4px)}100%{left:16%;transform:translateX(-50%) scale(.42) rotate(-8deg);opacity:0}} @keyframes walkRight{0%{}60%{transform:translateX(-50%) rotate(13deg) translateY(-4px)}100%{left:84%;transform:translateX(-50%) scale(.42) rotate(8deg);opacity:0}} @keyframes zoomPath{to{flex:6;filter:brightness(1.15)}} @keyframes fadeAway{to{flex:0;opacity:0}} @media(prefers-reduced-motion:reduce){ .cr-person,.cr-person .gp-figure,.cr-person .gp-arm,.cr-person .gp-hair,.cr-person .gp-leg,.cr-person .gp-shadow,.cr-stage.reaching .gp-hair-tip{animation:none;transition:none} .cr-person .gp-leg{transform:none!important} .cr-person .gp-figure{transform:none} .cr-stage.go-left .cr-person,.cr-stage.go-right .cr-person, .cr-stage.go-left .path-left,.cr-stage.go-right .path-right, .cr-stage.go-left .path-right,.cr-stage.go-right .path-left{animation:none} } /* service detail */ .svc-detail{animation:fade .4s ease} /* ===== AI LAB: 카테고리 허브 + 일지 ===== */ .ai-hub{animation:fade .4s ease} .ai-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px} .ai-cat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border:1px solid var(--line-soft);border-radius:18px;background:#fff;padding:20px 20px 18px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.08);transition:transform .18s,box-shadow .18s;border-left:7px solid var(--ac,#6b4e8e)} .ai-cat:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.13)} .ai-cat .ai-em{font-size:1.8rem;line-height:1} .ai-cat .ai-ct{font-family:var(--disp);font-size:1.18rem;color:var(--ink)} .ai-cat .ai-cd{font-family:var(--body);font-size:.82rem;color:var(--muted);line-height:1.5} .ai-hub-note{font-family:var(--body);font-size:.8rem;color:var(--muted);margin-top:18px} /* ===== AI 집단지성 자유 게시판 ===== */ .ci-board{position:relative;margin-top:30px;border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#f7f5fb 0%,#fbfbfd 100%);box-shadow:0 4px 15px rgba(0,0,0,.08)} .ci-bg{position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;opacity:.5;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)} .ci-hands{width:100%;height:100%;display:block} .ci-hands .person{transform-box:fill-box;transform-origin:50% 100%;animation:ciSway 6s ease-in-out infinite} @keyframes ciSway{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-3px) rotate(1.2deg)}} .ci-inner{position:relative;z-index:1;padding:30px 30px 32px} .ci-head{margin-bottom:20px} .ci-kicker{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--point)} .ci-head h3{font-family:var(--disp);font-size:1.5rem;color:var(--ink);margin:6px 0 8px} .ci-head p{font-family:var(--body);font-size:.92rem;color:var(--muted);line-height:1.65;max-width:620px} .ci-form{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid var(--line-soft);border-radius:16px;padding:16px 18px;margin-bottom:22px} .ci-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap} .ci-form input,.ci-form textarea{font-family:var(--body);font-size:.9rem;color:var(--ink);background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:10px 14px} .ci-form input:focus,.ci-form textarea:focus{outline:none;box-shadow:0 2px 6px rgba(0,0,0,.1)} .ci-row #ciNick{flex:1 1 160px} .ci-row #ciTitle{flex:2 1 240px} /* 집단지성 목록형 (덕질게시판과 같은 진입 구조) */ .ci-list.as-list{display:flex;flex-direction:column;gap:10px} .ci-lrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line-soft);border-radius:14px;padding:12px 16px;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s,box-shadow .15s} .ci-lrow:hover{border-color:var(--point);transform:translateY(-1px);box-shadow:0 6px 16px rgba(107,78,142,.10)} body.dark .ci-lrow{background:var(--soft)} .ci-lthumb{width:46px;height:46px;border-radius:9px;object-fit:cover;flex-shrink:0} .ci-lmain{flex:1;min-width:0} .ci-ltitle{font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ci-ltitle .ci-lmood{margin-right:5px} .ci-lmeta{font-family:var(--body);font-size:.76rem;color:var(--muted);margin-top:3px;display:flex;gap:9px;align-items:center} .ci-back{display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--line-soft);border-radius:999px;padding:7px 15px;font-family:var(--sans);font-size:.83rem;font-weight:700;color:var(--muted);cursor:pointer;margin-bottom:13px} .ci-back:hover{border-color:var(--point);color:var(--point)} .ci-form input.ci-pass{flex:0 0 auto;width:120px;letter-spacing:.18em;text-align:center;font-size:.82rem;padding:8px 10px;border:1.5px solid var(--line-soft);border-radius:10px;background:var(--soft);box-shadow:none} .ci-form input.ci-pass:focus{outline:none;border-color:var(--point);background:#fff;box-shadow:none} .ci-form textarea{width:100%;min-height:72px;resize:vertical;margin-bottom:10px} .ci-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .ci-attach{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:.84rem;color:var(--ink);background:#fff;border:1px dashed var(--line-soft);border-radius:12px;padding:8px 14px;cursor:pointer;transition:background .15s} .ci-attach:hover{background:#f2effa} .ci-hint{font-family:var(--body);font-size:.73rem;color:var(--muted);flex:1 1 180px} .ci-btn{font-family:var(--disp);font-size:1rem;color:#fff;background:var(--point);border:1.5px solid var(--point);border-radius:12px;padding:9px 24px;cursor:pointer;transition:filter .15s,transform .15s} .ci-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.ci-btn:disabled{opacity:.5} .ci-prev{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .ci-prev:empty{display:none} .ci-chip{position:relative;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:4px 7px;font-family:var(--body);font-size:.76rem} .ci-chip img{width:32px;height:32px;object-fit:cover;border-radius:6px;display:block} .ci-chip .x{border:0;background:none;cursor:pointer;color:#b33;font-size:1rem;line-height:1;padding:0 2px} .ci-list{display:flex;flex-direction:column;gap:14px} .ci-empty{font-family:var(--body);font-size:.92rem;color:var(--muted);text-align:center;padding:26px 10px} .ci-card{background:rgba(255,255,255,.92);border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px;box-shadow:0 2px 9px rgba(0,0,0,.06)} .ci-c-head{display:flex;align-items:center;gap:10px;margin-bottom:7px} .ci-ava{width:30px;height:30px;border-radius:50%;background:var(--point);color:#fff;font-family:var(--disp);font-size:.95rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .ci-c-nick{font-family:var(--sans);font-size:.9rem;font-weight:700;color:var(--ink)} .ci-c-date{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums} .ci-c-msg{font-family:var(--body);font-size:.94rem;color:var(--ink);line-height:1.7;white-space:pre-wrap;word-break:break-word} .ci-c-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .ci-c-imgs img{max-width:170px;max-height:170px;border-radius:10px;border:1px solid var(--line-soft);cursor:pointer} .ci-c-foot{display:flex;gap:8px;margin-top:10px} .ci-c-edit,.ci-c-del{font-family:var(--body);font-size:.78rem;background:#fff;border:1.5px solid var(--line-soft);border-radius:999px;padding:5px 13px;cursor:pointer;color:var(--muted);transition:border-color .15s,color .15s} .ci-c-edit:hover{border-color:var(--point);color:var(--point)} .ci-c-del:hover{border-color:#d24;color:#d24} /* 집단지성 댓글 (덕질 댓글 pdc-* 컴포넌트 재사용) */ .ci-comments{margin-top:14px;background:rgba(255,255,255,.92);border:1px solid var(--line-soft);border-radius:14px;padding:16px 16px 6px;box-shadow:0 2px 9px rgba(0,0,0,.06)} body.dark .ci-comments{background:rgba(255,255,255,.04)} .ci-comments .pdc-head{margin-bottom:12px} .ci-comments.is-empty .pdc-empty{display:none} .ci-comments.is-empty .pdc-list{margin-bottom:8px} .ci-comments.is-empty .pdc-body{min-height:0} /* 집단지성 AI 태그·요약·반응 */ .ci-c-nick .ci-mood{margin-right:5px} .ci-summary{font-family:var(--body);font-size:.84rem;color:var(--point);background:var(--soft);border-left:3px solid var(--point);border-radius:0 9px 9px 0;padding:7px 11px;margin:8px 0;line-height:1.5} .ci-reacts{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .ci-react{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:.85rem;background:var(--soft);border:1.5px solid var(--line-soft);border-radius:999px;padding:5px 11px;cursor:pointer;transition:transform .14s,border-color .15s,background .15s} .ci-react:hover{transform:translateY(-2px);border-color:var(--point)} .ci-react:active{transform:scale(.92)} .ci-react b{color:var(--muted);font-weight:700;min-width:7px} .ci-react.on{background:#f6f2fb;border-color:var(--point)} body.dark .ci-react.on{background:rgba(183,156,255,.14)} .ci-react.on b{color:var(--point)} @media(max-width:560px){.ci-inner{padding:22px 18px 24px}.ci-form input.ci-pass{width:110px}} .ai-journal{animation:fade .4s ease} .aj-hero{border-radius:20px;padding:28px 30px;color:#fff;margin-bottom:22px;background:linear-gradient(135deg,var(--ac,#6b4e8e),rgba(0,0,0,.55))} .aj-hero .aj-tag{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;opacity:.85} .aj-hero h3{font-family:var(--disp);font-size:1.7rem;margin:6px 0 8px} .aj-hero p{font-family:var(--body);font-size:.92rem;line-height:1.6;opacity:.92} .aj-form{border:1px solid var(--line-soft);border-radius:18px;background:var(--soft);padding:18px 20px;margin-bottom:24px} .ajf-row{display:grid;grid-template-columns:150px 1fr;gap:10px;margin-bottom:10px} @media(max-width:560px){.ajf-row{grid-template-columns:1fr 1fr;grid-template-areas:"date date" "title title"}.ajf-row .ajf-date{grid-area:date}.ajf-row #ajTitleIn{grid-area:title}} .aj-form input,.aj-form textarea{font-family:var(--body);font-size:.9rem;color:var(--ink);background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:10px 14px;width:100%;margin-bottom:10px} .aj-form input:focus,.aj-form textarea:focus{outline:none;box-shadow:0 2px 6px rgba(0,0,0,.1)} .ajf-row input,.ajf-row2 input{margin-bottom:0} .aj-form textarea{min-height:100px;resize:vertical} .ajf-row2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .aj-form input.ajf-pass{flex:0 0 auto;width:120px;letter-spacing:.18em;text-align:center;font-size:.82rem;padding:8px 10px;border:1.5px solid var(--line-soft);border-radius:10px;background:var(--soft);box-shadow:none;margin-bottom:0} .aj-form input.ajf-pass:focus{outline:none;border-color:var(--point);background:#fff;box-shadow:none} .ajf-attach{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:.85rem;color:var(--ink);background:#fff;border:1px dashed var(--line-soft);border-radius:12px;padding:9px 16px;cursor:pointer;transition:background .15s} .ajf-attach:hover{background:#f2effa} .ajf-prev{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px} .ajf-prev:empty{display:none} .ajf-chip{position:relative;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:5px 8px;font-family:var(--body);font-size:.78rem;color:var(--ink);max-width:200px} .ajf-chip img{width:34px;height:34px;object-fit:cover;border-radius:6px;display:block} .ajf-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ajf-chip .x{border:0;background:none;cursor:pointer;color:#b33;font-size:1rem;line-height:1;padding:0 2px} .ajf-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .ajf-hint{font-family:var(--body);font-size:.74rem;color:var(--muted);flex:1 1 200px} .ajf-btn{font-family:var(--disp);font-size:1rem;color:#fff;background:var(--point);border:1.5px solid var(--point);border-radius:12px;padding:9px 22px;cursor:pointer;transition:filter .15s,transform .15s} .ajf-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.ajf-btn:disabled{opacity:.5} /* 일지: 목차 사이드바 + 타임라인 2단 레이아웃 */ .aj-layout{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start} .aj-nav{position:sticky;top:90px;align-self:start;max-height:calc(100vh - 110px);display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:16px;background:var(--soft);box-shadow:0 2px 9px rgba(107,78,142,.1);overflow:hidden} body.dark .aj-nav{background:var(--soft)} .aj-nav-head{flex:0 0 auto;font-family:var(--disp);font-size:.95rem;color:var(--ink);padding:13px 15px;border-bottom:1.5px solid var(--line-soft);display:flex;align-items:center;gap:7px} .aj-nav-count{font-family:var(--sans);font-size:.7rem;font-weight:700;color:#fff;background:var(--ac,#6b4e8e);border-radius:999px;padding:2px 8px;margin-left:auto} .aj-nav-list{list-style:none;margin:0;padding:7px;overflow-y:auto;overflow-x:hidden} .aj-nav-list::-webkit-scrollbar{width:8px} .aj-nav-list::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:99px} .aj-nav-item{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:10px;padding:9px 11px;margin-bottom:2px;cursor:pointer;font-family:var(--body);transition:background .14s,color .14s;border-left:3px solid transparent} .aj-nav-item:hover{background:rgba(107,78,142,.08)} .aj-nav-item.on{background:rgba(107,78,142,.12);border-left-color:var(--ac,#6b4e8e)} .aj-nav-item .ani-date{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;color:var(--point);font-variant-numeric:tabular-nums;margin-bottom:2px} .aj-nav-item .ani-title{display:block;font-size:.84rem;color:var(--ink);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .aj-nav-item.on .ani-title{font-weight:700} .aj-nav-empty{font-family:var(--body);font-size:.82rem;color:var(--muted);padding:14px 11px;line-height:1.5} /* 스크롤 도착 시 잠깐 강조 */ .aj-entry.flash{animation:ajFlash 1.1s ease} @keyframes ajFlash{0%{box-shadow:0 0 0 3px var(--ac,#6b4e8e),0 2px 9px rgba(0,0,0,.07)}100%{box-shadow:0 2px 9px rgba(0,0,0,.07)}} @media(max-width:760px){ .aj-layout{grid-template-columns:1fr;gap:14px} .aj-nav{position:static;max-height:230px;top:auto} } .aj-timeline{position:relative;padding-left:26px} .aj-timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line-soft)} .aj-empty{font-family:var(--body);font-size:.92rem;color:var(--muted);padding:30px 4px} .aj-entry{position:relative;margin-bottom:20px;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:16px 18px;box-shadow:0 2px 9px rgba(0,0,0,.07)} .aj-entry::before{content:"";position:absolute;left:-23px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--ac,#6b4e8e);border:2px solid #fff;box-shadow:0 0 0 2px var(--ac,#6b4e8e)} .aj-e-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px} .aj-e-date{font-family:var(--sans);font-size:.76rem;color:var(--point);font-weight:700;font-variant-numeric:tabular-nums} .aj-e-title{font-family:var(--disp);font-size:1.12rem;color:var(--ink);line-height:1.35} .aj-e-tools{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0} .aj-e-tool{font-family:var(--sans);font-size:.72rem;color:var(--ac,#6b4e8e);background:rgba(107,78,142,.08);border:1px solid var(--line-soft);border-radius:999px;padding:2px 9px} .aj-e-body{font-family:var(--body);font-size:.93rem;color:var(--ink);line-height:1.75;white-space:pre-wrap;word-break:break-word;margin:6px 0} .aj-e-body.aj-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;position:relative} .aj-e-body.aj-clamp.is-html{white-space:normal} .aj-e-more{background:none;border:0;color:var(--point);font-family:var(--sans);font-size:.8rem;font-weight:700;cursor:pointer;padding:3px 0;margin:2px 0 4px;letter-spacing:.02em} .aj-e-more:hover{text-decoration:underline} .aj-e-imgs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .aj-e-imgs img{max-width:160px;max-height:160px;border-radius:10px;border:1px solid var(--line-soft);cursor:pointer} .aj-e-files{display:flex;flex-direction:column;gap:6px;margin:8px 0} .aj-e-file{font-family:var(--body);font-size:.84rem;color:var(--point);text-decoration:none} .aj-e-file:hover{text-decoration:underline} .aj-e-link{display:inline-block;font-family:var(--body);font-size:.84rem;color:var(--point);margin-top:4px;word-break:break-all} .aj-e-foot{display:flex;gap:8px;margin-top:10px} .aj-e-edit,.aj-e-del{font-family:var(--body);font-size:.8rem;background:#fff;border:1.5px solid var(--line-soft);border-radius:999px;padding:5px 13px;cursor:pointer;color:var(--muted);transition:border-color .15s,color .15s} .aj-e-edit:hover{border-color:var(--point);color:var(--point)} .aj-e-del:hover{border-color:#d24;color:#d24} .svc-back{font-family:var(--sans);font-size:.86rem;font-weight:700;color:#fff;background:var(--point);border:0;border-radius:999px;cursor:pointer;padding:9px 18px;margin-bottom:18px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(107,78,142,.28);transition:filter .18s,transform .18s,box-shadow .18s} .svc-back:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 14px rgba(107,78,142,.36)} .svc-back:active{transform:translateY(0)} /* 일지 글쓰기 버튼(운영자) + 안내문 */ .aj-write-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px} .fab-aj{margin:0} .aj-owner-note{font-family:var(--body);font-size:.88rem;color:var(--muted);border:1.5px dashed var(--line-soft);border-radius:14px;padding:14px 18px;line-height:1.6;flex:1 1 100%;text-align:center;margin:0} /* 일지 글쓰기 모달: 폼 카드 느낌을 걷어내고 모달 내부에 자연스럽게 */ .pw-modal .aj-form--modal{border:0;background:transparent;margin-bottom:0;padding:14px 22px 22px} /* 일지 비밀글 */ .ajf-secret{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-size:.86rem;color:var(--muted);cursor:pointer;white-space:nowrap} .ajf-secret input{accent-color:var(--point);width:15px;height:15px;cursor:pointer} .aj-e-secret{display:inline-flex;align-items:center;gap:3px;font-family:var(--body);font-size:.72rem;font-weight:700;color:#fff;background:var(--point);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle} .aj-entry.is-secret{border-style:dashed} @media(max-width:560px){.pw-modal .aj-form--modal{padding:12px 14px 18px}} /* 일지 본문: 서식 있는 HTML 본문 (신규 글) */ .aj-e-body.is-html{white-space:normal} .aj-e-body .rte-inline-img{max-width:min(100%,480px);height:auto;border-radius:10px;border:1px solid var(--line-soft);display:block;margin:8px 0;cursor:zoom-in} /* 첨부 이미지 확대 뷰어 (data: URL도 안전하게 표시) */ .imgv-mask{position:fixed;inset:0;background:rgba(10,10,12,.86);z-index:9600;display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out} .imgv-mask.open{display:flex} .imgv-mask img{max-width:96vw;max-height:92vh;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5)} .svc-hero{border-radius:20px;padding:34px 32px;color:#fff;margin-bottom:24px} .svc-hero-design{background:linear-gradient(135deg,#15448f,#0c2a5e)} .svc-hero-publish{background:linear-gradient(135deg,#5b3f86,#33245a)} .svc-hero-create{background:linear-gradient(135deg,#c2456a,#7a2547)} .svc-hero-perf{background:linear-gradient(135deg,#127d72,#0c4a44)} /* 콘텐츠&마케팅 갈림길 색 (디자인 페이지와 구분) */ .cr-content .path-left .path-wall{background:linear-gradient(135deg,#c2456a,#7a2547)} .cr-content .path-left .path-floor{background:linear-gradient(180deg,#ff9eb6,#ffc1cf);transform:perspective(500px) rotateX(60deg) scaleY(1.4)} .cr-content .path-right .path-wall{background:linear-gradient(135deg,#127d72,#0c4a44)} .cr-content .path-right .path-floor{background:linear-gradient(180deg,#5fe0c8,#9af0df);transform:perspective(500px) rotateX(60deg) scaleY(1.4)} .cr-content .cr-stage{background:#15120f} /* 소설 & 만화 전용 색 대비 (소설=인디고/골드, 만화=주황/청록) */ .cr-story .path-left .path-wall{background:linear-gradient(135deg,#3b3a8f,#1e1d52)} .cr-story .path-left .path-floor{background:linear-gradient(180deg,#f3d27a,#fbe9b0);transform:perspective(500px) rotateX(60deg) scaleY(1.4)} .cr-story .path-right .path-wall{background:linear-gradient(135deg,#d2682a,#8f3d12)} .cr-story .path-right .path-floor{background:linear-gradient(180deg,#ffb27a,#ffd6ac);transform:perspective(500px) rotateX(60deg) scaleY(1.4)} .cr-story .cr-stage{background:#0e1018} .svc-tag{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.26em;opacity:.75} .svc-hero h3{font-family:var(--disp);font-size:2rem;margin:8px 0 8px} .svc-hero p{font-family:var(--body);font-size:1rem;opacity:.92;max-width:560px;line-height:1.8} .svc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px} @media(max-width:760px){.svc-cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:420px){.svc-cards{grid-template-columns:1fr}} .svc-card{border:1px solid var(--line-soft);border-radius:18px;background:#fff;padding:20px 18px;box-shadow:0 3px 12px rgba(0,0,0,.07)} .svc-card .sc-em{font-size:1.5rem;display:block;margin-bottom:10px} .svc-card h4{font-family:var(--disp);font-size:1.1rem;color:var(--ink);margin-bottom:4px} .svc-card p{font-family:var(--body);font-size:.82rem;color:var(--muted);line-height:1.55} /* ============ 포트폴리오 ============ */ .pf-h3{font-family:var(--disp);font-size:1.35rem;color:var(--ink);margin:34px 0 16px} .pf-h3:first-of-type{margin-top:6px} /* 아트워크 캐러셀: 세상의 수정 */ .pf-art-desc{font-family:var(--body);font-size:.95rem;color:var(--muted);line-height:1.7;margin:-6px 0 16px;max-width:720px} .pf-art-desc b{color:var(--ink)} .pf-art-hint{color:var(--point);font-size:.86rem} .pf-carousel{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);box-shadow:0 8px 28px rgba(40,30,60,.18);background:#0c0f14;user-select:none} .pfc-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)} .pfc-slide{flex:0 0 100%;min-width:0} .pfc-slide img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;cursor:zoom-in} .pfc-slide.fit img{object-fit:contain;background:#0c0f14} /* ── 아카이브 연작(등록형) 캐러셀 ───────────────────────────────────── 기본 슬라이드는 16:10로 잘라내기(cover)라, 세로가 긴 그림은 위아래가 잘렸다. 연작은 작품 자체가 목적이므로 자르지 않고 액자 안에 온전히 맞춘다. 슬라이드 높이는 가장 큰 그림에 맞춰지고 나머지는 가운데 정렬된다. */ .ars-fit .pfc-slide{display:grid;place-items:center;background:#0c0f14} .ars-fit .pfc-slide img{width:auto;height:auto;max-width:100%;max-height:min(74vh,680px);aspect-ratio:auto;object-fit:contain} /* 사진 순서 편집 */ .ars-edit-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px} .ars-edit-btn{font-family:var(--body);font-size:.8rem;padding:7px 14px;border-radius:999px;border:1px solid var(--line-soft);background:var(--bg);color:var(--ink);cursor:pointer} .ars-edit-btn:hover{background:var(--soft)} .ars-edit-btn.primary{background:var(--point);border-color:var(--point);color:#fff} .ars-edit-btn[disabled]{opacity:.5;cursor:default} .ars-order{margin-top:12px;padding:14px;border:1px solid var(--line-soft);border-radius:14px;background:var(--soft)} .ars-order-hint{font-family:var(--body);font-size:.8rem;color:var(--muted);margin:0 0 10px} .ars-order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px} .ars-oi{position:relative;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;background:var(--bg)} .ars-oi img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover} .ars-oi .no{position:absolute;top:5px;left:5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:.7rem;display:grid;place-items:center} .ars-oi .ctl{display:flex;gap:2px;padding:5px;justify-content:center;background:var(--bg)} .ars-oi .ctl button{flex:1;border:1px solid var(--line-soft);background:var(--bg);border-radius:6px;font-size:.78rem;padding:4px 0;cursor:pointer;color:var(--ink);min-height:30px} .ars-oi .ctl button:disabled{opacity:.35;cursor:default} .ars-oi .ctl .rm{color:#c0392b} @media(max-width:520px){ .ars-order-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))} } @media(pointer:coarse){ .ars-oi .ctl button{min-height:40px;font-size:.9rem} } /* 손가락으로 누를 크기 확보 */ .pfc-slide.duo{display:flex;align-items:flex-start;background:#0c0f14} .pfc-slide.duo img{width:50%;height:auto;aspect-ratio:8/10;object-fit:contain} .pfc-slide.vb{position:relative} .pfc-slide.vb .vb-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:46px 18px 32px;background:linear-gradient(transparent,rgba(8,9,16,.78));text-align:right;pointer-events:none} .pfc-slide.vb .vb-en{font-family:var(--disp);font-size:1.02rem;letter-spacing:.04em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)} .pfc-slide.vb .vb-ko{font-family:var(--sans);font-size:.78rem;color:rgba(255,255,255,.85)} .pfc-slide.vb .vb-src{font-family:var(--sans);font-size:.6rem;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-top:4px;text-transform:uppercase} .pfc-cap{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:14px;background:rgba(10,10,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;pointer-events:none} .pfc-cap b{font-family:var(--disp);font-size:1.05rem;letter-spacing:.02em} .pfc-cap span{font-family:var(--body);font-size:.76rem;opacity:.85} .pfc-cap em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums} .pfc-sep{opacity:.55;margin:0 3px} /* 실제 작품 수를 반영하는 세그먼트 게이지 — 각 칸이 작품 한 점 (바는 4px, 터치 영역은 22px) */ .pfc-seg{position:absolute;left:50%;transform:translateX(-50%);bottom:7px;display:flex;gap:6px;z-index:2;width:min(58%,340px)} .pfc-seg button{flex:1;height:22px;min-width:0;border:none;background:transparent;cursor:pointer;padding:0;position:relative} .pfc-seg button::before{content:'';position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);border-radius:99px;background:rgba(255,255,255,.28);box-shadow:0 0 0 .5px rgba(10,10,16,.28),0 1px 4px rgba(10,10,16,.35);transition:background .2s,height .2s} .pfc-seg button:hover::before{background:rgba(255,255,255,.55);height:6px} .pfc-seg button:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:1px;border-radius:99px} .pfc-seg button.on::before{background:rgba(255,255,255,.3)} .pfc-seg button.on::after{content:'';position:absolute;left:0;right:0;top:50%;height:4px;border-radius:99px;background:#fff;box-shadow:0 1px 4px rgba(10,10,16,.4);transform-origin:left;transform:translateY(-50%) scaleX(1)} .pfc-seg.play button.on::after{animation:pfcFill 5s linear forwards} @keyframes pfcFill{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}} .pfc-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:none;background:rgba(10,10,16,.5);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:2} .pfc-nav:hover{background:rgba(122,90,248,.85)} /* ===== 추가 연작: 접힌 토글 + 동일 캐러셀 폼 ===== */ .art-series{margin-top:14px;display:flex;flex-direction:column;gap:10px} .ars-item{border:1.5px solid var(--line-soft);border-radius:16px;overflow:hidden;background:var(--bg)} .ars-toggle{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;padding:14px 18px;font-family:var(--disp);font-size:1rem;color:var(--ink)} .ars-toggle:hover{background:var(--soft)} .ars-t-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ars-t-meta{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line-soft);border-radius:999px;padding:3px 10px;white-space:nowrap} .ars-t-arrow{color:var(--muted);transition:transform .25s} .ars-item.open .ars-t-arrow{transform:rotate(180deg)} .ars-body{padding:0 18px 18px} .ars-desc{font-family:var(--body);font-size:.9rem;color:var(--muted);line-height:1.6;margin:2px 0 12px} .ars-state{font-family:var(--body);font-size:.85rem;color:var(--muted);padding:16px 0;text-align:center} .ars-del-row{display:flex;justify-content:flex-end;margin-top:10px} .ars-del{font-family:var(--sans);font-size:.74rem;font-weight:700;background:transparent;border:1px solid var(--line-soft);border-radius:999px;padding:5px 13px;color:var(--muted);cursor:pointer} .ars-del:hover{border-color:#d24;color:#d24} .art-admin{margin-top:12px} .ara-open{font-family:var(--sans);font-size:.82rem;font-weight:700;background:transparent;border:1.5px dashed var(--line-soft);border-radius:12px;padding:11px 16px;width:100%;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s} .ara-open:hover{border-color:var(--point);color:var(--point)} .ara-form{margin-top:10px;border:1.5px solid var(--line-soft);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:9px;background:var(--bg)} .ara-in{font-family:var(--body);font-size:.9rem;padding:10px 12px;border:1.5px solid var(--line-soft);border-radius:10px;background:transparent;color:var(--ink)} .ara-in:focus{outline:none;border-color:var(--point)} .ara-ta{min-height:64px;resize:vertical} .ara-row{display:flex;align-items:center;gap:10px} .ara-file{font-family:var(--sans);font-size:.78rem;font-weight:700;border:1.5px solid var(--line-soft);border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--muted)} .ara-file:hover{border-color:var(--point);color:var(--point)} .ara-count{font-family:var(--body);font-size:.8rem;color:var(--muted)} .ara-count.over{color:#c0392b;font-weight:700} .ara-acts{display:flex;gap:8px;justify-content:flex-end} .ara-btn{font-family:var(--sans);font-size:.8rem;font-weight:700;border:1.5px solid var(--line-soft);border-radius:999px;padding:8px 18px;background:transparent;color:var(--muted);cursor:pointer} .ara-btn:hover{border-color:var(--point);color:var(--point)} .ara-save{background:var(--point);border-color:var(--point);color:#fff} .ara-save:hover{color:#fff;filter:brightness(1.08)} .pfc-prev{left:12px} .pfc-next{right:12px} @media(max-width:600px){ /* 모바일: 캡션이 그림을 가리지 않게 — 이미지 아래 바 형태로 내려앉음 (게이지는 바 안쪽 하단) */ .pfc-cap{position:static;left:auto;bottom:auto;border-radius:0;background:rgba(12,15,20,.97);-webkit-backdrop-filter:none;backdrop-filter:none;padding:10px 14px 32px} .pfc-cap b{font-size:.92rem} .pfc-seg{bottom:8px} .pfc-nav{width:34px;height:34px;font-size:1.3rem;top:38%} } /* ── 덕질 게시판: 새 글 NEW 뱃지 ── */ .board{position:relative} .gnew{position:absolute;top:7px;right:7px;font-family:var(--sans);font-size:.55rem;font-weight:800;letter-spacing:.09em;color:#fff;background:var(--new);border-radius:999px;padding:3px 7px;line-height:1;box-shadow:0 1px 5px rgba(0,0,0,.4);pointer-events:none;z-index:3} .gnew.inline{position:static;top:auto;right:auto;margin-left:8px;padding:2px 7px;font-size:.56rem;vertical-align:2px} /* ── 내장 미니앱 iframe (썸네일 메이커·직업동기 검사) ── */ .emb-frame{display:block;width:100%;height:920px;border:0;border-radius:14px;background:#141210;transition:height .25s ease} .emb-note{font-family:var(--body);font-size:.8rem;color:var(--muted);margin:0 0 10px} .ct-badge.mine{background:var(--mine)} #thumbMakerWrap{margin-top:18px} #thumbMakerToggle+.calc-panel.open{max-height:32000px} #hbJobToggle+.calc-panel.open{max-height:32000px} #hbJobToggle+.calc-panel .emb-frame{background:#f4f2ec} #hbLuckyToggle+.calc-panel.open{max-height:32000px} #hbLuckyToggle+.calc-panel .emb-frame{background:#0d0f14} #hbKatechonToggle+.calc-panel.open{max-height:32000px} #hbKatechonToggle+.calc-panel .emb-frame{background:#070503} /* 2026-08-03: 16 소시오닉스 타로 테이블 — 게임 규약(높이 상한 1900px 보고) */ #hbSocioTarotToggle+.calc-panel.open{max-height:32000px} #hbSocioTarotToggle+.calc-panel .emb-frame{background:#0b0d16} #hbSajuToggle+.calc-panel.open{max-height:48000px} /* iframe 상한 40000px + 여백보다 크게 */ #hbSajuToggle+.calc-panel .emb-frame{background:#ffffff} #hbEnneaToggle+.calc-panel.open{max-height:48000px} #hbSocioToggle+.calc-panel.open{max-height:48000px} #hbGijilToggle+.calc-panel.open{max-height:48000px} /* 문서형 결과 — iframe 상한 40000 + 여유 */ #hbSocioToggle+.calc-panel .emb-frame{background:#ffffff} body.dark #hbSocioToggle+.calc-panel .emb-frame{ box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.45)} /* iframe 상한 40000px + 여백보다 크게 */ #hbEnneaToggle+.calc-panel .emb-frame{background:#ffffff} #hbGsToggle+.calc-panel.open{max-height:4000px} /* 인라인 도트게임 — 기본 1400px 상한에 걸려 패드가 잘릴 수 있음 */ /* 다크모드: 문서형 임베드는 밝은 화면 그대로 두되, 떠 보이지 않게 카드처럼 감싼다 */ body.dark #hbSajuToggle+.calc-panel .emb-frame, body.dark #hbEnneaToggle+.calc-panel .emb-frame, body.dark #hbJobToggle+.calc-panel .emb-frame{ box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.45)} /* ── 앱 공유 바 (각 calc-panel 하단에 JS로 주입) ── */ .app-share-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px dashed var(--line-soft)} /* 공유 버튼 앞 힌트 — 이 버튼이 '이 앱만' 여는 링크임을 알려준다(오해 방지) */ .app-share-hint{font-family:var(--body);font-size:.72rem;color:var(--muted);opacity:.85} @media (max-width:600px){ .app-share-hint{display:none} } /* 복사 완료 상태 — 토스트를 놓쳐도 버튼 자체로 확인 가능 */ .app-share-btn.copied{color:#fff;background:var(--point);border-color:var(--point)} .app-share-btn{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line-soft);border-radius:999px;padding:6px 14px;cursor:pointer;transition:border-color .15s,color .15s} .app-share-btn:hover{border-color:var(--point);color:var(--point)} .app-share-btn:focus-visible{outline:2px solid var(--point);outline-offset:2px} /* 모바일 터치 타깃 44px — 사이트 다른 버튼(46px)과 기준 통일 */ @media (max-width:600px){ .app-share-btn{min-height:44px;padding:10px 18px;font-size:.82rem} } /* ── 도라에몽 주머니: 3줄 초과 시 페이지 넘김 ── */ .pk-pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:14px;font-family:var(--sans);font-size:.8rem;color:var(--muted)} .pk-pager[hidden]{display:none} .pk-pager button{font-family:var(--sans);font-size:.82rem;font-weight:700;border:1px solid var(--line-soft);border-radius:999px;background:var(--bg);color:var(--ink);padding:6px 14px;cursor:pointer;transition:border-color .15s,color .15s} .pk-pager button:hover:not(:disabled){border-color:var(--point);color:var(--point)} .pk-pager button:disabled{opacity:.35;cursor:default} .pk-pager .pk-pg-num{font-variant-numeric:tabular-nums} body.dark .pf-carousel{border-color:rgba(183,156,255,.35)} /* 포트폴리오 프로필 + 명함 (상단 인트로) */ .pf-intro{display:flex;gap:42px;align-items:flex-start;flex-wrap:wrap;margin:18px 0 8px} .pf-intro-left{flex:1 1 300px;min-width:280px} .pf-intro-right{flex:1 1 340px;min-width:300px} .pf-profile{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .pf-avatar{flex:0 0 auto;width:132px;height:132px;border-radius:50%;overflow:hidden;border:3px solid var(--point);box-shadow:0 8px 22px rgba(107,78,142,.22);background:var(--soft)} .pf-avatar img{width:100%;height:100%;object-fit:cover;display:block} .pf-id .pf-name{font-family:var(--disp);font-size:1.65rem;color:var(--ink);letter-spacing:.04em} .pf-id .pf-role{font-family:var(--body);font-size:.94rem;color:var(--muted);margin-top:5px} .pf-id .pf-tagline{font-family:var(--body);font-size:.9rem;color:var(--point);margin-top:10px;line-height:1.55;max-width:340px} /* 링크드인 버튼 (프로필 하단에 통합) */ .pf-linkedin{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:11px 18px;border:2px solid #0a66c2;border-radius:14px;background:#fff;text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s;box-shadow:0 2px 9px rgba(10,102,194,.18)} .pf-linkedin:hover{background:#f3f8fe;transform:translate(-1px,-1px);box-shadow:0 4px 15px rgba(10,102,194,.22)} .pf-linkedin .li-icon{flex:0 0 auto;width:30px;height:30px;border-radius:7px;background:#0a66c2;display:flex;align-items:center;justify-content:center} .pf-linkedin .li-icon svg{width:20px;height:20px} .pf-linkedin .li-body{display:flex;flex-direction:column;line-height:1.3} .pf-linkedin .li-body b{font-family:var(--sans);font-size:.9rem;color:var(--ink);font-weight:700} .pf-linkedin .li-body span{font-family:var(--body);font-size:.74rem;color:var(--muted)} .pf-linkedin .li-go{font-family:var(--sans);font-size:.82rem;color:#0a66c2;font-weight:700;margin-left:4px} /* 명함 */ .pf-card-wrap{margin:0;display:flex;flex-direction:column;gap:18px} .pf-card{display:flex;flex-direction:column} .pf-card img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line-soft);box-shadow:0 10px 26px rgba(0,0,0,.13)} .pf-card-cap{font-family:var(--body);font-size:.78rem;color:var(--muted);margin-top:10px;text-align:center} @media(max-width:760px){.pf-intro{gap:28px}.pf-intro-right{order:2}} @media(max-width:520px){.pf-avatar{width:112px;height:112px}.pf-id .pf-name{font-size:1.42rem}} /* 출간 도서: 한 줄로 작게 */ .pf-intro-left .pf-h3{margin-top:26px} .pf-books{display:flex;gap:14px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch} .pf-book{display:flex;flex-direction:column;width:104px;flex:0 0 104px;text-decoration:none;color:var(--ink);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.07);transition:transform .18s,box-shadow .18s} .pf-book:hover{transform:translateY(-2px);box-shadow:0 5px 21px rgba(0,0,0,.12)} .pf-book-cover{display:block;background:#f0eef2;width:100%;aspect-ratio:126/175;overflow:hidden;border-bottom:1px solid var(--line-soft)} .pf-book-cover img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto} .pf-book-meta{padding:8px 10px;display:flex;flex-direction:column;gap:2px} .pf-book-meta b{font-family:var(--body);font-size:.72rem;font-weight:700;line-height:1.3} .pf-book-meta span{font-family:var(--body);font-size:.63rem;color:var(--muted);line-height:1.3} .pf-book-meta i{font-family:var(--sans);font-size:.6rem;color:var(--point);font-style:normal;font-weight:600;margin-top:1px} /* 수상 */ .pf-awards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:680px){.pf-awards{grid-template-columns:1fr}} .pf-award{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line-soft);border-radius:16px;background:linear-gradient(135deg,#fbf7ff,#f3eefb);padding:18px 18px;box-shadow:0 3px 12px rgba(107,78,142,.12)} .pf-award-yr{font-family:var(--disp);font-size:1.3rem;color:var(--point);flex:0 0 auto;line-height:1} .pf-award-body{display:flex;flex-direction:column;gap:3px} .pf-award-body b{font-family:var(--body);font-size:.9rem;font-weight:700;line-height:1.4} .pf-award-body span{font-family:var(--body);font-size:.82rem;color:var(--muted);line-height:1.4} /* 다크모드: 수상 카드 가독성 — 밝은 그라데이션 배경 대신 어두운 카드 + 밝은 글씨 */ body.dark .pf-award{background:linear-gradient(135deg,#26222e,#1f1b26);border-color:rgba(183,156,255,.4);box-shadow:0 3px 12px rgba(183,156,255,.16)} body.dark .pf-award-body b{color:#ececef} body.dark .pf-award-body span{color:#b9b6c2} /* 타임라인 */ .pf-timeline{position:relative;padding-left:6px} .tl-year{display:grid;grid-template-columns:64px 1fr;gap:18px;padding-bottom:6px} .tl-yr{font-family:var(--disp);font-size:1.5rem;color:var(--title);position:sticky;top:130px;align-self:start;line-height:1} .tl-items{border-left:2px solid var(--line-soft);padding:2px 0 18px 20px;position:relative} .tl-row{position:relative;display:grid;grid-template-columns:58px 1fr;gap:14px;padding:9px 0;align-items:baseline} .tl-row::before{content:"";position:absolute;left:-27px;top:15px;width:10px;height:10px;border-radius:50%;background:#fff;border:1.5px solid var(--point)} .tl-date{font-family:var(--sans);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600} .tl-text{font-family:var(--body);font-size:.93rem;color:var(--ink);line-height:1.6} @media(max-width:560px){ .tl-year{grid-template-columns:46px 1fr;gap:10px} .tl-yr{font-size:1.2rem;top:120px} .tl-row{grid-template-columns:1fr;gap:2px} .tl-date{font-size:.74rem} } /* ============ AI CHAT WIDGET ============ */ .chat-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--point);border:2px solid #fff;box-shadow:0 8px 24px rgba(107,78,142,.4);cursor:pointer;display:grid;place-items:center;transition:transform .2s,filter .2s} .chat-fab:hover{transform:scale(1.06);filter:brightness(1.08)} .chat-fab svg{width:26px;height:26px} .chat-panel{position:fixed;right:22px;bottom:94px;z-index:65;width:370px;max-width:calc(100vw - 30px);height:520px;max-height:calc(100vh - 130px);background:#fff;border:1px solid var(--line-soft);border-radius:26px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:none;flex-direction:column;overflow:hidden} .chat-panel.open{display:flex;animation:fade .25s ease} .chat-head{background:var(--bar);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:11px} .chat-head .hav{width:34px;height:34px;border:2px solid #fff;border-radius:50%;background:#2e2e2e;display:grid;place-items:center;flex-shrink:0} .chat-head .ht{font-family:var(--disp);font-weight:400;font-size:1rem;line-height:1.1} .chat-head .hs{font-family:var(--sans);font-size:.66rem;color:#a9a9a9} .chat-head .hclose{margin-left:auto;background:none;border:0;color:#bbb;font-size:1.4rem;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px} .chat-head .hclose:hover{color:#fff;background:rgba(255,255,255,.1)} .chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--soft)} .msg{max-width:84%;padding:11px 17px;border-radius:16px;font-family:var(--body);font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-break:break-word} .msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line-soft);border-bottom-left-radius:4px} .msg.me{align-self:flex-end;background:var(--point);color:#fff;border-bottom-right-radius:4px} .msg.typing{align-self:flex-start;color:var(--muted);font-style:italic;background:#fff;border:1.5px solid var(--line-soft)} .chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-soft);background:#fff} .chat-input textarea{flex:1;font-family:var(--body);font-size:.9rem;color:var(--ink);border:1px solid var(--line-soft);border-radius:14px;padding:9px 12px;resize:none;height:42px;max-height:100px} .chat-input textarea:focus{outline:none;box-shadow:0 2px 6px rgba(0,0,0,.1)} .chat-input button{font-family:var(--disp);font-weight:400;color:#fff;background:var(--point);border:1.5px solid var(--point);border-radius:14px;padding:0 16px;cursor:pointer;transition:filter .15s} .chat-input button:hover{filter:brightness(1.1)} .chat-input button:disabled{opacity:.5;cursor:default} @media(max-width:460px){.chat-panel{height:60vh}} /* ===== 아라베스타 v3: 밴드 쌓기 UI ===== */ .arb-band-hint{margin-left:auto;font-size:.76rem;color:var(--muted);font-weight:600} .arb-preset-row{display:flex;gap:8px;flex-wrap:wrap} .arb-preset{font-family:inherit;font-size:.83rem;font-weight:700;padding:8px 14px;border:2px solid var(--line-soft);border-radius:20px;background:var(--bg);color:var(--soft-ink);cursor:pointer;transition:all .14s} .arb-preset:hover{border-color:var(--point);transform:translateY(-1px)} .arb-preset.on{border-color:var(--point);background:rgba(107,78,142,.08);color:var(--ink)} /* 밴드 스택 */ .arb-bandstack{display:flex;flex-direction:column;gap:7px;margin-bottom:9px} .arb-band{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1.5px solid var(--line-soft);border-radius:12px;background:var(--bg);transition:border-color .14s} .arb-band:hover{border-color:rgba(107,78,142,.4)} .arb-band-grip{cursor:grab;color:var(--muted);font-size:1rem;flex:0 0 auto;user-select:none;line-height:1} .arb-band.dragging{opacity:.5;border-color:var(--point);border-style:dashed} .arb-band-sw{width:40px;height:40px;border-radius:9px;flex:0 0 auto;border:1.5px solid var(--line-soft);background:linear-gradient(135deg,#f6f2fb,#efe8f7);overflow:hidden} .arb-band-sw svg{width:100%;height:100%;display:block} .arb-band-mid{flex:1;min-width:0} .arb-band-nm{font-size:.85rem;font-weight:700;color:var(--ink)} .arb-band-type-sel{font-family:inherit;font-size:.78rem;padding:3px 6px;border:1.5px solid var(--line-soft);border-radius:7px;background:var(--bg);color:var(--soft-ink);cursor:pointer;margin-top:3px;max-width:130px} .arb-band-ctrls{display:flex;align-items:center;gap:6px;flex:0 0 auto} .arb-band-col{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-soft);padding:0;cursor:pointer;background:none;overflow:hidden} .arb-band-col::-webkit-color-swatch-wrapper{padding:0} .arb-band-col::-webkit-color-swatch{border:none;border-radius:50%} .arb-band-col::-moz-color-swatch{border:none;border-radius:50%} .arb-band-w{width:56px;accent-color:var(--point)} .arb-band-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:2px 4px;line-height:1;border-radius:6px;flex:0 0 auto} .arb-band-del:hover{color:#c0392b;background:rgba(192,57,43,.08)} .arb-band-empty{font-size:.82rem;color:var(--muted);text-align:center;padding:14px 0;border:1.5px dashed var(--line-soft);border-radius:12px} .arb-addband{width:100%;font-family:inherit;font-size:.86rem;font-weight:700;padding:10px;border:2px dashed var(--line-soft);border-radius:12px;background:var(--bg);color:var(--point);cursor:pointer;transition:all .14s} .arb-addband:hover{border-color:var(--point);background:rgba(107,78,142,.05)} /* 밴드 추가 팔레트 */ .arb-bandpalette{margin:8px 0;border:1.5px solid var(--point);border-radius:14px;padding:12px;background:rgba(107,78,142,.04)} .arb-bp-head{display:flex;align-items:center;font-size:.86rem;font-weight:700;margin-bottom:10px} .arb-bp-x{margin-left:auto;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted)} .arb-bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px} .arb-bp-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 5px 6px;border:1.5px solid var(--line-soft);border-radius:11px;background:var(--bg);cursor:pointer;transition:all .12s;font-family:inherit} .arb-bp-item:hover{border-color:var(--point);transform:translateY(-2px)} .arb-bp-pv{width:100%;aspect-ratio:2/1;border-radius:6px;background:#faf7fd;overflow:hidden} .arb-bp-pv svg{width:100%;height:100%;display:block} .arb-bp-nm{font-size:.72rem;font-weight:700;color:var(--soft-ink)} /* 로고 */ .arb-logo-row{align-items:center;gap:10px;flex-wrap:wrap} .arb-toggle{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:.84rem;font-weight:700;padding:8px 14px;border:2px solid var(--line-soft);border-radius:20px;background:var(--bg);cursor:pointer;color:var(--soft-ink);transition:all .14s} .arb-toggle .arb-tg-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);transition:background .14s} .arb-toggle.on{border-color:var(--point);color:var(--ink);background:rgba(107,78,142,.06)} .arb-toggle.on .arb-tg-dot{background:var(--point)} .arb-logo-pos{font-family:inherit;font-size:.82rem;padding:7px 10px;border:2px solid var(--line-soft);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer} .arb-logo-pos:disabled,.arb-logo-col:disabled{opacity:.4;cursor:default} .arb-logo-col{width:34px;height:34px;border-radius:9px;border:2px solid var(--line-soft);padding:0;cursor:pointer;background:none} .arb-logo-col::-webkit-color-swatch-wrapper{padding:0} .arb-logo-col::-webkit-color-swatch{border:none;border-radius:6px} /* ═══════════════════════════════════════════════════════════ 미감 레이어 (Aesthetic pass) — 여백의 리듬 · 활자의 위계 · 절제된 디테일 ═══════════════════════════════════════════════════════════ */ /* 1) 활자 — 본문의 자간·행간을 아주 미세하게 열어 '읽히는' 밀도로 */ .sec-desc,.hero .sub{letter-spacing:-.01em;line-height:1.72} .logo-word{letter-spacing:.06em} .hero .eyebrow{opacity:.85} /* 2) 히어로 — 로고 워드에 은은한 그라데이션 잉크, 서브카피에 숨 공간 */ .logo-word{ color:var(--ink); } /* 그라데이션 잉크는 color-mix 를 아는 브라우저에서만. background 가 무효화된 채 text-fill-color:transparent 만 남으면 글자가 사라진다. */ @supports (background:color-mix(in srgb,red 50%,blue)){ .logo-word{ background:linear-gradient(180deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 78%,var(--point)) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } } .hero .sub{margin-top:18px} .hero-actions{margin-top:4px} /* 3) 버튼 — 눌러보고 싶은 물성(살짝 떠오르고, 그림자가 반응) */ .btn{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .18s} .btn-dark{box-shadow:0 4px 14px rgba(17,17,17,.14)} .btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(17,17,17,.22)} body.dark .btn-dark{box-shadow:0 4px 14px rgba(0,0,0,.4)} /* 4) 섹션 제목 — 이모지와 텍스트 사이 정렬만 다듬는다. (2026-08-03: h3::after 포인트 밑선 제거 — 좌측 정렬 시절의 장식이 제목이 중앙 정렬로 바뀐 뒤 왼쪽에 '금 간 것처럼' 남던 문제, 사용자 지적) */ .aihx-head h3{display:inline-flex;align-items:center;gap:9px;letter-spacing:.01em;position:relative} .aihx-head{margin-bottom:4px} .aihx-head p{margin-top:10px} /* 5) 연대기 카드 — 정제된 그림자·모서리, 호버 시 이미지가 살짝 확대되는 생동감 */ .aihx{border-color:color-mix(in srgb,var(--line-soft) 70%,transparent); box-shadow:0 1px 2px rgba(17,17,17,.03);background:linear-gradient(180deg,var(--soft),color-mix(in srgb,var(--soft) 60%,var(--bg)))} .aihx-card{transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;box-shadow:0 1px 3px rgba(17,17,17,.05)} .aihx-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(17,17,17,.12)} .aihx-card img{transition:transform .5s cubic-bezier(.22,1,.36,1)} .aihx-card:hover img{transform:scale(1.045)} .aihx-card figcaption{gap:6px} .aihx-card b{letter-spacing:-.01em} body.dark .aihx-card:hover{box-shadow:0 14px 30px rgba(0,0,0,.4)} /* 6) 소구 카드 — 왼쪽에 브랜드 컬러 악센트 바가 호버 시 자라남 */ .sp{position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(17,17,17,.04); transition:transform .2s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,border-color .2s} .sp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--point); transform:scaleY(0);transform-origin:top;transition:transform .28s cubic-bezier(.22,1,.36,1)} .sp:hover::before{transform:scaleY(1)} .sp:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(107,78,142,.14)} .sp-em{transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .sp:hover .sp-em{transform:scale(1.15) rotate(-4deg)} /* 7) 이미지 공통 — 로딩 후 부드럽게 나타나는 정갈함(선택적, 첫 페인트만) */ .aihx-card img,.pthumb{background:linear-gradient(110deg,var(--soft) 30%,color-mix(in srgb,var(--soft) 50%,var(--bg)) 50%,var(--soft) 70%)} /* 8) 인용/구분 — 얇은 헤어라인을 브랜드 톤으로 (구분감은 있되 무겁지 않게) */ hr,.divider{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-soft),transparent)} /* 9) 스크롤 힌트 — 가로 연대기 우측에 페이드로 '더 있음'을 암시 */ .aihx-strip{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)} @media(max-width:600px){.aihx-strip{-webkit-mask-image:none;mask-image:none}} /* 10) 선택 영역·포커스에도 브랜드 온기 유지(이미 있던 것 위에 미세 보정) */ .aihx-card:focus-visible,.sp:focus-visible{outline-offset:3px} /* ═══ 🎒 도라에몽 주머니 (관리자 전용 저장소) ═══ */ .pocket{margin:8px 0 34px;padding:24px;border:1.5px solid var(--line-soft);border-radius:22px; background:linear-gradient(160deg,color-mix(in srgb,var(--point) 8%,var(--bg)),var(--bg))} .pocket[hidden]{display:none} .pocket-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pocket-em{font-size:1.5rem} .pocket-title h3{font-family:var(--disp);font-weight:400;font-size:1.3rem;color:var(--ink);margin:0} .pocket-badge{font-family:var(--sans);font-size:.68rem;font-weight:700;color:#fff;background:#5a3d7a;border-radius:6px;padding:3px 9px} .pocket-desc{font-family:var(--body);font-size:.85rem;color:var(--muted);line-height:1.65;margin:8px 0 18px} .pocket-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--point);color:#fff;border:0;border-radius:12px;padding:12px;font-family:var(--sans);font-size:.92rem;font-weight:700;cursor:pointer;margin-bottom:14px;transition:filter .15s} .pocket-toggle:hover{filter:brightness(1.08)} .pocket-toggle .pt-chev{transition:transform .22s} .pocket-toggle.open .pt-chev{transform:rotate(180deg)} .pocket-add{background:var(--bg);border:1px solid var(--line-soft);border-radius:14px;padding:14px;margin-bottom:14px} .pocket-add[hidden]{display:none} .pocket-tabs{display:flex;gap:7px;margin-bottom:11px} .pocket-tab{flex:1;padding:9px 4px;border-radius:9px;border:1px solid var(--line-soft);background:transparent;color:var(--muted);font-family:var(--sans);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s} .pocket-tab.active{background:var(--point);border-color:var(--point);color:#fff} .pocket-in{width:100%;box-sizing:border-box;background:var(--soft);border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;font-family:var(--sans);font-size:.9rem;color:var(--ink);margin-bottom:9px;outline:none} .pocket-in:focus{border-color:var(--point)} .pocket-ta{resize:vertical;min-height:70px;line-height:1.6;font-family:var(--body)} .pocket-drop{display:block;text-align:center;padding:18px;border:1.5px dashed var(--line-soft);border-radius:9px;color:var(--muted);font-family:var(--sans);font-size:.86rem;cursor:pointer;margin-bottom:9px} .pocket-drop.has{border-color:var(--point);color:var(--point)} .pocket-save{width:100%;padding:12px;border:0;border-radius:10px;background:var(--point);color:#fff;font-family:var(--sans);font-size:.92rem;font-weight:700;cursor:pointer;transition:filter .15s} .pocket-save:hover{filter:brightness(1.08)} .pocket-search input{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:10px 13px;font-family:var(--sans);font-size:.88rem;color:var(--ink);margin-bottom:14px;outline:none} .pocket-search input:focus{border-color:var(--point)} .pocket-folders{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px} .pk-folder{font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line-soft);border-radius:999px;padding:7px 13px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px} .pk-folder:hover{border-color:var(--point);color:var(--point)} .pk-folder.active{background:var(--point);border-color:var(--point);color:#fff} .pk-folder em{font-style:normal;font-size:.72rem;opacity:.7} .pk-folder.active em{opacity:.85} .pocket-card .pk-fbadge{display:inline-block;font-size:.66rem;color:var(--muted);background:var(--soft);border-radius:5px;padding:1px 6px;margin-left:5px;font-weight:600} .pocket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .pocket-card{background:var(--bg);border:1px solid var(--line-soft);border-radius:13px;padding:13px 14px;display:flex;flex-direction:column;gap:7px;position:relative;transition:transform .15s,box-shadow .15s} .pocket-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(107,78,142,.12)} .pocket-card .pk-kind{font-size:.68rem;font-weight:700;color:var(--point);font-family:var(--sans);letter-spacing:.04em} .pocket-card .pk-title{font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--ink);word-break:break-word} .pocket-card .pk-body{font-family:var(--body);font-size:.82rem;color:var(--soft-ink);line-height:1.55;word-break:break-word;white-space:pre-wrap;max-height:120px;overflow:auto} .pocket-card .pk-img{width:100%;border-radius:8px;display:block} .pocket-card .pk-link{font-family:var(--sans);font-size:.8rem;color:var(--point);text-decoration:none;word-break:break-all} .pocket-card .pk-link:hover{text-decoration:underline} .pocket-card .pk-file{display:flex;align-items:center;gap:10px;text-decoration:none;background:var(--soft);border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px;transition:border-color .15s} .pocket-card .pk-file:hover{border-color:var(--point)} .pocket-card .pk-file-ic{font-size:1.6rem;flex-shrink:0} .pocket-card .pk-file-meta{display:flex;flex-direction:column;min-width:0} .pocket-card .pk-file-meta b{font-family:var(--sans);font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pocket-card .pk-file-meta i{font-family:var(--sans);font-style:normal;font-size:.7rem;color:var(--muted)} .pocket-card .pk-blob{min-height:20px} .pocket-card .pk-loading{font-family:var(--sans);font-size:.78rem;color:var(--muted);display:inline-block;padding:6px 0} .pocket-card .pk-file-ph{opacity:.6} .pocket-card .pk-tags{display:flex;flex-wrap:wrap;gap:4px} .pocket-card .pk-tag{font-family:var(--sans);font-size:.68rem;color:var(--muted);background:var(--soft);border-radius:5px;padding:2px 6px} .pocket-card .pk-acts{display:flex;gap:6px;margin-top:2px} .pocket-card .pk-btn{flex:1;white-space:nowrap;font-family:var(--sans);font-size:.73rem;font-weight:700;padding:6px 4px;border-radius:7px;border:1px solid var(--line-soft);background:transparent;color:var(--muted);cursor:pointer} .pocket-card .pk-btn:hover{border-color:var(--point);color:var(--point)} /* 카드 인라인 편집 모드 */ .pocket-card.editing{border-color:var(--point);box-shadow:0 0 0 2px rgba(107,78,142,.14)} .pocket-card.editing .pocket-in{margin-bottom:7px;font-size:.84rem;padding:8px 10px} .pocket-card .pk-btn.pk-btn-save{background:var(--point);border-color:var(--point);color:#fff} .pocket-card .pk-btn.pk-btn-save:hover{filter:brightness(1.08)} .pk-edit-note{font-family:var(--body);font-size:.72rem;color:var(--muted);margin:-2px 0 6px} .pocket-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-family:var(--body);font-size:.88rem;padding:30px 0} @media(max-width:600px){.pocket{padding:18px 15px}.pocket-grid{grid-template-columns:1fr 1fr;gap:9px}} /* ═══ 오너먼트 언어 확장 — 갤러리 연대기의 얇은 선·마름모 모티프를 같은 '기록/연대기' 결의 카드들로 넓힘 (AI 연대기 3종 + 도라에몽 주머니) ═══ */ .aihx,.pocket{position:relative;padding-top:38px} .aihx::before,.pocket::before{content:'';position:absolute;top:13px;left:50%;transform:translateX(-50%); width:64px;height:12px;background:var(--orn-motif) center/64px 12px no-repeat;pointer-events:none;opacity:.9} @media(max-width:600px){.aihx,.pocket{padding-top:33px}.aihx::before,.pocket::before{top:11px}} /* 🎒 주머니 목록 접기 — 마름모 디바이더형 토글 */ .pk-listfold{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:8px 2px;margin:2px 0 12px; cursor:pointer;font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.02em;transition:color .15s} .pk-listfold:hover{color:var(--point)} .pk-listfold::before,.pk-listfold::after{content:'';flex:1;height:1px;background:var(--ornc);opacity:.55} .pk-listfold .pk-dia{flex:0 0 auto;width:6px;height:6px;border:1px solid var(--ornc);background:var(--bg);transform:rotate(45deg)} .pk-listfold:hover .pk-dia{border-color:var(--point)} .pk-listfold em{font-style:normal;opacity:.75;font-weight:600} .pk-listfold .pk-lf-chev{display:inline-block;font-size:.72rem;transition:transform .22s} .pk-listfold[aria-expanded="false"] .pk-lf-chev{transform:rotate(-90deg)} .pocket-list[hidden]{display:none} @media (prefers-reduced-motion: reduce){.pk-listfold .pk-lf-chev{transition:none}} /* ═══════════════════════════════════════════════════════════ ✦ 미감 리파인 v2 — 최종 오버라이드 레이어 (섹션 타이포 재정렬 · 마름모 디바이더 확장 · 전반 폴리시) ═══════════════════════════════════════════════════════════ */ /* 1) 섹션 헤더 — 국문 제목을 축으로 ──◇ 제목 ◇── 괘선이 감싸고, 영문 캡션은 한 칸 아래 중앙 정렬로 (좌우 무게 균형 회복) */ .sec-head{flex-wrap:wrap;align-items:center;gap:0 16px;margin:0 0 12px} .sec-head .rule{order:0;min-width:22px} .sec-head h2{order:1;line-height:1.3;letter-spacing:-.012em;text-wrap:balance} .sec-head .rule.r2{order:2} .sec-head .en{order:3;flex:0 0 100%;text-align:center;padding:9px 0 0; font-size:.63rem;letter-spacing:.44em;margin-right:-.44em;opacity:.9} .sec-desc{margin-top:2px;margin-bottom:30px;text-wrap:pretty} @media(max-width:600px){ .sec-head{gap:0 12px} .sec-head .en{font-size:.58rem;letter-spacing:.36em;margin-right:-.36em;padding-top:7px} } /* 내부 소제목들도 중앙 축으로 — 상단 오너먼트 모티프와 호응 */ .aihx-head{text-align:center} .aihx-head p{max-width:640px;margin-left:auto;margin-right:auto} .pocket-head{text-align:center} .pocket-title{justify-content:center} .pocket-desc{max-width:560px;margin-left:auto;margin-right:auto} .gc-head{justify-content:center} .dada-head{text-align:center} .dada-title-row{justify-content:center} .dada-sub{text-wrap:pretty} /* 2) ─── ◇ ◇ ─── 마름모 디바이더 확장 */ /* 범용 유틸 (필요한 곳에
) */ .dia-hr{position:relative;height:1px;margin:28px auto; background:linear-gradient(90deg,transparent,var(--line-soft) 15%,var(--line-soft) 85%,transparent)} .dia-hr::before,.dia-hr::after{content:'';position:absolute;top:-3px;width:6px;height:6px; background:var(--ornc);transform:rotate(45deg)} .dia-hr::before{left:calc(50% - 21px)} .dia-hr::after{left:calc(50% + 15px)} /* 연대기 카드 하단 각주 — 점선 대신 페이드 괘선 + 중앙 마름모 */ .aihx-foot{position:relative;border-top:0;margin-top:16px;padding-top:16px;text-align:center} .aihx-foot::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--line-soft) 12%,var(--line-soft) 88%,transparent)} .aihx-foot::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px; transform:translateX(-50%) rotate(45deg);background:var(--ornc)} /* 게시글 모달 — 본문과 댓글 사이 경계도 같은 언어로 */ .pd-comments{position:relative;border-top:0;padding-top:24px} .pd-comments::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px; background:linear-gradient(90deg,transparent,var(--line-soft) 12%,var(--line-soft) 88%,transparent)} .pd-comments::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px; transform:translateX(-50%) rotate(45deg);background:var(--ornc)} /* 사이트 푸터 — 저작권 줄 위에 은은한 마감선 */ footer .foot-copy{position:relative;text-align:center;margin-top:24px;padding-top:20px} footer .foot-copy::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 15%,rgba(255,255,255,.14) 85%,transparent)} footer .foot-copy::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px; transform:translateX(-50%) rotate(45deg);background:rgba(255,255,255,.26)} /* 3) 전반 폴리시 — 타이포 리듬 · 겹그림자 · 세부 마감 */ h1,h2,h3,.gall-gtitle{text-wrap:balance} .gall-gtitle,.dada-title-row h3,.pdc-head,.pocket-title h3,.aihx-head h3{letter-spacing:-.01em} .sp,.qtile{box-shadow:0 1px 2px rgba(44,38,32,.04),0 14px 34px -20px rgba(107,78,142,.28)} body.dark .sp,body.dark .qtile{box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -20px rgba(0,0,0,.5)} .aihx-card,.pocket-card{box-shadow:0 1px 2px rgba(44,38,32,.03)} .aihx-card img{transition:transform .35s ease} .aihx-card:hover img{transform:scale(1.025)} @media (prefers-reduced-motion: reduce){.aihx-card img{transition:none}.aihx-card:hover img{transform:none}} /* ═══ 접근성·모바일 폴리시 (2026-07 감사 반영) ═══ */ /* 키보드 포커스 안전망: outline:none으로 링이 제거된 입력·버튼도 키보드 탐색(:focus-visible) 시엔 항상 보이는 링을 보장한다. 마우스·터치 포커스에는 적용되지 않아 기존 시각 디자인 불변. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--point) !important; outline-offset:2px !important; border-radius:inherit; } /* iOS 사파리: 16px 미만 입력 포커스 시 강제 확대 방지 (iOS에서만 발동) */ @supports (-webkit-touch-callout: none){ @media (max-width:600px){ input, select, textarea{ font-size:max(16px, 1em) !important; } } } /* ═══ 디자인 폴리시 v2 (2026-07 · 레이아웃 불변의 디테일) ═══ */ /* ① 한국어 줄바꿈 품질 — 단어 중간 꺾임("스튜디/오") 방지. 긴 URL 등은 overflow-wrap이 최후 폴백으로 안전하게 꺾는다. */ body{word-break:keep-all;overflow-wrap:break-word} /* ② 제목은 균형 줄바꿈, 본문 문단은 끝줄 고아 단어 방지 (지원 브라우저 한정·무해) */ h1,h2,h3,h4{text-wrap:balance} p{text-wrap:pretty} /* ③ 프레스 촉감 — 누르는 순간 1px 가라앉는 물리적 피드백. 모션 최소화 설정 사용자에겐 비활성. :where()라 기존 스타일과 충돌 없음. */ @media (prefers-reduced-motion: no-preference){ :where(.calc-toggle,.app-toggle,.board,.mcell,.pocket-toggle,.pk-pager button,.app-share-btn):active{transform:translateY(1px)} } /* ④ 공유 딥링크·자동 열기로 이동한 토글이 화면 상단에 여유 있게 안착 */ .calc-toggle,.app-toggle{scroll-margin-top:84px} /* ⑤ INP 최적화 — 페이지 전환 순간의 일괄 레이아웃 비용 절감. 뷰포트 밖 카드 블록은 스크롤로 다가갈 때 그린다. (캐러셀 슬라이드는 전환 프레임 품질을 위해 의도적으로 제외) */ .gall-group,.gb-card,.pocket-card,.blog-card{content-visibility:auto} .gall-group{contain-intrinsic-size:auto 340px} .gb-card,.pocket-card,.blog-card{contain-intrinsic-size:auto 260px}