/* 홈 (운영, 2026-10-21 승격) — 유리 히어로 + 왼쪽 내 도구 사이드바. 시험판은 home-glass-test.php + css/home-glass-test.css
   대장님 두 번째 시안: 아주 옅은 청회색 바탕, 라벤더 그라디언트 히어로에 유리 큐브, 카드마다 색 사각 아이콘 + 꺾쇠,
   모든 도구 카드 뒤 보라 번짐, 위젯 안 크레딧 소카드, 흰 푸터. 가이드 8장은 이번 한 번 예외. 운영 index.php 에는 링크하지 않는다. */
html:root{
  --paper:#f4f6fa; --paper-2:#e9ecf3;
  --ink:#141a2e; --ink-soft:#3b4262; --ink-mute:#7c829a;
  --line:rgba(20,26,46,.11); --line-soft:rgba(20,26,46,.065);
  --accent:#10306b; --accent-green:#1f9d5a;
  --card-line:#e4e8f1; --card-shadow:0 1px 2px rgba(20,26,46,.04),0 12px 30px -18px rgba(20,26,46,.18);
  --lav-1:#e8e4fb; --lav-2:#dfe7fc; --lav-3:#f4e9f6;
}
html:root{--nav-accent-primary:#10306b;--nav-accent-dark:#082541;--nav-bg:rgba(255,255,255,.9);--nav-border:rgba(20,26,46,.06)}
::selection{background:var(--accent);color:#fff}
.navbar .nav-beta{background:var(--accent);color:#fff}
body{background:var(--paper)}

/* 틀: 사이드바는 히어로+내 도구 높이만, 모든 도구·위젯 카드는 좌우로 꽉 차게 (2026-10-20 대장님 3차 지시)
   .gl-main 은 display:contents 로 풀어 히어로·도크가 직접 격자 칸이 된다. 사이드바는 높이 0 으로 두고 아래로 흘러넘쳐
   내 도구 선반 옆에 선다(선반만 사이드바 폭만큼 들여쓰기) */
.gl-wrap{display:grid;grid-template-columns:184px minmax(0,1fr);column-gap:24px;max-width:none;margin:0;padding:24px 32px 0} /* 좌우 32px = 네비·푸터 컨테이너와 같은 기준선 (2026-10-21 오와열 검수) */ /* body 가 네비 높이(64px)만큼 이미 띄움 — 2026-10-20 대장님 "상단 여백 너무 크다" 92→28 */
.gl-side{grid-column:1;grid-row:1;height:0;overflow:visible;padding-top:0}
.gl-side-h{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);padding:0 10px 10px}
.gl-side-list{display:flex;flex-direction:column;gap:2px;width:184px}
.gl-side-list a{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:10px;font-size:13.5px;color:var(--ink-soft);transition:background .15s ease,color .15s ease;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-side-list a:hover{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--card-line)}
.gl-side-list a:first-child{background:#e8edf5;color:var(--accent);font-weight:600}
.gl-side-list a .dk-ic{flex:none;width:18px;height:18px;color:currentColor}
.gl-side-list a .dk-ic svg{width:18px;height:18px}
.gl-side-list a span{overflow:hidden;text-overflow:ellipsis}
.gl-main{display:contents}
.gl-hero{grid-column:2;grid-row:1}
.gl-wrap .dock{grid-column:1/-1;grid-row:2}
.dock[data-skin="glass"] .sf-mine{margin-left:208px}

/* 히어로: 라벤더 유리면 + 큐브 */
.gl-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 420px;align-items:center;min-height:168px;margin-top:0;padding:34px 40px;border-radius:22px;overflow:hidden;
  background:linear-gradient(100deg,var(--lav-1) 0%,var(--lav-2) 48%,var(--lav-3) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),var(--card-shadow)}
.gl-hero::before{content:"";position:absolute;inset:-40% -10% auto auto;width:62%;height:200%;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.gl-hero-t{position:relative;z-index:1}
.gl-eyebrow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ink-mute);margin-bottom:8px}
.gl-hero-t strong{display:block;font-size:clamp(30px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.gl-hero-t p{margin-top:10px;font-size:14.5px;color:var(--ink-soft);word-break:keep-all}
.gl-hero-art{position:relative;height:150px;perspective:900px}
.gl-cube{position:absolute;border-radius:22%;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(214,224,255,.65) 55%,rgba(170,190,255,.75));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -8px 18px rgba(96,120,220,.25),0 24px 40px -18px rgba(60,80,200,.45);backdrop-filter:blur(6px);
  animation:gl-float 7s ease-in-out infinite}
.gl-cube-main{width:118px;height:118px;right:70px;top:14px;transform:rotate(14deg)}
.gl-cube-main i{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%) rotate(-14deg);border-left:30px solid var(--accent);border-top:19px solid transparent;border-bottom:19px solid transparent;filter:drop-shadow(0 6px 10px rgba(16,48,107,.35))}
.gl-cube-s1{width:36px;height:36px;left:28px;top:84px;transform:rotate(-18deg);animation-delay:-2s}
.gl-cube-s2{width:24px;height:24px;left:120px;top:36px;transform:rotate(26deg);animation-delay:-4s;background:linear-gradient(145deg,#d6f5e6,#7fd6b0)}
.gl-cube-s3{width:48px;height:48px;right:0;bottom:-6px;transform:rotate(-8deg);animation-delay:-5.5s}
@keyframes gl-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(prefers-reduced-motion:reduce){.gl-cube{animation:none}}

/* 도크 틀 */
.dock{background:transparent}
.dock[data-skin="glass"]{padding:24px 0 80px}
.dock[data-skin="glass"] .dk-inner{padding:0}
.dock[data-skin="glass"] .sf{background:#fff;border-radius:22px;padding:30px 32px 32px;box-shadow:var(--card-shadow);border:1px solid var(--card-line);position:relative;overflow:hidden}
.dock[data-skin="glass"] .sf-mine{background:none;padding:0;box-shadow:none;border:0;overflow:visible}
.dock[data-skin="glass"] .dk-head h2,.dock[data-skin="glass"] .dk-sub .lbl,.dock[data-skin="glass"] .wg-head h3{font-size:clamp(19px,2vw,22px);font-weight:700}
/* 모든 도구 카드 뒤 보라 번짐 (오른쪽 위·왼쪽 아래) */
.dock[data-skin="glass"] .sf-all::before,.dock[data-skin="glass"] .sf-all::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;filter:blur(40px);opacity:.85}
.dock[data-skin="glass"] .sf-all::before{right:-160px;top:-260px;background:radial-gradient(closest-side,#d8e1f0,rgba(216,225,240,0))}
.dock[data-skin="glass"] .sf-all::after{left:-200px;bottom:-300px;background:radial-gradient(closest-side,#e2e9f5,rgba(226,233,245,0))}
.dock[data-skin="glass"] .sf-all > *{position:relative;z-index:1}

/* 내 도구 카드: 색 사각 아이콘 + 오른쪽 꺾쇠 */
.dock[data-skin="glass"] .dk-shelf{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.dock[data-skin="glass"] .dk-card{height:108px;padding:16px 16px 14px;border-radius:16px;background:#fff;border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
.dock[data-skin="glass"] .dk-card:hover{border-color:#b9c8e0;box-shadow:0 2px 4px rgba(20,26,46,.05),0 18px 34px -18px rgba(16,48,107,.35)}
.dock[data-skin="glass"] .dk-card .dk-ic{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#e4eaf4;color:var(--accent)}
.dock[data-skin="glass"] .dk-card .dk-ic svg{width:20px;height:20px}
.dock[data-skin="glass"] .dk-card .dk-nm{padding-right:20px;font-size:14px}
.dock[data-skin="glass"] .dk-card::after{content:"";position:absolute;right:14px;bottom:17px;width:14px;height:14px;background:currentColor;color:var(--ink-mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.dock[data-skin="glass"] .dk-card:hover::after{color:var(--ink)}
/* 시안처럼 카드마다 아이콘 색 (파랑·보라·주황·초록·남색·분홍·청록 순환) */
.dock[data-skin="glass"] .dk-card:nth-child(7n+2) .dk-ic{background:#efe7ff;color:#6d47d9}
.dock[data-skin="glass"] .dk-card:nth-child(7n+3) .dk-ic{background:#fff0df;color:#e8831e}
.dock[data-skin="glass"] .dk-card:nth-child(7n+4) .dk-ic{background:#e2f6ea;color:#1f9d5a}
.dock[data-skin="glass"] .dk-card:nth-child(7n+5) .dk-ic{background:#e7ecf5;color:#1b2b55}
.dock[data-skin="glass"] .dk-card:nth-child(7n+6) .dk-ic{background:#ffe6ef;color:#d9376b}
.dock[data-skin="glass"] .dk-card:nth-child(7n+7) .dk-ic{background:#e0f4f8;color:#118fa8}
.dock[data-skin="glass"] .dk-x{top:6px;right:6px}
.dock[data-skin="glass"] .dk-x:hover{background:#e8edf5;color:var(--accent)}
.dock[data-skin="glass"] .dk-slot{height:108px;border-color:var(--accent);background:#e8edf5}
.dock[data-skin="glass"] .dk-empty{height:108px}
.dock[data-skin="glass"].is-dragging .dk-shelf-wrap{background:var(--paper-2);box-shadow:none}
.dock[data-skin="glass"].is-over .dk-shelf-wrap{box-shadow:0 0 0 2px var(--accent) inset;background:#e8edf5}

/* 모든 도구 판: 흰 칸 + 옅은 테두리, 올린 도구는 파랑 아이콘 + 체크 */
.dock[data-skin="glass"] .dk-palette{gap:12px}
.dock[data-skin="glass"] .dk-tile{height:44px;border-radius:10px;background:#fff;border:1px solid var(--card-line)}
.dock[data-skin="glass"] .dk-tile:hover{border-color:#b9c8e0;background:#fff}
.dock[data-skin="glass"] .dk-tile .dk-ic{color:var(--ink-soft)}
.dock[data-skin="glass"] .dk-tile.is-on{background:#fff;border:1px solid var(--card-line)}
.dock[data-skin="glass"] .dk-tile.is-on .dk-nm{opacity:1;color:var(--ink);font-weight:600}
.dock[data-skin="glass"] .dk-tile.is-on .dk-ic{opacity:1;color:var(--accent)}
.dock[data-skin="glass"] .dk-tile.is-on .dk-pin{color:var(--accent)}
.dock[data-skin="glass"] .dk-pin:hover{background:#e8edf5;color:var(--accent)}
.dock[data-skin="glass"] .dk-pal-h{margin-top:28px;padding-top:0;border-top:0;font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px}
.dock[data-skin="glass"] .dk-pal-h::before{content:"";width:22px;height:22px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4'/%3E%3Cpath d='M8 9v4'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M18 10h.01'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4'/%3E%3Cpath d='M8 9v4'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M18 10h.01'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.dock[data-skin="glass"] .dk-pal-h a:hover{color:var(--accent)}

/* 위젯: 흰 카드, 크레딧은 소카드, 디데이는 주황 글자, 새 템플릿엔 NEW */
.dock[data-skin="glass"] .wg-head{border-bottom:0;padding-bottom:16px}
.dock[data-skin="glass"] .wg-row > .wg + .wg{border-left-color:var(--line-soft)}
.dock[data-skin="glass"] .wg-t{color:var(--ink);font-size:13.5px}
.dock[data-skin="glass"] .wg-dd li{border-bottom:1px solid var(--line-soft)}
.dock[data-skin="glass"] .wg-dd .d{font-family:var(--sans);font-weight:700;font-size:13px;color:#e8553d}
.dock[data-skin="glass"] .wg-dd li.soon .d{color:#e8553d}
.dock[data-skin="glass"] .wg[data-wk="credit"]{margin:0 14px;padding:18px 20px 16px;border:1px solid var(--card-line);border-radius:14px;background:#fff;box-shadow:var(--card-shadow);align-self:start}
.dock[data-skin="glass"] .wg-row > .wg[data-wk="credit"] + .wg{border-left:0}
.dock[data-skin="glass"] .wg-cr b{font-family:var(--sans);font-weight:800;font-size:36px;color:var(--ink)}
.dock[data-skin="glass"] .wg-cr.low b{color:#e8553d}
.dock[data-skin="glass"] .wg-bar{height:6px;background:var(--paper-2)}
.dock[data-skin="glass"] .wg-bar i{background:var(--accent-green)}
.dock[data-skin="glass"] .wg-go{color:var(--accent)}
.dock[data-skin="glass"] .wg[data-wk="tpl"] .wg-nm::after{content:"NEW";display:inline-block;margin-left:8px;padding:2px 7px;border-radius:6px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;vertical-align:1px}
.dock[data-skin="glass"] .wg-tp .th{border-radius:12px;background:var(--paper-2)}
.dock[data-skin="glass"] .wg-tp .cd{background:rgba(20,26,46,.72)}
.dock[data-skin="glass"] .wg-x:hover{background:#e8edf5;color:var(--accent)}
.dock[data-skin="glass"] .wg-sec.is-over .wg-row,.dock[data-skin="glass"] .wg-sec.is-over .wg-wide{background:#e8edf5;box-shadow:0 0 0 2px var(--accent) inset}
.dock[data-skin="glass"] .wg-pal{border-top-color:var(--line-soft)}
.dock[data-skin="glass"] .wg-tile{background:#fff;border:1px solid var(--card-line)}
.dock[data-skin="glass"] .wg-tile:hover{border-color:#b9c8e0}
.dock[data-skin="glass"] .wg-tile.is-on{background:#e8edf5;border-color:#b9c8e0}
.dock[data-skin="glass"] .wg-tl::before{background:#b9c8e0}
.dock[data-skin="glass"] .wg-tl .dot{background:#fff;border-color:var(--accent)}
.dock[data-skin="glass"] .wg-tl .ev.soon .dot{background:var(--accent);border-color:var(--accent)}

/* 끌기 유령·우클릭 메뉴 */
.dk-ghost{border-color:var(--accent);box-shadow:0 18px 40px -14px rgba(16,48,107,.5)}
.dk-menu{box-shadow:var(--card-shadow);border-color:var(--card-line)}
.dk-menu button:hover:not([disabled]){background:#e8edf5}

/* 푸터: 흰 면 */
.footer{--footer-bg:#fff;--footer-border:var(--card-line);--footer-text:#6b7190;--footer-text-light:#141a2e;--footer-text-dark:#3b4262;--footer-accent:#10306b;--footer-hover-bg:#eef1f8}
.footer .footer-premium-badge{background:var(--accent);color:#fff}

@media(max-width:1024px){
  .gl-wrap{grid-template-columns:minmax(0,1fr);padding:20px 20px 0;gap:0} /* 모바일 좌우 20px = 네비 로고 기준선 */
  .gl-side{display:none}
  .gl-hero{grid-column:1}
  .dock[data-skin="glass"] .sf-mine{margin-left:0}
}
@media(max-width:760px){
  .gl-hero{grid-template-columns:minmax(0,1fr);min-height:0;padding:26px 22px}
  .gl-hero-art{display:none}
  .dock[data-skin="glass"] .sf{padding:20px 18px 22px;border-radius:18px}
  .dock[data-skin="glass"] .sf-mine{padding:0}
  .dock[data-skin="glass"] .wg[data-wk="credit"]{margin:8px 0}
}
@media(max-width:540px){
  .gl-wrap{padding-top:16px}
  .dock[data-skin="glass"] .dk-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dock[data-skin="glass"] .dk-card,.dock[data-skin="glass"] .dk-slot,.dock[data-skin="glass"] .dk-empty{height:auto;min-height:96px;padding:12px 12px 11px}
  .dock[data-skin="glass"] .dk-card .dk-ic{width:30px;height:30px;border-radius:8px}
  .dock[data-skin="glass"] .dk-card .dk-ic svg{width:17px;height:17px}
  .dock[data-skin="glass"] .dk-card .dk-nm{font-size:13.5px}
  .dock[data-skin="glass"] .dk-card::after{right:10px;bottom:13px}
}

/* ===== 헉스필드 생성 에셋 (2026-10-20 대장님 "아이콘·배너도 헉스필드로") — assets/home-glass/ =====
   히어로: hero.webp(유리 큐브, 오른쪽 정렬) · 아이콘: icons/<id>.webp 27종(시트 한 장 → 격자 분할), 선반·사이드바·모든 도구 판 공통 */
.gl-hero{min-height:256px;background:url(/assets/home-glass/hero-v4.webp?v=1) right 42%/cover no-repeat,#e9eef7} /* 대장님 제공 배너 4 (2026-10-21, 2000x667 3:1) — 세로 42% 지점(재생 큐브 중심) 기준으로 잘라 보임 */
.gl-hero::before{display:none}
.gl-hero-art{display:none}
.gl-ic{display:inline-block;background:var(--ic) center/contain no-repeat}
.gl-ic svg{display:none}
.dock[data-skin="glass"] .dk-card:nth-child(n) .dk-ic.gl-ic{width:44px;height:44px;border-radius:11px;background:var(--ic) center/contain no-repeat}
.dock[data-skin="glass"] .dk-tile .dk-ic.gl-ic{width:22px;height:22px;border-radius:5px}
.gl-side-list a .dk-ic.gl-ic{width:22px;height:22px;border-radius:5px}
.dk-ghost .dk-ic.gl-ic{width:26px;height:26px;border-radius:6px}
.gl-ic-arcade{--ic:url(/assets/home-glass/icons/arcade.webp?v=3)}
.gl-ic-arcade-bricks{--ic:url(/assets/home-glass/icons/arcade-bricks.webp?v=3)}
.gl-ic-arcade-maze{--ic:url(/assets/home-glass/icons/arcade-maze.webp?v=3)}
.gl-ic-arcade-tetris{--ic:url(/assets/home-glass/icons/arcade-tetris.webp?v=3)}
.gl-ic-case-converter{--ic:url(/assets/home-glass/icons/case-converter.webp?v=3)}
.gl-ic-color-palette{--ic:url(/assets/home-glass/icons/color-palette.webp?v=3)}
.gl-ic-dummy-text{--ic:url(/assets/home-glass/icons/dummy-text.webp?v=3)}
.gl-ic-effects{--ic:url(/assets/home-glass/icons/effects.webp?v=3)}
.gl-ic-gif-to-webp{--ic:url(/assets/home-glass/icons/gif-to-webp.webp?v=3)}
.gl-ic-image-crop{--ic:url(/assets/home-glass/icons/image-crop.webp?v=3)}
.gl-ic-image-format-converter{--ic:url(/assets/home-glass/icons/image-format-converter.webp?v=3)}
.gl-ic-image-resizing{--ic:url(/assets/home-glass/icons/image-resizing.webp?v=3)}
.gl-ic-image-slicer{--ic:url(/assets/home-glass/icons/image-slicer.webp?v=3)}
.gl-ic-image-to-pdf{--ic:url(/assets/home-glass/icons/image-to-pdf.webp?v=3)}
.gl-ic-media-info{--ic:url(/assets/home-glass/icons/media-info.webp?v=3)}
.gl-ic-motion{--ic:url(/assets/home-glass/icons/motion.webp?v=3)}
.gl-ic-mp4-to-gif{--ic:url(/assets/home-glass/icons/mp4-to-gif.webp?v=3)}
.gl-ic-mp4-to-webp{--ic:url(/assets/home-glass/icons/mp4-to-webp.webp?v=3)}
.gl-ic-naver-keyword{--ic:url(/assets/home-glass/icons/naver-keyword.webp?v=3)}
.gl-ic-photo-tone{--ic:url(/assets/home-glass/icons/photo-tone.webp?v=3)}
.gl-ic-psd-to-jpg{--ic:url(/assets/home-glass/icons/psd-to-jpg.webp?v=3)}
.gl-ic-quote-generator{--ic:url(/assets/home-glass/icons/quote-generator.webp?v=3)}
.gl-ic-settings{--ic:url(/assets/home-glass/icons/settings.webp?v=3)}
.gl-ic-symbol-copy{--ic:url(/assets/home-glass/icons/symbol-copy.webp?v=3)}
.gl-ic-video-frame-extractor{--ic:url(/assets/home-glass/icons/video-frame-extractor.webp?v=3)}
.gl-ic-video-trimmer{--ic:url(/assets/home-glass/icons/video-trimmer.webp?v=3)}
.gl-ic-webp-frame-extractor{--ic:url(/assets/home-glass/icons/webp-frame-extractor.webp?v=3)}
.gl-ic-webp-to-video{--ic:url(/assets/home-glass/icons/webp-to-video.webp?v=3)}
@media(max-width:760px){
  /* 대장님 배너: 좁은 화면은 왼쪽 밝은 면을 보이고 글자 뒤에 옅은 흰 막 */
  .gl-hero{background:linear-gradient(90deg,rgba(236,240,252,.82),rgba(236,240,252,.55) 70%,rgba(236,240,252,0)),url(/assets/home-glass/hero-v4.webp?v=1) 30% 42%/cover no-repeat,#e9eef7;min-height:0}
}

/* 선반 제목 "My tools" 삭제 (2026-10-20 대장님) — 사이드바 제목이 같은 말을 하므로. 오른쪽 저장 상태·기본으로는 유지 */
.dock[data-skin="glass"] .dk-head h2{display:none}
.dock[data-skin="glass"] .dk-head{justify-content:flex-end;margin-top:0}
.dock[data-skin="glass"] .dk-shelf-wrap{margin-top:6px}

/* 세로 리듬 통일 (2026-10-21 오와열 검수): 히어로→저장상태줄 24 · 선반→All tools 24 · All tools→Widgets 24 · 카드 안 제목→내용 18 */
.dock[data-skin="glass"] .sf-mine + .sf-all{margin-top:12px}   /* 선반 둘레 12px 패딩이 있어 시각 간격 24 */
.dock[data-skin="glass"] .sf-all + .sf-wg{margin-top:24px}
.dock[data-skin="glass"] .wg-head{padding-bottom:0}
.dock[data-skin="glass"] .wg-row > .wg{padding-bottom:0}
.dock[data-skin="glass"] .wg-wide > .wg{padding-bottom:0}
.dock[data-skin="glass"] .wg-go{margin-top:12px}
/* All tools·Widgets 제목 줄 높이 통일 (34px) */
.dock[data-skin="glass"] .wg-head{align-items:center;min-height:34px}
.dock[data-skin="glass"] .dk-sub{min-height:34px}

/* ===== 줄바꿈 검토 (2026-10-21 대장님) =====
   1) All tools 칸 이름이 데스크톱에서 "이미지 포맷·이름 ...", "WebP 프레임 추..." 로 잘림 → 말줄임 대신 어절 단위 2줄 */
.dock[data-skin="glass"] .dk-tile{height:auto;min-height:44px}
.dock[data-skin="glass"] .dk-tile a{padding-top:6px;padding-bottom:6px}
.dock[data-skin="glass"] .dk-tile .dk-nm{white-space:normal;word-break:keep-all;overflow-wrap:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}
/* 2) 히어로 설명이 1100px 폭에서 오른쪽 빈 열(옛 CSS 큐브 자리 420px) 때문에 313px에 갇혀 두 줄 → 그림은 배경이라 열 없애고 글 폭만 제한 */
.gl-hero{grid-template-columns:minmax(0,1fr)}
.gl-hero-t{max-width:620px}
/* 3) 모바일 2열 칸은 이름 폭이 57px뿐이라 "상세페이 / 지 자르기"처럼 글자 중간이 끊김 → 한 열로 */
@media(max-width:540px){
  .dock[data-skin="glass"] .dk-palette{grid-template-columns:minmax(0,1fr);gap:8px}
  .dock[data-skin="glass"] .dk-tile{min-height:46px}
  .dock[data-skin="glass"] .dk-tile .dk-nm{-webkit-line-clamp:1}
}
/* All tools 칸은 레퍼런스처럼 5열 (2026-10-21) — 이름 폭이 넓어져 "WebP 프레임 추출기"가 한 줄에 들어감. 두 줄은 "이미지 포맷·이름 일괄 변환" 하나뿐 */
@media(min-width:1280px){.dock[data-skin="glass"] .dk-palette{grid-template-columns:repeat(5,minmax(0,1fr))}} /* 1280 미만은 자동 열(영어 이름이 길어 5열이면 9개가 두 줄) */

/* ===== 대장님 제공 유리 아이콘 (2026-10-21, 투명 배경 4장 시트 → 25종 + 네이버 키워드 1종 생성) =====
   그림 자체가 입체라 바탕 색 사각형 없이 그대로. 선반 카드 48px · 사이드바/판 26px */
.dock[data-skin="glass"] .dk-card:nth-child(n) .dk-ic.gl-ic{width:50px;height:50px;border-radius:0;background:var(--ic) center/contain no-repeat;margin:-3px 0 0 -3px}
.dock[data-skin="glass"] .dk-tile .dk-ic.gl-ic{width:26px;height:26px;border-radius:0;margin:-2px 0}
.gl-side-list a .dk-ic.gl-ic{width:24px;height:24px;border-radius:0}
.dk-ghost .dk-ic.gl-ic{width:30px;height:30px;border-radius:0}
.dock[data-skin="glass"] .dk-tile.is-on .dk-ic{opacity:1}

/* 선반 위 "이 브라우저에 저장됨 · 기본으로" 줄 삭제 (2026-10-21 대장님) — 저장은 그대로 동작, 기본으로는 우클릭 메뉴/다음 검토 */
.dock[data-skin="glass"] .dk-head{display:none}
.dock[data-skin="glass"] .dk-shelf-wrap{margin-top:0}
.dock[data-skin="glass"]{padding-top:12px} /* 선반 둘레 12px 패딩 포함 시각 간격 24 */

/* 포인트 컬러: 보라 기운 파랑(#2f56e0) → 로고 남색 계열(#10306b, 진한 #082541) (2026-10-21 대장님) */
/* 모바일(760px 이하)은 히어로 배너 숨김 (2026-10-21 대장님 "자리만 차지") — 내 도구 카드가 첫 화면 */
@media(max-width:760px){.gl-hero{display:none}}