@charset "utf-8";

/* SPIDO Client board skin */
.spido-client,
.spido-client-view,
.spido-client-write { width:100%; color:var(--spido-text,#f4f4f4); }
.spido-client *,
.spido-client-view *,
.spido-client-write * { box-sizing:border-box; }
.spido-client__eyebrow { margin:0 0 14px; color:var(--spido-accent,#4d8dff); font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }

.spido-client__header { position:relative; display:flex; min-height:clamp(300px,34vw,440px); margin-top:clamp(20px,3vw,40px); padding:clamp(38px,5vw,72px); align-items:flex-end; border-radius:16px; isolation:isolate; overflow:hidden; }
.spido-client__header-media { position:absolute; inset:0; z-index:-2; }
.spido-client__header-media img { display:block; width:100%; height:100%; object-fit:cover; animation:spido-client-hero 16s cubic-bezier(.2,.7,.2,1) both; }
.spido-client__header::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.6) 55%,rgba(8,8,8,.28) 100%),linear-gradient(0deg,rgba(8,8,8,.9) 0%,transparent 62%); }
.spido-client__header-inner { max-width:760px; }
.spido-client__header h2 { margin:0; font-size:clamp(2.4rem,5.5vw,5.5rem); font-weight:750; line-height:.98; }
.spido-client__header-inner>p:last-child { margin:20px 0 0; color:var(--spido-text-sub,#aaa); font-size:clamp(.95rem,1.2vw,1.1rem); }
@keyframes spido-client-hero { from { transform:scale(1.09); } to { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
    .spido-client__header-media img { animation:none; }
}
.spido-client__toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 0 42px; border-bottom:1px solid var(--spido-line-soft,#222); margin-bottom:42px; }
.spido-client__category ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.spido-client__category a { display:block; padding:9px 16px; border:1px solid var(--spido-line,#383838); border-radius:999px; color:var(--spido-text-sub,#aaa); font-size:.85rem; }
.spido-client__category a:hover,
.spido-client__category #bo_cate_on { border-color:var(--spido-accent,#4d8dff); background:var(--spido-accent,#4d8dff); color:#fff; }
.spido-client__actions { display:flex; align-items:center; gap:8px; }
.spido-client__search { display:flex; height:42px; border:1px solid var(--spido-line,#383838); border-radius:999px; overflow:hidden; }
.spido-client__search input { width:170px; padding:0 0 0 16px; border:0; background:transparent; color:#fff; outline:0; }
.spido-client__search button,
.spido-client__icon { display:grid; width:42px; border:0; place-items:center; background:transparent; color:#fff; }
.spido-client__search .fa,
.spido-client__icon .fa,
.spido-client-card__video .fa,
.spido-client-view .fa { font-family:FontAwesome; }
.spido-client__write { display:inline-flex; min-height:42px; padding:0 18px; align-items:center; border-radius:999px; background:var(--spido-accent,#4d8dff); color:#fff; font-size:.85rem; font-weight:700; }
.spido-client__icon { border:1px solid var(--spido-line,#383838); border-radius:50%; }
.spido-client__adminbar { display:flex; gap:10px; margin-bottom:24px; align-items:center; color:var(--spido-text-sub,#aaa); font-size:.8rem; }
.spido-client__adminbar button { padding:7px 12px; border:1px solid var(--spido-line,#383838); border-radius:999px; background:transparent; color:inherit; }

.spido-client__grid { display:grid; grid-template-columns:repeat(var(--client-cols, 4), minmax(0, 1fr)); gap:clamp(24px,3vw,40px) 14px; align-items:stretch; }
.spido-client-card { position:relative; display:flex; min-width:0; height:100%; flex-direction:column; }
.spido-client-card__check { position:absolute; z-index:2; top:12px; left:12px; display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:rgba(8,8,8,.76); }
.spido-client-card__logo { position:relative; display:flex; flex:0 0 auto; width:100%; aspect-ratio:16/10; padding:0; align-items:center; justify-content:center; border:1px solid var(--spido-line-soft,#222); border-radius:12px; background:#161616; overflow:hidden; transition:border-color .25s ease,background .25s ease; }
.spido-client-card__logo:hover { border-color:#4a4a4a; background:#1b1b1d; }
.spido-client-card__logo img { display:block; width:72%; height:56%; object-fit:contain; object-position:center; filter:grayscale(1) brightness(1.35) contrast(1.06); opacity:.92; transition:filter .35s ease,opacity .35s ease,transform .55s ease; }
.spido-client-card:hover .spido-client-card__logo img { filter:none; opacity:1; transform:scale(1.04); }
.spido-client-card__logo>strong { max-width:80%; color:#ddd; font-size:clamp(1rem,1.6vw,1.4rem); text-align:center; }
.spido-client-card__video,
.spido-client-card__main { position:absolute; z-index:1; padding:7px 10px; border-radius:999px; background:rgba(8,8,8,.76); color:#fff; font-size:.68rem; }
.spido-client-card__video { right:12px; bottom:12px; }
.spido-client-card__main { top:12px; right:12px; }
.spido-client-card__body { display:flex; flex:1 1 auto; min-height:0; padding-top:14px; flex-direction:column; }
.spido-client-card__body>p:first-child { margin:0 0 6px; min-height:1em; color:var(--spido-accent,#4d8dff); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.spido-client-card h3 { display:-webkit-box; margin:0; min-height:2.5em; overflow:hidden; font-size:clamp(1rem,1.15vw,1.2rem); line-height:1.25; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.spido-client-card h3 a { color:inherit; }
.spido-client-card__body>span { display:block; min-height:1.2em; margin-top:4px; overflow:hidden; color:var(--spido-text-dim,#777); font-size:.78rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.spido-client-card__summary { display:-webkit-box; margin:8px 0 0!important; min-height:2.7em; overflow:hidden; color:var(--spido-text-sub,#aaa)!important; font-size:.8rem!important; font-weight:400!important; letter-spacing:0!important; line-height:1.35!important; text-transform:none!important; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.spido-client__empty { grid-column:1/-1; padding:120px 20px; border-block:1px solid var(--spido-line-soft,#222); color:var(--spido-text-dim,#777); text-align:center; }
.spido-client__empty strong { display:block; color:#fff; font-size:1.4rem; }
.spido-client .pg_wrap { display:block; margin:72px 0 0; text-align:center; }
.spido-client .pg_page,
.spido-client .pg_current { display:inline-grid; min-width:38px; height:38px; margin:2px; place-items:center; border:1px solid var(--spido-line,#383838); border-radius:50%; background:transparent; color:#aaa; }
.spido-client .pg_current { border-color:var(--spido-accent,#4d8dff); background:var(--spido-accent,#4d8dff); color:#fff; }

/* 상세 */
.spido-client-view__crumb { display:flex; gap:9px; padding:clamp(30px,4vw,54px) 0 0; align-items:center; color:var(--spido-text-dim,#777); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.spido-client-view__crumb a { color:var(--spido-text-sub,#aaa); }
.spido-client-view__crumb em { font-style:normal; color:var(--spido-accent,#4d8dff); }
.spido-client-view__hero { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:clamp(28px,4vw,60px); padding:clamp(26px,3vw,44px) 0 clamp(34px,4vw,58px); align-items:center; border-bottom:1px solid var(--spido-line-soft,#222); }
.spido-client-view__logo { display:grid; aspect-ratio:5/3; min-height:140px; padding:24px 22px; place-items:center; border:1px solid var(--spido-line-soft,#222); border-radius:14px; background:#161616; }
.spido-client-view__logo img { display:block; width:100%; height:100%; max-height:96px; object-fit:contain; object-position:center; }
.spido-client-view__logo strong { font-size:1.4rem; text-align:center; }
.spido-client-view__heading { min-width:0; }
.spido-client-view__heading h2 { margin:0; font-size:clamp(1.9rem,3.6vw,3.2rem); font-weight:700; line-height:1.1; }
.spido-client-view__meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 0; align-items:center; color:var(--spido-text-dim,#777); font-size:.85rem; }
.spido-client-view__meta a { display:inline-flex; gap:7px; align-items:center; color:var(--spido-text-sub,#aaa); border-bottom:1px solid #4a4a4a; }
.spido-client-view__intro { max-width:760px; margin:18px 0 0; color:var(--spido-text-sub,#aaa); font-size:1rem; line-height:1.7; }
.spido-client-videos { padding:clamp(50px,6vw,88px) 0; border-bottom:1px solid var(--spido-line-soft,#222); }
.spido-client-videos__head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px; }
.spido-client-videos__head h3 { margin:0; font-size:clamp(1.5rem,2.6vw,2.2rem); }
.spido-client-videos__head>span { color:var(--spido-text-dim,#777); font-size:.78rem; letter-spacing:.12em; }
.spido-client-videos__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 20px; }
.spido-client-video__media { position:relative; display:block; width:100%; padding:0; aspect-ratio:16/9; border:0; border-radius:12px; background:#111; overflow:hidden; cursor:pointer; }
.spido-client-video__media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.spido-client-video:hover img { transform:scale(1.05); }
.spido-client-video__play { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:.95rem; background:linear-gradient(to top,rgba(0,0,0,.45),transparent 60%); }
.spido-client-video__play::before { content:""; position:absolute; width:54px; height:54px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(8,8,8,.45); transition:background .25s ease,transform .25s ease; }
.spido-client-video:hover .spido-client-video__play::before { background:var(--spido-accent,#4d8dff); transform:scale(1.07); }
.spido-client-video__play .fa { position:relative; margin-left:3px; }
.spido-client-video__no { position:absolute; top:12px; left:12px; padding:5px 9px; border-radius:999px; background:rgba(8,8,8,.72); color:#fff; font-size:.68rem; }
.spido-client-video h4 { margin:13px 0 0; font-size:.98rem; font-weight:600; line-height:1.5; }
.spido-client-view__content { display:grid; grid-template-columns:minmax(180px,.35fr) minmax(0,1fr); gap:clamp(40px,8vw,130px); padding:clamp(60px,7vw,110px) 0; }
.spido-client-view__body { color:var(--spido-text-sub,#aaa); line-height:1.9; }
.spido-client-view__body img { max-width:100%; height:auto; }
.spido-client-view__cta { display:flex; padding:clamp(32px,4.5vw,58px); align-items:center; justify-content:space-between; gap:25px; border:1px solid var(--spido-line,#383838); border-radius:14px; background:#101010; }
.spido-client-view__cta h3 { margin:0; font-size:clamp(1.5rem,2.8vw,2.6rem); }
.spido-client-view__cta a,
.spido-client-view__buttons .is-primary { display:inline-flex; min-height:50px; padding:0 24px; align-items:center; border-radius:999px; background:var(--spido-accent,#4d8dff); color:#fff; font-weight:700; white-space:nowrap; }
.spido-client-view__buttons { display:flex; padding:30px 0; justify-content:space-between; gap:10px; }
.spido-client-view__buttons a { display:inline-flex; min-height:44px; padding:0 18px; align-items:center; border:1px solid var(--spido-line,#383838); border-radius:999px; color:#fff; }

/* 작성 */
.spido-client-write { max-width:1080px; margin:0 auto; }
.spido-client-write__head { padding:clamp(52px,7vw,100px) 0 40px; border-bottom:1px solid var(--spido-line-soft,#222); }
.spido-client-write__head h2 { margin:0; font-size:clamp(2.2rem,5vw,4.5rem); }
.spido-client-write__section { padding:34px 0; border-bottom:1px solid var(--spido-line-soft,#222); }
.spido-client-write__section h3 { margin:0 0 22px; font-size:1.25rem; }
.spido-client-write__section-head { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.spido-client-write__section-head h3 { margin-bottom:8px; }
.spido-client-write__help { margin:0 0 18px; color:var(--spido-text-dim,#777); font-size:.82rem; }
.spido-client-write__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.spido-client-field { display:block; }
.spido-client-field--full { grid-column:1/-1; }
.spido-client-field>span,
.spido-client-video-field label>span { display:block; margin-bottom:9px; color:var(--spido-text-sub,#aaa); font-size:.8rem; font-weight:700; }
.spido-client-field small { display:block; margin-top:7px; color:var(--spido-text-dim,#777); }
.spido-client-write input[type=text],
.spido-client-write input[type=url],
.spido-client-write input[type=number],
.spido-client-write input[type=password],
.spido-client-write select,
.spido-client-write textarea { width:100%; min-height:48px; border:1px solid var(--spido-line,#383838); border-radius:4px; background:#101010; color:#fff; }
.spido-client-write textarea { min-height:110px; padding:14px; resize:vertical; }
.spido-client-write .wr_content iframe { background:#fff; }
.spido-client-write__files { display:grid; gap:12px; }
.spido-client-write__file { padding:16px; border:1px solid var(--spido-line,#383838); background:#101010; }
.spido-client-write__file>label:first-child { display:block; margin-bottom:12px; }
.spido-client-write__delete { display:block; margin-top:10px; color:#aaa; font-size:.8rem; }
.spido-client-video-add { padding:10px 16px; border:1px solid var(--spido-accent,#4d8dff); border-radius:999px; background:transparent; color:#fff; }
.spido-client-video-fields { display:grid; gap:12px; }
.spido-client-video-field { position:relative; display:grid; grid-template-columns:.8fr 1.7fr 100px; gap:12px; padding:18px 54px 18px 18px; border:1px solid var(--spido-line,#383838); background:#101010; }
.spido-client-video-remove { position:absolute; top:18px; right:14px; width:30px; height:30px; border:1px solid var(--spido-line,#383838); border-radius:50%; background:transparent; color:#fff; font-size:1.2rem; }
.spido-client-write__actions { display:flex; padding:34px 0 80px; justify-content:flex-end; gap:10px; }
.spido-client-write__actions a,
.spido-client-write__actions button { display:inline-flex; min-height:50px; padding:0 24px; align-items:center; border:1px solid var(--spido-line,#383838); border-radius:999px; background:transparent; color:#fff; font:inherit; font-weight:700; }
.spido-client-write__actions button { border-color:var(--spido-accent,#4d8dff); background:var(--spido-accent,#4d8dff); }

@media (max-width:1280px) {
    .spido-client__grid[data-cols="5"],
    .spido-client__grid[data-cols="6"],
    .spido-client__grid[data-cols="7"],
    .spido-client__grid[data-cols="8"] { --client-cols:4; }
}
@media (max-width:1000px) {
    .spido-client__grid { --client-cols:3; }
    .spido-client__grid[data-cols="2"] { --client-cols:2; }
    .spido-client-videos__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .spido-client-view__hero { grid-template-columns:minmax(0,170px) minmax(0,1fr); }
    .spido-client-video-field { grid-template-columns:1fr 1.6fr 90px; }
}
@media (max-width:760px) {
    .spido-client__toolbar,
    .spido-client-view__cta { align-items:flex-start; flex-direction:column; }
    .spido-client__actions { width:100%; flex-wrap:wrap; }
    .spido-client__search { flex:1; }
    .spido-client__search input { width:100%; }
    .spido-client__grid { --client-cols:2; }
    .spido-client-videos__grid,
    .spido-client-write__grid,
    .spido-client-view__content { grid-template-columns:1fr; }
    .spido-client-view__hero { grid-template-columns:1fr; gap:22px; }
    .spido-client-view__logo { max-width:190px; aspect-ratio:3/2; }
    .spido-client-field--full { grid-column:auto; }
    .spido-client-video-field { grid-template-columns:1fr; }
    .spido-client-view__buttons { align-items:flex-start; flex-direction:column; }
}
@media (max-width:480px) {
    .spido-client__grid { --client-cols:1; }
}