
:root{color-scheme:light;font:16px/1.6 system-ui,-apple-system,sans-serif;background:#fbfbfa;color:#17221d}
*{box-sizing:border-box}body{margin:0}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #277954;outline-offset:4px}
.header,.actions{display:flex;align-items:center;gap:1rem}.header{padding:.9rem clamp(1rem,3vw,2.75rem);border-bottom:1px solid #e2e5e0;background:#fff}.actions{justify-content:space-between}
.brand{text-decoration:none;font-weight:850;font-size:1.8rem;letter-spacing:-.075em}.brand span,.eyebrow{color:#26744e}
.tag,.hint,.footer,.sidebar-title{color:#535e57;font-size:.875rem}.top-link{margin-left:auto;font-weight:700;text-decoration:none}
.layout{display:grid;grid-template-columns:13rem minmax(0,1fr);min-height:calc(100vh - 75px)}
.sidebar{border-right:1px solid #e2e5e0;padding:1.6rem 1.15rem;background:#fff}.sidebar-title{font-size:.72rem;font-weight:750;letter-spacing:.1em;margin:.15rem .55rem .8rem}
.sidebar a{display:block;text-decoration:none;padding:.55rem .65rem;border-radius:.4rem;font-weight:650}.sidebar a[aria-current="location"],.sidebar a:hover{background:#edf3ed}
.shell{width:min(100% - 3.5rem,72rem);min-width:0;margin-inline:auto}
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(3rem,7vw,6rem) 3.5rem}.eyebrow{margin:0 0 .85rem;font-weight:750;font-size:.82rem;letter-spacing:.12em}
h1{font-size:clamp(2.1rem,4.5vw,4.4rem);line-height:1.13;letter-spacing:-.065em;margin:0;word-break:keep-all}
.intro{font-size:1.075rem;max-width:32rem;color:#46534a;margin:1.3rem 0 1.65rem;word-break:keep-all}
.button{display:inline-block;border:1px solid transparent;border-radius:.45rem;padding:.65rem 1rem;font-weight:700;text-decoration:none;cursor:pointer}.primary{background:#192b22;color:#fff}.primary:hover{background:#284635}.secondary{color:#17221d;border-color:#cdd5cf;background:#fff}
.terminal{margin:0;border-radius:.75rem;background:#18211c;color:#e4ebe5;overflow:hidden}.terminal figcaption{padding:.7rem 1rem;border-bottom:1px solid #39453d;color:#d5e2d7;font-size:.85rem}.terminal-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#91d7ac;margin-right:.55rem}
.terminal pre{margin:0;padding:1.15rem 1rem 1.35rem;background:transparent;font:clamp(.75rem,1.25vw,.9rem)/1.8 ui-monospace,monospace}.terminal pre span{color:#a4dcb3}.terminal .terminal-status{font-weight:700}
.section-title{font-size:1.35rem;margin:0 0 .85rem}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.85rem}.features article,.workspace{border:1px solid #dce3dc;border-radius:.6rem;background:#fff;padding:1.25rem}
.features article>span{color:#26744e;font-weight:750;font-size:.85rem}.features h3{font-size:1.05rem;margin:.45rem 0 .3rem}.features p,.workspace p{margin:0;color:#46534a}
.public-actions{display:flex;flex-wrap:wrap;gap:.6rem}.public-section+.public-section{margin-top:2.6rem}
.section-intro{margin:0 0 1rem;color:#46534a;max-width:46rem}.features article .button{margin-top:.85rem}
.public-faq{display:grid;gap:.55rem}.public-faq details{padding:.85rem 1rem;border:1px solid #dce3dc;border-radius:.6rem;background:#fff}.public-faq p{margin:.55rem 0 0;color:#46534a}
.workspace{margin-top:2rem}.workspace h2{margin:0}.actions{margin-bottom:1rem}.team{padding-left:1.25rem}.team li{padding-block:.3rem}pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:.85rem;border-radius:.35rem;background:#edf3ed}
.footer{padding-block:2rem}
@media(max-width:860px){.layout{grid-template-columns:minmax(0,1fr)}.sidebar{display:flex;gap:.25rem;flex-wrap:wrap;border-right:0;border-bottom:1px solid #e2e5e0;padding:.6rem 1rem}.sidebar-title{display:none}.shell{width:min(100% - 2rem,72rem)}}
@media(max-width:620px){.hero{grid-template-columns:1fr;gap:1.25rem}.tag{display:none}.features{grid-template-columns:1fr}}
[hidden]{display:none!important}
.workspace{padding:0;border:0;background:transparent;margin-top:3rem}
.workspace h2{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.25;letter-spacing:-.045em}
.workspace .actions{margin-bottom:2rem}.workspace .eyebrow{margin-bottom:.35rem}
.settings-section{margin:0 0 2rem;padding:1.2rem;background:#fff;border:1px solid #dce3dc;border-radius:.65rem}
.directory-head,.key-form,.key-row,.session-row{display:flex;align-items:center;gap:.75rem}
.directory-head{justify-content:space-between;margin-bottom:.9rem}.directory-head h3{margin:0}.directory-head p,.meta,.notice{font-size:.875rem;color:#535e57}
input,select{border:1px solid #dce3dc;background:#fff;border-radius:.4rem;color:inherit;padding:.55rem .7rem;font:inherit;max-width:100%}
.directory{display:grid;gap:.5rem}.member{border:1px solid #dce3dc;border-radius:.5rem;padding:.65rem .85rem}
summary{cursor:pointer;font-weight:700;overflow-wrap:anywhere}.channel{margin:.55rem 0 0 .8rem;padding:.4rem .5rem;background:#f5f7f4;border-radius:.35rem}.channel summary{font-size:.9rem}
.session-row,.key-row{justify-content:space-between;align-items:flex-start;flex-wrap:wrap;padding:.55rem .2rem}.session-row+.session-row,.key-row+.key-row{border-top:1px solid #e3e8e3}
.session-info{min-width:0;overflow-wrap:anywhere}.session-name{font-weight:700}.badges,.key-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.badge{border-radius:999px;background:#ecf0ed;color:#46534a;padding:.15rem .55rem;font-size:.75rem;white-space:nowrap}.badge.online{background:#def3e4;color:#215e3a}
.key-row code{overflow-wrap:anywhere;word-break:break-all}.key-row .button{padding:.3rem .6rem;font-size:.85rem}.danger{color:#982d32}
.notice:empty{display:none}.notice{margin:.65rem 0!important}
.session-group-block{border:1px solid #dce3dc;border-radius:.55rem;padding:.65rem}.session-group-block summary{margin:.15rem 0 .55rem}
dialog{width:min(29rem,calc(100% - 2rem));border:1px solid #dce3dc;border-radius:.65rem;padding:1.25rem;color:inherit}
dialog::backdrop{background:#17221d70}dialog form{display:grid;gap:.65rem}dialog h3{margin:0 0 .35rem}
dialog label{font-weight:700}dialog .key-actions{justify-content:flex-end;margin-top:.5rem}
.badges{align-items:center}.badges .button{padding:.15rem .55rem;font-size:.75rem}
@media(max-width:620px){.directory-head,.key-form{flex-wrap:wrap}.channel{margin-left:0}}

.profile-row,.channel-feature{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.85rem 0}
.profile-row+.profile-row{border-top:1px solid #e3e8e3}.profile-row label,.profile-row span{font-weight:650}.profile-row code{overflow-wrap:anywhere}
.profile-row h4,.channel-feature h4{margin:0 0 .2rem}.channel-feature{padding:1.15rem;border-radius:.55rem;background:#edf3ed}.channel-feature img{object-fit:contain}.channel-feature p{margin-bottom:.7rem}
.roster-head{margin:1.15rem 0}.member-meta{margin:.3rem 0 0 1rem}#invite-list{margin-top:.65rem}
.workspace{margin-top:2rem}.workspace .actions{margin-bottom:1.5rem}.workspace h2{font-size:clamp(1.6rem,3vw,2.25rem)}
.settings-section{padding:1.35rem 1.5rem;border-color:#e3e6e3;background:#fff}.directory-head{gap:1rem;margin-bottom:1.25rem}
.brand{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:.5rem;background:#192b22}.brand img{display:block}
.account{position:relative;margin-left:auto}.account summary{display:grid;place-items:center;list-style:none;width:2.5rem;height:2.5rem;border-radius:50%;background:#25352c;color:#fff}
.account summary::-webkit-details-marker{display:none}.account-panel{position:absolute;top:calc(100% + .65rem);right:0;z-index:5;min-width:min(17rem,calc(100vw - 2rem));padding:.4rem;background:#fff;border:1px solid #e3e6e3;border-radius:.5rem;box-shadow:0 .5rem 1.6rem #14201916}
.account-identity{display:grid;gap:.1rem;padding:.7rem .75rem;border-bottom:1px solid #e3e6e3;overflow-wrap:anywhere}.account-identity span{color:#535e57;font-size:.85rem}
.account-panel a,.account-panel button{display:block;width:100%;padding:.55rem .75rem;text-align:left;text-decoration:none;border:0;border-radius:.25rem;background:transparent;color:inherit;cursor:pointer}
.account-panel a:hover,.account-panel button:hover{background:#f0f3f0}
.table-wrap{overflow-x:auto;border:1px solid #e3e6e3;border-radius:.45rem}
.data-table{width:100%;border-collapse:collapse;text-align:left;white-space:normal}.data-table :is(th,td){padding:.72rem .9rem;vertical-align:middle;overflow-wrap:anywhere}
.data-table thead th{background:#f7f8f7;color:#535e57;font-size:.8rem;font-weight:700;white-space:nowrap}
.data-table tbody tr{border-top:1px solid #e3e6e3}.data-table tbody th{font-weight:650}
.data-table :is(th,td):last-child{text-align:right}.data-table .key-actions{justify-content:flex-end;flex-wrap:nowrap}
.data-table .button{padding:.3rem .55rem;font-size:.82rem;white-space:nowrap}
.profile-table{min-width:22rem}.profile-table th:first-child{width:25%}.profile-table th:last-child{width:5rem}
.member-table{min-width:37rem}.session-table{min-width:42rem}.invite-table{min-width:25rem}
.key-table{min-width:30rem}.key-table code{white-space:nowrap}
.session-table :is(th,td):nth-child(9){display:none}.session-table :is(th,td):nth-child(8){text-align:right}
@media(max-width:800px){
 .session-table{display:block;min-width:0}.session-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .session-table tbody{display:block}.session-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:.65rem .75rem;gap:.25rem .5rem}
 .session-table tbody tr:first-child{border-top:0}.session-table tbody td{padding:0}
 .session-table td:nth-child(1){grid-column:1;grid-row:1}
 .session-table td:nth-child(2){grid-column:1/-1;color:#535e57;font-size:.85rem}
 .session-table td:nth-child(2)::before{content:'채널 · '}
 .session-table td:nth-child(n+3):nth-child(-n+5),.session-table td:nth-child(7){display:none}
 .session-table td:nth-child(6){grid-column:1/-1;color:#535e57;font-size:.85rem}
 .session-table td:nth-child(6)::before{content:'설명 · '}
 .session-table td:nth-child(8){grid-column:2;grid-row:1}
 .session-table td:nth-child(9){display:block;grid-column:1/-1;text-align:left;margin-top:.2rem}
}
@media(max-width:620px){
 .settings-section{padding:1rem}.data-table :is(th,td){padding:.6rem .7rem}
 .profile-table{min-width:0;table-layout:fixed}.profile-table th:first-child{width:34%}.profile-table th:last-child{width:4.4rem}
 .profile-table :is(th,td){padding:.6rem .5rem}
 :is(.member-table,.invite-table,.key-table){display:block;min-width:0}
 :is(.member-table,.invite-table,.key-table) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 :is(.member-table,.invite-table,.key-table) tbody{display:block}
 :is(.member-table,.invite-table,.key-table) tr{display:block;padding:.55rem .75rem}
 :is(.member-table,.invite-table,.key-table) td{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:.55rem;text-align:left;padding:.2rem 0}
 :is(.member-table,.invite-table,.key-table) td:not(:last-child)::before{content:attr(data-label);color:#535e57;font-size:.78rem}
 :is(.member-table,.invite-table,.key-table) td:last-child{display:block;text-align:right}
 .key-table code{white-space:normal}
}

