@charset "utf-8";

/* SPIDO WEB·Mobile board skin */
.spido-webwork,
.spido-webcase,
.spido-webwork-write { width:100%; color:var(--spido-text,#f4f4f4); }
.spido-webwork *,
.spido-webcase *,
.spido-webwork-write * { box-sizing:border-box; }
.spido-webwork__eyebrow { margin:0 0 14px; color:#3ce36c; font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }

.spido-webwork__header { padding:clamp(56px,8vw,120px) 0 clamp(40px,5vw,72px); border-bottom:1px solid var(--spido-line-soft,#222); }
.spido-webwork__header h2 { max-width:980px; margin:0; font-size:clamp(2.7rem,6vw,6rem); font-weight:750; line-height:.98; }
.spido-webwork__header>p:last-child { max-width:760px; margin:25px 0 0; color:var(--spido-text-sub,#aaa); font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.7; }
.spido-webwork__toolbar { display:flex; padding:28px 0 42px; align-items:center; justify-content:space-between; gap:24px; }
.spido-webwork__category ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.spido-webwork__category a { display:block; padding:9px 16px; border:1px solid #383838; border-radius:999px; color:#aaa; font-size:.85rem; }
.spido-webwork__category a:hover,
.spido-webwork__category #bo_cate_on { border-color:#3ce36c; background:#3ce36c; color:#071009; }
.spido-webwork__actions { display:flex; align-items:center; gap:8px; }
.spido-webwork__search { display:flex; height:42px; border:1px solid #383838; border-radius:999px; overflow:hidden; }
.spido-webwork__search input { width:160px; padding-left:16px; border:0; background:transparent; color:#fff; outline:0; }
.spido-webwork__search button,
.spido-webwork__setting { display:grid; width:42px; border:0; place-items:center; background:transparent; color:#fff; }
.spido-webwork__setting { height:42px; border:1px solid #383838; border-radius:50%; }
.spido-webwork__write { display:inline-flex; min-height:42px; padding:0 18px; align-items:center; border-radius:999px; background:#3ce36c; color:#071009; font-size:.85rem; font-weight:750; }
.spido-webwork .fa,
.spido-webcase .fa { font-family:FontAwesome; }
.spido-webwork__adminbar { display:flex; gap:10px; margin-bottom:20px; align-items:center; color:#aaa; font-size:.8rem; }
.spido-webwork__adminbar button { padding:7px 12px; border:1px solid #383838; border-radius:999px; background:transparent; color:inherit; }

.spido-webwork__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(38px,5vw,72px) 20px; }
.spido-webwork-card { position:relative; min-width:0; }
.spido-webwork-card__check { position:absolute; z-index:5; top:12px; left:12px; display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:rgba(8,8,8,.78); }

/* 데스크톱·모바일 화면을 실제 기기처럼 보여주는 공통 프레임 */
.spido-webwork-device { position:relative; display:block; aspect-ratio:16/11; padding:clamp(22px,3vw,42px); border-radius:14px; background:linear-gradient(145deg,#1a1a1a,#0d0d0d); overflow:hidden; }
.spido-webwork-device__desktop { position:relative; display:block; width:100%; height:100%; padding-top:22px; border:1px solid #3a3a3a; border-radius:8px 8px 4px 4px; background:#161616; box-shadow:0 18px 45px rgba(0,0,0,.35); overflow:hidden; }
.spido-webwork-device__desktop>i { position:absolute; top:0; right:0; left:0; display:flex; height:22px; padding-left:9px; align-items:center; gap:5px; background:#252525; }
.spido-webwork-device__desktop>i b { display:block; width:5px; height:5px; border-radius:50%; background:#666; }
.spido-webwork-device__desktop img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.spido-webwork-device__desktop>strong { display:grid; height:100%; place-items:center; color:#555; letter-spacing:.16em; }
.spido-webwork-device__mobile { position:absolute; right:9%; bottom:7%; z-index:2; display:block; width:23%; aspect-ratio:9/18.5; padding:4px; border:1px solid #555; border-radius:12px; background:#080808; box-shadow:0 14px 34px rgba(0,0,0,.55); overflow:hidden; }
.spido-webwork-device__mobile::before { content:""; position:absolute; top:5px; left:50%; z-index:2; width:28%; height:3px; border-radius:3px; background:#333; transform:translateX(-50%); }
.spido-webwork-device__mobile img { width:100%; height:100%; border-radius:8px; object-fit:cover; object-position:top; }
.spido-webwork-device--mobile .spido-webwork-device__desktop { display:none; }
.spido-webwork-device--mobile .spido-webwork-device__mobile { top:7%; right:auto; bottom:7%; left:50%; width:auto; height:86%; transform:translateX(-50%); }
.spido-webwork-device:hover .spido-webwork-device__desktop img { transform:scale(1.035); }
.spido-webwork-device__view { position:absolute; right:16px; bottom:14px; z-index:3; display:flex; gap:8px; align-items:center; color:#fff; font-size:.68rem; letter-spacing:.12em; opacity:0; transform:translateY(5px); transition:opacity .25s ease,transform .25s ease; }
.spido-webwork-device:hover .spido-webwork-device__view { opacity:1; transform:none; }
.spido-webwork-device__order { position:absolute; top:12px; right:12px; z-index:3; padding:6px 9px; border-radius:999px; background:rgba(8,8,8,.76); color:#fff; font-size:.65rem; }
.spido-webwork-card__body { padding-top:18px; }
.spido-webwork-card__body>p:first-child { display:flex; gap:16px; margin:0; color:#3ce36c; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.spido-webwork-card h3 { margin:9px 0 0; font-size:clamp(1.2rem,1.8vw,1.55rem); line-height:1.35; }
.spido-webwork-card h3 a { color:inherit; }
.spido-webwork-card small { display:block; margin-top:6px; color:#777; }
.spido-webwork-card__summary { margin:11px 0 0!important; color:#aaa!important; font-size:.86rem!important; line-height:1.65; letter-spacing:0!important; text-transform:none!important; }
.spido-webwork__empty { grid-column:1/-1; padding:120px 20px; border-block:1px solid #222; color:#777; text-align:center; }
.spido-webwork__empty strong { display:block; color:#fff; font-size:1.4rem; }
.spido-webwork .pg_wrap { display:block; margin:72px 0 0; text-align:center; }
.spido-webwork .pg_page,
.spido-webwork .pg_current { display:inline-grid; min-width:38px; height:38px; margin:2px; place-items:center; border:1px solid #383838; border-radius:50%; color:#aaa; }
.spido-webwork .pg_current { border-color:#3ce36c; background:#3ce36c; color:#071009; }

/* 상세 */
.spido-webcase__crumb { display:flex; gap:9px; padding:clamp(32px,4vw,56px) 0 0; color:#777; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; }
.spido-webcase__crumb a { color:#aaa; }
.spido-webcase__crumb em { color:#3ce36c; font-style:normal; }
.spido-webcase__head { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:clamp(40px,8vw,130px); padding:clamp(42px,6vw,90px) 0; align-items:end; }
.spido-webcase__head h2 { max-width:14ch; margin:0; font-size:clamp(2.7rem,6vw,6rem); font-weight:750; line-height:.98; }
.spido-webcase__head>div>p:last-child { max-width:700px; margin:25px 0 0; color:#aaa; font-size:clamp(1rem,1.4vw,1.25rem); line-height:1.7; }
.spido-webcase__head dl { margin:0; }
.spido-webcase__head dl div { display:grid; grid-template-columns:70px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid #282828; }
.spido-webcase__head dt { color:#777; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.spido-webcase__head dd { margin:0; color:#aaa; word-break:break-word; }
.spido-webcase__head dd a { color:#3ce36c; }
.spido-webcase__showcase { padding:clamp(24px,4vw,60px); border-radius:16px; background:#101010; }
.spido-webcase__showcase .spido-webwork-device { max-width:1320px; margin:auto; aspect-ratio:16/10; padding:clamp(18px,3vw,48px); }
.spido-webcase__showcase .spido-webwork-device--mobile { aspect-ratio:16/10; }
.spido-webcase__showcase .spido-webwork-device__view,
.spido-webcase__showcase .spido-webwork-device__order { display:none; }
.spido-webcase__overview { display:grid; grid-template-columns:minmax(180px,.35fr) minmax(0,1fr); gap:clamp(40px,8vw,130px); padding:clamp(70px,9vw,140px) 0; }
.spido-webcase__overview>div { color:#aaa; font-size:1rem; line-height:1.9; }
.spido-webcase__overview img { max-width:100%; height:auto; }
.spido-webcase__screens { padding:clamp(70px,9vw,140px) 0; border-top:1px solid #222; }
.spido-webcase__screens>header { display:grid; grid-template-columns:1fr auto; align-items:end; margin-bottom:34px; }
.spido-webcase__screens>header .spido-webwork__eyebrow { grid-column:1/-1; }
.spido-webcase__screens h3 { margin:0; font-size:clamp(2rem,4vw,4rem); }
.spido-webcase__screens>header>span { color:#777; font-size:.75rem; letter-spacing:.12em; }
.spido-webcase__screens-grid { display:grid; gap:28px; }
.spido-webcase__screens figure { margin:0; padding:clamp(10px,2vw,22px); border:1px solid #282828; border-radius:14px; background:#101010; overflow:hidden; }
.spido-webcase__screens figure img { display:block; width:100%; height:auto; border-radius:7px; }
.spido-webcase__screens figcaption { padding:14px 4px 2px; color:#777; font-size:.8rem; }
.spido-webcase__cta { display:flex; padding:clamp(34px,5vw,68px); align-items:center; justify-content:space-between; gap:25px; border:1px solid #383838; border-radius:14px; background:#101010; }
.spido-webcase__cta h3 { margin:0; font-size:clamp(1.6rem,3vw,3rem); }
.spido-webcase__cta a,
.spido-webcase__buttons .is-primary { display:inline-flex; min-height:50px; padding:0 24px; align-items:center; border-radius:999px; background:#3ce36c; color:#071009; font-weight:750; white-space:nowrap; }
.spido-webcase__buttons { display:flex; padding:30px 0; justify-content:space-between; }
.spido-webcase__buttons a { display:inline-flex; min-height:44px; padding:0 18px; align-items:center; border:1px solid #383838; border-radius:999px; color:#fff; }

/* 작성 */
.spido-webwork-write { max-width:1060px; margin:0 auto; }
.spido-webwork-write__head { padding:clamp(52px,7vw,100px) 0 40px; border-bottom:1px solid #222; }
.spido-webwork-write__head h2 { margin:0; font-size:clamp(2.2rem,5vw,4.5rem); }
.spido-webwork-write__section { padding:34px 0; border-bottom:1px solid #222; }
.spido-webwork-write__section h3 { margin:0 0 22px; font-size:1.22rem; }
.spido-webwork-write__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.spido-webwork-field--full { grid-column:1/-1; }
.spido-webwork-field>span { display:block; margin-bottom:9px; color:#aaa; font-size:.8rem; font-weight:700; }
.spido-webwork-field small,
.spido-webwork-write__help { display:block; margin:8px 0 0; color:#777; font-size:.78rem; line-height:1.6; }
.spido-webwork-write__help { margin-bottom:18px; }
.spido-webwork-write input[type=text],
.spido-webwork-write input[type=url],
.spido-webwork-write input[type=number],
.spido-webwork-write input[type=password],
.spido-webwork-write select,
.spido-webwork-write textarea { width:100%; min-height:48px; border:1px solid #383838; border-radius:5px; background:#101010; color:#fff; }
.spido-webwork-write textarea { min-height:110px; padding:14px; resize:vertical; }
.spido-webwork-write .wr_content iframe { background:#fff; }
.spido-webwork-write__files { display:grid; gap:12px; }
.spido-webwork-write__file { padding:16px; border:1px solid #383838; border-radius:6px; background:#101010; }
.spido-webwork-write__file>label:first-child { display:block; margin-bottom:12px; }
.spido-webwork-write__delete { display:block; margin-top:10px; color:#aaa; font-size:.8rem; }
.spido-webwork-write__actions { display:flex; padding:34px 0 80px; justify-content:flex-end; gap:10px; }
.spido-webwork-write__actions a,
.spido-webwork-write__actions button { display:inline-flex; min-height:50px; padding:0 24px; align-items:center; border:1px solid #383838; border-radius:999px; background:transparent; color:#fff; font:inherit; font-weight:700; }
.spido-webwork-write__actions button { border-color:#3ce36c; background:#3ce36c; color:#071009; }

@media (max-width:1000px) {
    .spido-webwork__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .spido-webcase__head,
    .spido-webcase__overview { grid-template-columns:1fr; }
    .spido-webcase__head dl { max-width:560px; }
}
@media (max-width:680px) {
    .spido-webwork__toolbar,
    .spido-webcase__cta { align-items:flex-start; flex-direction:column; }
    .spido-webwork__actions { width:100%; flex-wrap:wrap; }
    .spido-webwork__search { flex:1; }
    .spido-webwork__search input { width:100%; }
    .spido-webwork__grid,
    .spido-webwork-write__grid { grid-template-columns:1fr; }
    .spido-webwork-field--full { grid-column:auto; }
    .spido-webwork-device { aspect-ratio:16/10; }
    .spido-webcase__buttons { align-items:flex-start; flex-direction:column; gap:10px; }
}