/* 프리워킹 공용 스타일 — 홈(index.html)과 안내 페이지(/about, /coworking, /challenge)가 같이 쓴다 (11/09 디자인 개선부터).
글꼴: Pretendard 공식 CDN(dynamic subset). 공유 썸네일용 부분 글꼴은 og/Pretendard.woff 에만 남아 있다 */
:root{
--bg:#F5F4FB; --surface:#FFFFFF; --ink:#17163A; --muted:#5E5C7A; --line:#E3E1F2;
--sun:#5F52F2; --sun-ink:#FFFFFF; --hl:#D9D4FF; --panel:#1B1A3D; --panel-fg:#ECEBFA; --panel-muted:#9693BD; --panel-hi:#2C2A5C;
--display:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
--body:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
/* 라이트 고정 (11/09 지훈). 아래 다크 값은 일 때만 — 지금은 켜는 곳 없음(테마 버튼은 '추구미 안 맞음'으로 뺌), 나중에 쓸 때를 위해 남김 */
:root[data-theme="dark"]{
--bg:#12112B; --surface:#1C1B3E; --ink:#EEEDFB; --muted:#A6A3C9; --line:#2C2A55;
--sun:#7B70FF; --hl:#3A3480; --panel:#0B0A1F; --panel-hi:#25234F; color-scheme:dark }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;letter-spacing:-.01em;word-break:keep-all;
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));}
.wrap{max-width:1040px;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:800;text-wrap:balance;margin:0;letter-spacing:-.03em}
p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo{width:40px;height:40px;border-radius:50%;background:var(--sun);display:grid;place-items:center;flex:none}
.logo svg{width:20px;height:22px}
code{font-family:var(--mono);font-size:13px;background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:5px}
/* 상단: 브랜드 + 메뉴 (안내 페이지에만 있음) */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:24px 8px}
.brand .eyebrow{margin:0}
.menu{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:14px;color:var(--muted)}
.menu a{text-decoration:none}
.menu a[aria-current]{color:var(--ink);font-weight:700}
.menu a:hover{color:var(--ink)}
/* Hero (홈과 같은 글자 크기, 서버 카드 없이 한 열) */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:48px 56px}
.hero>*{min-width:0}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.eyebrow a{text-decoration:none}
.eyebrow span{margin:0 8px}
.hero h1{font-size:clamp(40px,6.4vw,64px);line-height:1.08;margin-top:14px}
.hero h1 mark{background:linear-gradient(transparent 58%,var(--hl) 58%);color:inherit;padding:0 .08em}
.lead{margin-top:20px;font-size:18px;color:var(--muted);max-width:30em}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:32px;background:var(--sun);color:var(--sun-ink);
font-weight:700;font-size:17px;padding:16px 26px;border-radius:999px;text-decoration:none;transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.cta svg{width:18px;height:18px}
.note{margin-top:12px;font-size:13px;color:var(--muted)}
/* 히어로 오른쪽: 디스코드 패널 모양의 채널 목록 (홈 서버 카드의 채널 부분) */
.panel{background:var(--panel);color:var(--panel-fg);border-radius:18px;padding:18px 14px 20px;
box-shadow:0 30px 60px -30px rgba(40,30,120,.5);font-size:15px}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 14px;border-bottom:1px solid var(--panel-hi);font-weight:700}
.panel-head .who{display:flex;align-items:center;gap:10px}
.panel-head .logo{width:26px;height:26px}.panel-head .logo svg{width:13px;height:14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px rgba(123,112,255,.28)}
.cat{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--panel-muted);margin:16px 8px 6px}
.ch{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;color:var(--panel-fg)}
.ch i{font-style:normal;font-family:var(--mono);color:var(--panel-muted);width:16px;text-align:center}
.ch.on{background:var(--panel-hi)}
.ch small{margin-left:auto;font-size:11px;color:var(--panel-muted)}
/* Sections (홈과 같음) */
section{padding-block:56px;border-top:1px solid var(--line)}
.hero{border-top:0}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;margin-bottom:28px}
.sec-head h2{font-size:clamp(28px,4vw,38px)}
.sec-head p{color:var(--muted);max-width:28em}
/* FAQ (안내 페이지에만) */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:12px;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-family:var(--mono);flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--muted);max-width:40em}
.faq p a{color:var(--ink)}
.final{text-align:left;padding-block:64px 80px}
.final h2{font-size:clamp(32px,5vw,48px);max-width:14em}
.final p{margin-top:12px;color:var(--muted)}
@media (max-width:860px){
.hero{grid-template-columns:1fr;gap:36px;padding-block:40px}
.hero .panel{display:none}
}
/* 모바일 (홈과 같은 규칙) */
@media (max-width:640px){
body{font-size:15px}
.top{padding-block:16px 0}
.menu{font-size:13px;gap:4px 14px}
.hero{padding-block:28px 36px}
.hero h1{font-size:34px;margin-top:18px}
.hero .lead{font-size:16px;margin-top:14px}
.hero .cta{margin-top:24px}
.eyebrow{font-size:11px}
section{padding-block:40px}
.sec-head{margin-bottom:18px}
.sec-head h2{font-size:24px}
.sec-head p{font-size:14px}
.faq summary{font-size:16px}
.final{padding-block:44px 56px}
.final h2{font-size:30px}
.final .cta{display:flex;justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .cta{transition:none} }
/* Server card (디스코드 초대 카드 모양, 인원은 /api/server) */
.server{background:var(--panel);color:var(--panel-fg);border-radius:20px;overflow:hidden;
box-shadow:0 30px 60px -30px rgba(40,30,120,.55);font-size:15px}
.server-banner{height:92px;background:
radial-gradient(120% 140% at 85% -20%,rgba(255,255,255,.28),transparent 55%),
linear-gradient(135deg,var(--sun),#3A2FB8 70%,#231C7A)}
.server-top{display:flex;align-items:flex-end;gap:14px;padding:0 20px;margin-top:-34px}
.server-icon{width:76px;height:76px;border-radius:22px;background:var(--sun);display:grid;place-items:center;flex:none;
border:5px solid var(--panel);overflow:hidden}
.server-icon img{width:100%;height:100%;object-fit:cover;display:block}
.server-icon svg{width:30px;height:33px}
.server-badge{margin-bottom:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--panel-muted);
border:1px solid var(--panel-hi);border-radius:999px;padding:2px 9px}
.server-body{padding:12px 20px 20px}
.server-name{font-size:24px;letter-spacing:-.02em}
.server-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:14px;color:var(--panel-muted)}
.server-meta>span{display:inline-flex;align-items:center;gap:7px}
.server-meta b{color:var(--panel-fg);font-variant-numeric:tabular-nums;font-weight:700}
.server-meta i{width:9px;height:9px;border-radius:50%;flex:none}
.i-on{background:#3BD27F;box-shadow:0 0 0 3px rgba(59,210,127,.22)}
.i-all{background:var(--panel-muted)}
.server[data-state="loading"] .server-meta b{display:inline-block;min-width:2ch;color:transparent;background:var(--panel-hi);border-radius:4px}
.server[data-state="error"] .server-meta{display:none}
.server-join{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px;background:var(--sun);color:#fff;
font-weight:700;padding:12px;border-radius:12px;text-decoration:none;transition:filter .15s}
.server-join:hover{filter:brightness(1.1)}
.server-ch{border-top:1px solid var(--panel-hi);padding:6px 12px 16px;display:grid;grid-template-columns:1fr 1fr;column-gap:8px}
.server-ch .cat{grid-column:1/-1}
.live{display:flex;width:fit-content;align-items:center;gap:8px;margin-top:14px;font-size:15px;color:var(--muted);
background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 12px}
.live b{color:var(--ink);font-variant-numeric:tabular-nums}
.live i{width:9px;height:9px;border-radius:50%}
.live[hidden]{display:none}
.server-ch{display:none}
@media (max-width:640px){ .server-banner{height:64px} .server-icon{width:64px;height:64px;border-radius:18px} }
/* Goods: 스마트스토어 상품 (11/09) */
.goods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.good{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.good:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(40,30,120,.45)}
.good-img{aspect-ratio:1;background:var(--bg);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.good-img img{width:100%;height:100%;object-fit:cover;display:block}
.good-img span{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em}
.good-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.good .tag{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em}
.good h3{font-size:20px}
.good p{font-size:14px;color:var(--muted)}
.good .price{margin-top:auto;padding-top:6px;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.good .price b{font-size:18px}
.good .price s{font-size:13px;color:var(--muted)}
.good .go{font-size:14px;font-weight:700;color:var(--sun)}
.goods-note{margin-top:14px;font-size:13px;color:var(--muted)}
@media (max-width:860px){ .goods{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
.goods{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:0 16px 6px;scrollbar-width:none}
.goods::-webkit-scrollbar{display:none}
.good{flex:0 0 70%;scroll-snap-align:center}
.good h3{font-size:18px}
}
@media (prefers-reduced-motion:reduce){ .good{transition:none} }
/* ───────── 11/09 디자인 개선: 공통 머리·바닥글 + 홈 섹션 ───────── */
/* 머리: 로고 · 메뉴 · 입장 버튼 (모든 페이지) */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-block:20px 4px}
.top .brand{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.top .logo{width:34px;height:34px}
.top .logo svg{width:17px;height:19px}
.top .menu{margin-left:auto;font-size:15px;gap:4px 24px}
.top-cta{display:inline-flex;align-items:center;gap:6px;background:var(--sun);color:var(--sun-ink);font-weight:700;font-size:14px;
padding:9px 16px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:filter .15s}
.top-cta:hover{filter:brightness(1.08)}
.top-cta svg{width:14px;height:14px}
/* 홈 히어로: 문구 + 서버 카드 (채널 목록은 아래 '방' 섹션에서만) */
.home .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);padding-block:56px 48px}
.home .hero h1{font-size:clamp(38px,5.2vw,58px);line-height:1.12}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--sun)}
/* 숫자 띠 */
.statband{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--panel);color:var(--panel-fg);border-radius:20px;
padding:28px 8px;margin-bottom:24px}
.statband>div{padding:4px 28px;border-left:1px solid var(--panel-hi);min-width:0}
.statband>div:first-child{border-left:0}
.statband b{display:block;font-family:var(--display);font-size:clamp(28px,3.4vw,40px);line-height:1.05;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.statband span{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:14px;color:var(--panel-muted)}
/* 모임 사진 */
.meetups{border-top:0;padding-block:24px 48px}
.meetups .sec-head{margin-bottom:18px}
.meetups .sec-head p{font-size:14px}
.meetup-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.meetup-photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:var(--surface)}
/* 방: 왼쪽 제목 고정 + 오른쪽 번호 목록 */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.split .sec-head{display:block;position:sticky;top:24px;margin:0}
.split .sec-head p{margin-top:12px}
.roomlist{list-style:none;margin:0;padding:0;counter-reset:r}
.roomlist li{counter-increment:r;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-top:1px solid var(--line)}
.roomlist li:first-child{border-top:0;padding-top:4px}
.roomlist li::before{content:counter(r,decimal-leading-zero);grid-row:span 3;font-family:var(--display);font-weight:800;font-size:28px;line-height:1.1;color:var(--sun);font-variant-numeric:tabular-nums}
.roomlist h3{font-size:22px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.roomlist h3 a{font-size:14px;font-weight:700;color:var(--sun);text-decoration:none;letter-spacing:-.01em}
.roomlist h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.roomlist p{color:var(--muted);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips span{font-size:13px;padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
/* 이런 분께: 둥근 판 + 아이콘 3단 */
section.band{border-top:0;padding-block:24px}
.band-in{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:44px 40px}
.band-in h2{font-size:clamp(26px,3.4vw,34px);margin-bottom:28px}
.fit3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.fit3 .ic{width:48px;height:48px;border-radius:14px;background:var(--hl);color:var(--sun);display:grid;place-items:center;margin-bottom:16px}
.fit3 .ic svg{width:24px;height:24px}
.fit3 h3{font-size:20px;margin-bottom:6px}
.fit3 p{color:var(--muted);font-size:15px}
.band-in .sec-head{margin-bottom:24px}
.band-in .sec-head h2{margin:0}
.fit3.plain h3{margin-top:0}
/* 입장 3단계: 가로 타임라인 */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:t}
.timeline li{counter-increment:t;position:relative;padding-top:56px;min-width:0}
.timeline li::before{content:counter(t);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--sun);color:var(--sun-ink);
display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px;z-index:1}
.timeline li::after{content:"";position:absolute;left:48px;right:-16px;top:20px;border-top:2px dashed var(--line)}
.timeline li:last-child::after{display:none}
.timeline h3{font-size:20px;margin-bottom:4px}
.timeline p{color:var(--muted);font-size:15px}
.timeline code{font-family:var(--mono);font-size:13px;background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:5px}
/* 마무리: 보라 판 */
.final.callout{border-top:0;padding-block:24px 56px}
.callout-in{background:radial-gradient(120% 160% at 100% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(135deg,var(--sun),#3A2FB8 75%,#231C7A);
color:#fff;border-radius:28px;padding:56px 48px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.callout-in h2{font-size:clamp(30px,4.4vw,46px);max-width:12em}
.callout-in p{margin-top:12px;color:rgba(255,255,255,.82)}
.callout-in .live{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}
.callout-in .live b{color:#fff}
.callout-in .cta{margin-top:0;background:#fff;color:#2A2190}
/* 굿즈: 마무리 아래 작은 칸 */
#goods .sec-head h2{font-size:clamp(24px,3vw,30px)}
#goods .good .tag{display:none}
/* 바닥글 */
.foot{border-top:1px solid var(--line);padding-block:40px 32px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.6fr));gap:24px 32px;font-size:14px;color:var(--muted)}
.foot .brand{font-weight:800;font-size:17px;color:var(--ink);letter-spacing:-.02em}
.foot .logo{width:30px;height:30px}.foot .logo svg{width:15px;height:17px}
.foot p{margin-top:10px;max-width:24em}
.foot h4{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--ink)}
/* 사업자 정보: 워크덴 홈 바닥글과 같은 내용 (11/09 써니) */
.foot .biz{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;font-size:12.5px;line-height:1.7}
.foot .biz p{margin:0;max-width:none}
.foot .biz span+span::before{content:"|";margin:0 8px;opacity:.5}
.foot .biz a{text-decoration:underline;text-underline-offset:2px}
.foot .biz .copy-line{margin-top:8px}
@media (max-width:860px){
.home .hero{grid-template-columns:1fr}
.split{grid-template-columns:1fr;gap:20px}
.split .sec-head{position:static}
.fit3{grid-template-columns:1fr;gap:22px}
.foot{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
.top{padding-block:14px 0;gap:10px 12px}
.top .menu{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:18px;font-size:14px;padding-bottom:4px;scrollbar-width:none}
.top .menu::-webkit-scrollbar{display:none}
.top .menu a{white-space:nowrap}
.top-cta{margin-left:auto;padding:8px 14px;font-size:13px}
.home .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:24px 28px}
.home .hero>div:first-child{display:contents}
.home .hero .kicker{order:1}
.home .hero h1{order:2;font-size:34px;margin-top:12px}
.home .hero .lead{order:3}
.home .hero .server{order:4;margin-top:24px}
.home .hero .cta,.home .hero .note{display:none}
.statband{padding:18px 4px;border-radius:16px}
.statband>div{padding:2px 12px}
.statband b{font-size:22px}
.statband span{font-size:12px}
.meetups{padding-block:12px 36px}
.meetups .sec-head{display:block;margin-bottom:14px}
.meetups .sec-head p{margin-top:6px}
/* 모바일: 세로로 쌓지 않고 옆으로 넘기는 슬라이드 (11/09 지훈) */
.meetup-photos{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.meetup-photos::-webkit-scrollbar{display:none}
.meetup-photos img{flex:0 0 84%;width:84%;scroll-snap-align:start}
.roomlist li{grid-template-columns:40px minmax(0,1fr);padding:18px 0}
.roomlist li::before{font-size:22px}
.roomlist h3{font-size:19px}
.band-in{padding:28px 20px;border-radius:18px}
.band-in h2{margin-bottom:20px}
.fit3>div{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px}
.fit3 .ic{grid-row:span 2;width:40px;height:40px;border-radius:12px;margin:0}
.fit3 .ic svg{width:20px;height:20px}
.fit3 h3{font-size:17px;margin:8px 0 2px}
.fit3 p{font-size:14px}
.fit3.plain>div{display:block}
.timeline{grid-template-columns:1fr;gap:0}
.timeline li{padding:0 0 22px 56px}
.timeline li::after{left:19px;right:auto;top:44px;bottom:4px;border-top:0;border-left:2px dashed var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline h3{font-size:17px;padding-top:8px}
.callout-in{padding:36px 24px;border-radius:20px}
.callout-in .cta{width:100%;justify-content:center}
.foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){ .top-cta{transition:none} }