/*!
 * PDF의 모든 것 — 프리미엄 글로시 테마 (로고: 레드 ∞ 리본 + 흰 PDF)
 * body.ws 공용(홈 + 도구 상세). 화이트 캔버스 · 레드 그라데이션 · 부드러운 둥근 글로시 카드.
 * 색 역할: 레드=브랜드/PDF 정체성·강조, 잉크=텍스트. 외부 요청 0(폰트 로컬).
 */

/* ============ 페이지 전환(Cross-document View Transitions) ============
   도구 간 이동(독 클릭 = 풀 리로드)을 흰 플래시 없이 크로스페이드로.
   미지원 브라우저는 자동으로 기존 즉시 네비게이션으로 폴백(progressive enhancement). */
@view-transition { navigation: auto; }
::view-transition { background: var(--surf); }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 320ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
/* 공통 셸을 페이지 넘어가도 고정 → '그 자리에 박힌' 앱 느낌 */
.ws-taskbar { view-transition-name: vt-taskbar; }
.tp-dock { view-transition-name: vt-dock; }
/* 활성 알약이 이전 도구 위치 → 새 도구 위치로 iOS 독처럼 슬라이드 */
.tp-dock__item.is-active { view-transition-name: vt-dock-active; }
/* 드롭존을 홈↔상세 공유요소로 — 도구로 들어가도 그 자리에서 제자리로 이어짐
   (홈은 활성 패널 하나만, 상세는 하나뿐이라 이름 중복 없음) */
.herotool__panel.is-active .dropzone { view-transition-name: vt-dropzone; }
.tp-editor .dropzone { view-transition-name: vt-dropzone; }
.ws-wintitle { view-transition-name: vt-wintitle; }
::view-transition-group(vt-dropzone), ::view-transition-group(vt-wintitle) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-group(vt-dock-active) {
  animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); animation-duration: 320ms;
}

.ws {
  --red: #e5252a; --red-2: #ff5147; --red-deep: #c01a12; --red-ink: #9a140d;
  /* style.css의 인디고 액센트를 레드로 통일(페이지 호버·포커스·선택 등) */
  --accent: #e5252a; --accent-strong: #c01a12; --accent-soft: #fff1f0; --accent-ink: #c01a12;
  /* 그라데이션 전면 제거 — 솔리드 컬러로 통일 */
  --grad: #e5252a;
  --grad-soft: #fff1f0;
  --ink: #17172a; --ink-soft: #585e6e; --ink-faint: #6b7280; /* AA(≈4.6:1) 대비 개선 */
  --bg: #ffffff; --surf: #ffffff; --surf-2: #f7f8fb; --surf-3: #f1f2f6;
  --line: #ececf2; --line-2: #e0e3ea;
  --radius: 16px; --radius-sm: 12px; --radius-lg: 22px; --pill: 999px;
  --sh-sm: 0 2px 10px rgba(23, 23, 42, .05), 0 1px 3px rgba(23, 23, 42, .04);
  --sh: 0 14px 36px rgba(23, 23, 42, .09);
  --sh-lg: 0 30px 70px rgba(23, 23, 42, .14);
  --sh-red: 0 12px 30px rgba(229, 37, 42, .32);
  --ez: cubic-bezier(.22, .61, .36, 1);
  --ez-out: cubic-bezier(.16, 1, .3, 1);          /* 강한 감속 — 패널/모달/콘텐츠 진입 */
  --ez-spring: cubic-bezier(.34, 1.56, .64, 1);   /* 살짝 탄성 — 강조 인터랙션 한정 */
  --ez-in-out: cubic-bezier(.65, 0, .35, 1);      /* 대칭 — height/펼침 양방향 */
  --d-micro: 140ms; --d-hover: 200ms; --d-press: 120ms; --d-enter: 260ms;
  --d-stagger: 45ms; --d-stagger-cap: 320ms; --d-page: 320ms; --d-modal: 300ms; --d-reveal: 480ms;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  color: var(--ink); background: var(--bg); letter-spacing: -.011em;
}
.ws main { overflow-x: clip; }
.ws ::selection { background: #ffd9d6; color: var(--red-deep); }
.mono { font-family: var(--mono); }
.ws-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 스크롤 리빌 */
.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--d-reveal) var(--ez-out), transform var(--d-reveal) var(--ez-out); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ============ 내비게이션 ============ */
.ws-taskbar { position: sticky; top: 0; z-index: 200; height: 72px; display: flex; align-items: center; gap: 22px; padding: 0 28px; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
.ws-logo { display: flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 800; font-size: 17px; }
.ws-logo:hover { text-decoration: none; }
.ws-logo .chip { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; }
.ws-logo .chip img { width: 40px; height: 40px; object-fit: contain; display: block; }
.ws-logo .ko { font-family: var(--font); font-weight: 800; letter-spacing: -.02em; }
.ws-logo .sep, .ws-logo .wk { display: none; }
.ws-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ws-nav a { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); padding: 9px 14px; border-radius: var(--radius); transition: background var(--d-micro) var(--ez), color var(--d-micro) var(--ez), transform var(--d-micro) var(--ez), filter var(--d-micro) var(--ez); }
.ws-nav a:hover { color: var(--ink); background: var(--surf-2); text-decoration: none; }
.ws-nav a.gh { color: #fff; background: var(--grad); box-shadow: var(--sh-red); padding: 10px 18px; margin-left: 8px; }
.ws-nav a.gh:hover { transform: translateY(-1px); filter: brightness(1.04); }
/* 상단 메뉴바 '전체 도구' 항목(버튼/링크 공통) — 우측 플로팅 손잡이 대체 */
.ws-nav { --allico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E"); }
.ws-nav__alltools { font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); padding: 9px 15px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--surf-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  transition: background var(--d-micro) var(--ez), color var(--d-micro) var(--ez), border-color var(--d-micro) var(--ez); }
.ws-nav__alltools::before { content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--allico) center/contain no-repeat; mask: var(--allico) center/contain no-repeat; }
.ws-nav__alltools:hover { color: var(--ink); background: var(--surf-3); border-color: var(--line); text-decoration: none; }
@media (max-width: 760px) { .ws-taskbar { height: 62px; padding: 0 18px; gap: 12px; } .ws-nav a:not(.gh):not(.ws-nav__alltools) { display: none; } .ws-nav__alltools { padding: 8px 12px; font-size: 14px; } }

/* ============ 히어로 ============ */
.ws-hero { position: relative; padding: 84px 0 76px; }
.ws-hero::before, .ws-hero::after { display: none; }
.ws-herogrid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .ws-herogrid { grid-template-columns: 1fr; gap: 40px; } .ws-hero { padding: 52px 0 56px; } }
.ws-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--red-deep); background: var(--grad-soft); border: 1px solid #ffd5d1; padding: 7px 14px; border-radius: var(--pill); margin-bottom: 24px; }
.ws-kicker .sq { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(229, 37, 42, .18); }
.ws-h1 { font-family: var(--font); font-weight: 800; font-size: clamp(2.6rem, 5.2vw, 4.3rem); line-height: 1.04; letter-spacing: -.042em; color: var(--ink); }
.ws-h1 .mark { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-sub { margin-top: 24px; font-size: 1.16rem; line-height: 1.7; color: var(--ink-soft); max-width: 35ch; font-weight: 450; }
.ws-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.ws-btn { font-weight: 700; font-size: 15px; padding: 15px 26px; border-radius: 14px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; transition: transform var(--d-press) var(--ez), box-shadow var(--d-hover) var(--ez), filter var(--d-hover) var(--ez); border: 1px solid transparent; }
.ws-btn:active { transform: translateY(0) scale(.98); }
.ws-btn svg { width: 17px; height: 17px; }
.ws-btn.primary { background: var(--grad); color: #fff; box-shadow: var(--sh-red); }
.ws-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(229, 37, 42, .42); text-decoration: none; }
.ws-btn:not(.primary) { background: var(--surf); color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-sm); }
.ws-btn:not(.primary):hover { transform: translateY(-2px); box-shadow: var(--sh); text-decoration: none; }
.ws-meta { margin-top: 40px; display: flex; gap: 30px; flex-wrap: wrap; }
.ws-meta .m b { display: block; font-family: var(--font); font-size: 28px; font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-meta .m span { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 7px; font-weight: 500; }

/* ============ 히어로 도구 카드(글로시) ============ */
.ws-winwrap { position: relative; }
.ws-winwrap::before { content: none; }
.ws-window { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-lg); overflow: hidden; }
.ws-winbar { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: var(--surf); }
.ws-winbar .dot3 { display: none; }
.ws-lights { display: none; }
.ws-wintitle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ws-wintitle svg { width: 16px; height: 16px; color: var(--red); }
.ws-wintitle .sub { color: var(--ink-faint); font-weight: 500; }
.ws-winclose { display: none; margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--surf-2); border: 1px solid var(--line-2); padding: 7px 13px; border-radius: 9px; cursor: pointer; transition: .15s; }
.ws-winclose:hover { background: var(--surf); color: var(--red); box-shadow: var(--sh-sm); }
.ws-winnote { display: none; }
.ws-note { display: none; }

/* 윈도우 안 도구 위젯 */
.ws-window .herotool { padding: 8px; background: var(--surf); }
.ws-window .herotool__tabs { display: flex; flex-wrap: nowrap; gap: 4px; padding: 10px 12px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ws-window .herotool__tabs::-webkit-scrollbar { display: none; }
.ws-window .herotool__tab { flex: 0 0 auto; }
.ws-window .herotool__tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; cursor: pointer; border: none; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: 13px; font-weight: 600; border-radius: var(--pill); transition: background var(--d-micro) var(--ez), color var(--d-micro) var(--ez); }
.ws-window .herotool__tab:hover { background: var(--surf-2); color: var(--ink); }
.ws-window .herotool__tab[aria-selected="true"] { background: var(--grad-soft); color: var(--red-deep); }
.ws-window .herotool__tab .ic-svg { width: 16px; height: 16px; }
.herotool__panel { display: none; }
.herotool__panel.is-active { display: block; animation: aapFadeUp var(--d-enter) var(--ez-out) both; }
.ws-window .herotool__panel.is-active { padding: 8px 16px 18px; }
/* 홈 히어로 드롭존 — 첫 화면에서 크고 시원하게(파일 올리기 전 기본 상태) */
.ws-window .herotool .tool:not(.is-loaded) .dropzone { min-height: 340px; padding: 60px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ws-window .herotool .tool:not(.is-loaded) .dropzone__icon { width: 66px; height: 66px; margin-bottom: 14px; }
.ws-window .herotool .tool:not(.is-loaded) .dropzone__title { font-size: 1.32rem; }
.ws-window .herotool .tool:not(.is-loaded) .dropzone__btn { font-size: 1rem; padding: 13px 32px; margin: 6px 0 14px; }
.ws-window .herotool .tool:not(.is-loaded) .dropzone__hint { font-size: .92rem; }
@media (max-width: 560px) { .ws-window .herotool .tool:not(.is-loaded) .dropzone { min-height: 300px; padding: 44px 18px; } }

/* 콘텐츠 진입 키프레임 — 패널/썸네일/결과 공용 */
@keyframes aapFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ 기능 위주 단일 화면 런처 ============ */
.ws-launch { position: relative; overflow: hidden; min-height: calc(100vh - 72px); display: flex; flex-direction: column; justify-content: center; padding: 26px 0 40px; background: var(--surf); }
.ws-launch::before { content: none; }
.ws-launch::after { content: none; }
/* 홈 런처: 작은 상단 히어로 + 화면을 채우는 균형 그리드 (도구 8개 = 4열×2행) */
.ws-launch .ws-wrap { width: 100%; max-width: 1500px; padding: 0 clamp(24px, 4vw, 56px); position: relative; z-index: 1; }
.ws-launch .ws-tilegrid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .ws-launch .ws-tilegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ws-launch .ws-tilegrid { grid-template-columns: 1fr; } }
/* 부유하는 브랜드 그라데이션 오브 — 깔끔한 배경을 위해 홈에서는 숨김 */
.ws-orb { display: none; }
.ws-orb--legacy { position: absolute; top: -120px; right: 6%; width: 360px; height: 360px; border-radius: 50%; background: var(--grad); filter: blur(8px); opacity: .14; z-index: 0; pointer-events: none; animation: wsFloat 13s var(--ez) infinite; }
.ws-orb::after { display: none; }
@keyframes wsFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(26px) scale(1.05); } }
@media (max-width: 760px) { .ws-orb { width: 220px; height: 220px; top: -70px; right: -40px; } }
/* 런처 히어로 (보조 역할 — 도구 그리드가 주인공) */
.ws-launchhero { text-align: center; max-width: 720px; margin: 0 auto 22px; }
/* 각진 eyebrow 태그 */
.ws-launchhero__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.3; letter-spacing: .002em; color: var(--red-deep); background: var(--grad-soft); border: 1px solid #ffd5d1; padding: 8px 15px; border-radius: 3px; margin-bottom: 22px; box-shadow: var(--sh-sm); }
.ws-launchhero__badge .sq { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(229, 37, 42, .18); }
/* 행간 1.06 · 자간 -.046em · 장평(글자 폭) scaleX .985 + font-stretch */
.ws-launchhero__h1 { font-family: var(--font); font-weight: 800; font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.ws-launchhero__h1 .mark { color: var(--red); }
/* 행간 1.75(넉넉) · 자간 -.008em */
.ws-launchhero__sub { margin: 10px auto 0; max-width: 52ch; font-size: clamp(.9rem, 1.4vw, 1rem); line-height: 1.6; letter-spacing: -.008em; color: var(--ink-faint); font-weight: 500; word-break: keep-all; }
@media (max-width: 560px) {
  .ws-launchhero { margin-bottom: 28px; }
  .ws-launchhero__badge { white-space: normal; text-align: left; line-height: 1.45; border-radius: 16px; font-size: 11.5px; padding: 8px 14px; max-width: 92%; }
  .ws-launchhero__badge .sq { flex: 0 0 7px; }
  /* 작업창 탭 터치 타깃 ≥40px */
  .ws-window .herotool__tab { padding: 10px 14px; min-height: 40px; font-size: 13.5px; }
  .ws-window .herotool__tab .ic-svg { width: 17px; height: 17px; }
  /* 홈 입력칸 16px → iOS 포커스 자동 줌 방지 */
  .ws-homeright .field { font-size: 16px; }
}
/* 모바일 2열에서 9번째(홀수 막내) 타일이 홀로 뜨지 않게 풀폭 */
@media (max-width: 620px) {
  .ws-launch--split .ws-tilegrid--mini > .ws-tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: auto; min-height: 96px; }
}
/* 태블릿 대시보드 컬러 타일 */
.ws-tilegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .ws-tilegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ws-tilegrid { grid-template-columns: 1fr; } }
/* 각진 입체 카드 (다층 그림자로 깊이감, 배경은 깔끔하게) */
.ws-tile { position: relative; background: var(--surf); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: 0 1px 1px rgba(23, 23, 42, .04), 0 4px 8px rgba(23, 23, 42, .05), 0 12px 22px rgba(23, 23, 42, .05), inset 0 1px 0 rgba(255, 255, 255, .95); padding: 24px 22px; min-height: 166px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; color: var(--ink); overflow: hidden; transition: transform var(--d-hover) var(--ez), box-shadow var(--d-hover) var(--ez), border-color var(--d-hover) var(--ez); }
/* 호버: 떠오름 + 옅은 레드 틴트 (그라데이션 없이) */
.ws-tile::before { content: ""; position: absolute; inset: 0; background: rgba(255, 91, 82, .05); opacity: 0; transition: opacity var(--d-hover) var(--ez); pointer-events: none; }
.ws-tile:hover { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(23, 23, 42, .05), 0 14px 28px rgba(229, 37, 42, .12), 0 28px 50px rgba(23, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, 1); border-color: rgba(229, 37, 42, .22); text-decoration: none; }
.ws-tile:hover::before { opacity: 1; }
/* 톤온톤 각진 아이콘 컨테이너 — 그리드 리듬·구조 부여 */
.ws-tile__ico { position: relative; width: 52px; height: 52px; display: grid; place-items: center; background: none; border: none; box-shadow: none; transition: transform var(--d-hover) var(--ez); }
.ws-tile:hover .ws-tile__ico { transform: translateY(-2px); }
.ws-tile__ico .ic-svg { width: 48px; height: 48px; filter: drop-shadow(0 4px 10px rgba(229, 37, 42, .12)); }
.ws-tile__txt { display: block; position: relative; }
.ws-tile__name { display: block; position: relative; font-family: var(--font); font-weight: 700; font-size: 1.3rem; line-height: 1.22; letter-spacing: -.016em; color: var(--ink); }
.ws-tile__desc { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: -.004em; color: var(--ink-soft); }
.ws-tile__sub { display: block; }
.ws-tile .arr { position: absolute; top: 24px; right: 24px; width: 22px; height: 22px; color: var(--ink-faint); transition: transform var(--d-micro) var(--ez), color var(--d-micro) var(--ez); }
.ws-tile:hover .arr { transform: translateX(4px); color: var(--red); }
.ws-tile--about { background: var(--surf-2); }
.ws-tile--about:hover { background: var(--surf); }
.ws-tile--about .ws-tile__ico .ic-svg { width: 30px; height: 30px; color: var(--ink-faint); filter: none; }
.ws-tile--about .ws-tile__name { font-size: 1.2rem; }
.ws-tile--about .ws-tile__sub { position: relative; font-size: 13px; color: var(--ink-soft); margin-top: 5px; line-height: 1.5; letter-spacing: -.004em; }
/* 타일 스태거 진입 (촘촘히 — 마지막 타일도 빨리 합류) */
.js .ws-tilegrid > [data-reveal]:nth-child(1) { transition-delay: .02s; }
.js .ws-tilegrid > [data-reveal]:nth-child(2) { transition-delay: .05s; }
.js .ws-tilegrid > [data-reveal]:nth-child(3) { transition-delay: .08s; }
.js .ws-tilegrid > [data-reveal]:nth-child(4) { transition-delay: .11s; }
.js .ws-tilegrid > [data-reveal]:nth-child(5) { transition-delay: .14s; }
.js .ws-tilegrid > [data-reveal]:nth-child(6) { transition-delay: .17s; }
.js .ws-tilegrid > [data-reveal]:nth-child(7) { transition-delay: .20s; }
.js .ws-tilegrid > [data-reveal]:nth-child(8) { transition-delay: .23s; }
.js .ws-tilegrid > [data-reveal]:nth-child(9) { transition-delay: .26s; }
.ws-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 32px; font-size: 13.5px; font-weight: 600; letter-spacing: -.006em; color: var(--ink-soft); }
.ws-trust span { display: inline-flex; align-items: center; gap: 7px; }
.ws-trust span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #18a957; }

/* ============ 홈 2단: 왼쪽 도구 카드 · 오른쪽 PDF 드롭 도구 ============ */
.ws-launch--split { justify-content: center; padding: 22px 0; overflow: visible; }
.ws-homegrid { display: grid; grid-template-columns: .96fr 1.04fr; gap: 36px; align-items: start; width: 100%; max-width: 1320px; margin: 0 auto; }
.ws-homeright { order: 1; }
.ws-homeleft { order: 2; }
/* 그리드 칼럼이 타일 min-content에 막혀 좁은 화면에서 안 줄어드는 것 방지 */
.ws-homeleft, .ws-homeright { min-width: 0; }
@media (max-width: 1000px) { .ws-homegrid { grid-template-columns: 1fr; gap: 28px; } .ws-launch--split { min-height: 0; padding: 36px 0 64px; } }
/* 오른쪽: 정사각형 도구 타일 (세로형, 3열) */
.ws-launch--split .ws-tilegrid--mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1180px) { .ws-launch--split .ws-tilegrid--mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1000px) { .ws-launch--split .ws-tilegrid--mini { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .ws-launch--split .ws-tilegrid--mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .ws-launch--split .ws-tilegrid--mini { grid-template-columns: 1fr; } }
.ws-tilegrid--mini .ws-tile { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; aspect-ratio: 1 / 1; min-height: 0; padding: 24px 22px; }
/* 코너 소프트 레드 글로우 (카드에 클립되어 은은한 코너 악센트) */
.ws-tilegrid--mini .ws-tile::after { display: none; }
.ws-tilegrid--mini .ws-tile__ico { width: auto; height: auto; flex: none; position: relative; }
.ws-tilegrid--mini .ws-tile__ico .ic-svg { width: 56px; height: 56px; transition: transform var(--d-hover) var(--ez); }
.ws-tilegrid--mini .ws-tile:hover .ws-tile__ico .ic-svg { transform: scale(1.08); }
.ws-tilegrid--mini .ws-tile__txt { position: relative; }
.ws-tilegrid--mini .ws-tile__name { font-size: 1.14rem; line-height: 1.2; transition: color var(--d-micro) var(--ez); }
.ws-tilegrid--mini .ws-tile:hover .ws-tile__name { color: var(--red-deep); }
.ws-tilegrid--mini .ws-tile__desc { font-size: 13px; margin-top: 4px; line-height: 1.5; letter-spacing: -.003em; word-break: keep-all; color: var(--ink-soft); }
.ws-tilegrid--mini .arr { display: block; position: absolute; bottom: 22px; right: 22px; width: 20px; height: 20px; color: var(--red); opacity: 0; transform: translateX(-5px); transition: opacity var(--d-micro) var(--ez), transform var(--d-hover) var(--ez); }
.ws-tilegrid--mini .ws-tile:hover .arr { opacity: 1; transform: translateX(0); }
/* 오른쪽: 드롭 도구 창 */
.ws-homeright .ws-window { box-shadow: var(--sh-lg); }
.ws-homeright .ws-winbar .ws-wintitle svg { color: var(--red); }
@media (max-width: 1000px) { .ws-homeright { max-width: 620px; margin: 0 auto; width: 100%; } }

/* ============ 도구 카드 그리드 ============ */
.ws-tools { padding: 40px 0 96px; }
.ws-sechead { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.ws-sechead h2 { font-family: var(--font); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -.034em; line-height: 1.12; }
.ws-sechead h2 small { display: block; font-size: 13px; font-weight: 700; color: var(--red); letter-spacing: .02em; margin-bottom: 12px; text-transform: none; }
.ws-sechead .hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.ws-sechead .hint .dd { display: none; }
.ws-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .ws-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .ws-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px) { .ws-grid { grid-template-columns: 1fr; } }
.ws-app { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-sm); padding: 22px 20px; color: var(--ink); position: relative; overflow: hidden; transition: transform .18s var(--ez), box-shadow .18s, border-color .18s; }
.ws-app::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: 0; transition: opacity .2s; }
.ws-app:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: transparent; text-decoration: none; }
.ws-app:hover::after { opacity: 1; }
.ws-app:hover .ws-app__launch { color: var(--red); }
.ws-app:hover .ws-app__launch .arr { transform: translateX(4px); }
.ws-app__bar { display: none; }
.ws-app__body { display: flex; flex-direction: column; gap: 0; }
.ws-app__ico { display: block; margin-bottom: 14px; }
.ws-app__ico .ic-svg { width: 58px; height: 58px; }
.ws-app h3 { font-family: var(--font); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; line-height: 1.25; }
.ws-app p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 9px; flex: 1; }
.ws-app__launch { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; transition: color .18s; }
.ws-app__launch .arr { transition: transform .2s var(--ez); }
.ws-app--feat { grid-column: span 2; background: var(--surf); }
@media (max-width: 520px) { .ws-app--feat { grid-column: span 1; } }
.ws-app--feat .ws-app__body { flex-direction: row; align-items: center; gap: 22px; }
.ws-app--feat .ws-app__ico { flex: 0 0 auto; margin-bottom: 0; }
.ws-app--feat .ws-app__ico .ic-svg { width: 72px; height: 72px; }
.ws-app--feat .ws-app__txt { flex: 1; }
.ws-app--feat .badge { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--grad); padding: 4px 11px; border-radius: var(--pill); margin-bottom: 10px; box-shadow: var(--sh-red); }
@media (max-width: 520px) { .ws-app--feat .ws-app__body { flex-direction: column; align-items: flex-start; } }
.ws-app--readme { background: #232338; color: #fff; }
.ws-app--readme .cmd { display: none; }
.ws-app--readme h3 { color: #fff; }
.ws-app--readme p { color: #b9bdca; }
.ws-app--readme .ws-app__launch { color: rgba(255, 255, 255, .6); }
.ws-app--readme:hover .ws-app__launch { color: #fff; }

/* ============ WHY (안전) ============ */
.ws-why { padding: 96px 0; background: var(--surf-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ws-whygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 860px) { .ws-whygrid { grid-template-columns: 1fr; gap: 36px; } }
.ws-why .tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 16px; }
.ws-why h2 { font-family: var(--font); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -.032em; line-height: 1.18; color: var(--ink); }
.ws-why h2 .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-why .lede { margin-top: 20px; font-size: 16px; line-height: 1.8; color: var(--ink-soft); }
.ws-why .lede b { color: var(--ink); font-weight: 700; }
.ws-uspcol { display: flex; flex-direction: column; gap: 14px; }
.ws-usp { display: flex; gap: 16px; align-items: flex-start; background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--sh-sm); transition: transform .16s var(--ez), box-shadow .16s; }
.ws-usp:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.ws-usp .n { flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: 14px; color: #fff; background: var(--grad); box-shadow: var(--sh-red); }
.ws-usp h4 { font-family: var(--font); font-weight: 800; font-size: 1.06rem; letter-spacing: -.015em; color: var(--ink); }
.ws-usp p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); margin-top: 5px; }

/* ============ FAQ (글로시 아코디언) ============ */
.ws-faq { padding: 92px 0; }
.ws-faq .ws-sechead { margin-bottom: 36px; }
.ws-term { max-width: 760px; margin: 0 auto; }
.ws-term > .ws-winbar { display: none; }
.ws .ws-faqlist { display: flex; flex-direction: column; gap: 12px; }
.ws .ws-faqlist details { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-sm); overflow: hidden; transition: box-shadow .18s, border-color .18s; }
.ws .ws-faqlist details[open] { box-shadow: var(--sh); border-color: var(--line-2); }
.ws .ws-faqlist summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; gap: 14px; font-family: var(--font); font-weight: 700; font-size: 1.04rem; color: var(--ink); }
.ws .ws-faqlist summary::-webkit-details-marker { display: none; }
.ws .ws-faqlist summary .q { font-size: 13px; font-weight: 800; color: var(--red); background: var(--grad-soft); width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: 0 0 30px; }
.ws .ws-faqlist summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 300; color: var(--ink-faint); transition: transform .25s var(--ez), color .2s; }
.ws .ws-faqlist details[open] summary::after { transform: rotate(45deg); color: var(--red); }
.ws .ws-faqlist .a { padding: 0 24px 22px 68px; font-size: 14.5px; line-height: 1.78; color: var(--ink-soft); }
.ws .ws-faqlist .a::before { content: ""; }

/* ============ 푸터 ============ */
.ws-foot { background: var(--surf-2); border-top: 1px solid var(--line); padding: 60px 0 40px; }
.ws-footgrid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ws-footbrand { max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.ws-footbrand .fb { display: flex; align-items: center; gap: 11px; font-family: var(--font); font-weight: 800; font-size: 16px; }
.ws-footbrand .fb .chip { width: 36px; height: 36px; display: grid; place-items: center; }
.ws-footbrand .fb .chip img { width: 36px; height: 36px; object-fit: contain; }
.ws-footbrand p { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.ws-footcols { display: flex; gap: 56px; flex-wrap: wrap; }
.ws-footcol h5 { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.ws-footcol a { display: block; font-size: 14px; color: var(--ink-soft); padding: 5px 0; transition: color .15s, transform .15s; }
.ws-footcol a:hover { color: var(--red); transform: translateX(3px); text-decoration: none; }
.ws-footcol__all { color: #c81f26 !important; font-weight: 700; margin-top: 4px; }
.ws-footbottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ink-faint); }

/* ============ 도구 상세 페이지 ============ */
.tp-col { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.tp-hero { position: relative; padding: 30px 0 14px; }
.tp-hero::before { display: none; }
.tp-hero > .tp-col { position: relative; z-index: 1; }
.tp-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-faint); margin-bottom: 14px; }
.tp-path a { color: var(--ink-soft); }
.tp-path a:hover { color: var(--red); text-decoration: none; }
.tp-path .s { color: var(--line-2); }
.tp-path b { color: var(--red); font-weight: 700; }
.tp-head { display: flex; align-items: flex-start; gap: 20px; }
.tp-ico { flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; }
.tp-ico .ic-svg { width: 48px; height: 48px; }
.tp-h1 { font-family: var(--font); font-weight: 800; font-size: clamp(1.65rem, 3.2vw, 2.25rem); letter-spacing: -.035em; line-height: 1.08; color: var(--ink); }
.tp-sub { margin-top: 7px; font-size: 1.06rem; line-height: 1.65; font-weight: 450; color: var(--ink-soft); max-width: 46ch; word-break: keep-all; }
@media (max-width: 560px) { .tp-head { flex-direction: column; align-items: flex-start; gap: 14px; } .tp-ico .ic-svg { width: 54px; height: 54px; } }

.tp-stage { padding: 2px 0 24px; }
/* 풀스크린: 도구 창이 화면(뷰포트) 높이를 채움 */
.tp-window { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-lg); overflow: hidden; height: calc(100vh - 320px); min-height: 420px; display: flex; flex-direction: column; }
.tp-window .ws-winbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 15px 22px; border-bottom: 1px solid var(--line); background: var(--surf); }
.tp-window .ws-winnote { flex: 0 0 auto; }
.tp-toolbody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 26px; display: flex; flex-direction: column; justify-content: safe center; }
@media (max-width: 560px) { .tp-toolbody { padding: 16px; justify-content: flex-start; } .tp-window { min-height: calc(100vh - 220px); } }
.ws .tp-toolbody .tool { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; width: 100%; max-width: 760px; margin: 0 auto; }
/* 상세 드롭존은 홈과 동일한 기본 .dropzone 크기를 그대로 사용(오버라이드 없음) */

/* 상세: 업로드한 PDF 페이지를 왼쪽 도구 안에서 크게(페이지별 2열) */
.tp-toolbody .pagegrid { margin-top: 18px; }
.tp-toolbody .pagegrid__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-height: none; }
.tp-toolbody .pagecell { gap: 8px; }
.tp-toolbody .pagecell__img { border-radius: 10px; }
.tp-toolbody .pagecell__no { font-size: .84rem; font-weight: 800; color: var(--ink); background: var(--surf-3); padding: 2px 9px; border-radius: var(--pill); min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.tp-toolbody .pagegrid__hint, .tp-toolbody .pagegrid__loading { font-size: .92rem; }
@media (max-width: 560px) { .tp-toolbody .pagegrid__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ============ 상세 PDF 에디터: 왼쪽 페이지 · 오른쪽 옵션 · 하단 플로팅 도구 독 ============ */
.tp-editor { padding: 6px 0 128px; }
.tp-editorwrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.tp-editor .tp-window { height: auto; min-height: 0; }
.tp-editor .tp-toolbody { display: block; padding: 0; overflow: visible; }
/* 두 카드: ① 드롭 카드(ws-window) ② 옵션 카드 — 나란히 */
.tp-editor .tp-toolbody .tool { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; padding: 24px 0; max-width: none; width: 100%; margin: 0; align-items: start; }
.tp-editor .tool__left { min-width: 0; align-self: start; }
/* 드롭 카드는 홈 윈도우와 동일한 ws-window 스타일(타이틀바 + 본문 패딩) */
.tp-editor .tool__left.ws-window { border-radius: var(--radius-lg); }
.tp-editor .tool__left .ws-winbar { padding: 15px 22px; }
.tp-editor .tool__leftbody { padding: 22px; }
@media (max-width: 560px) { .tp-editor .tool__leftbody { padding: 16px; } }
/* 오른쪽 옵션·실행 패널: 스크롤해도 항상 보이는 sticky 카드 */
/* 우측은 투명 컨테이너 — 옵션은 별도 카드, 실행 버튼은 그 아래 prominent CTA로 분리 */
/* 옵션 + 실행 버튼을 하나의 카드로 묶음 — 설정→실행이 한 패널에 응집 */
.tp-editor .tool__right { position: sticky; top: 92px; align-self: start; min-width: 0; background: var(--surf); border: 1px solid var(--line-2); border-radius: 18px; padding: 22px; box-shadow: 0 1px 2px rgba(23, 23, 42, .04), 0 8px 22px rgba(23, 23, 42, .06); }
.tp-editor .tool__right .options { margin: 0; background: none; border: 0; padding: 0; box-shadow: none; }
.tp-editor .tool__right .field { background: var(--surf-2); }
.tp-editor .tool__right .actions { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 880px) { .tp-editor .tp-toolbody .tool { grid-template-columns: 1fr; gap: 18px; padding: 18px; } .tp-editor .tool__right { position: static; } .tp-editor .tool.is-loaded .tool__right { order: -1; } }

/* 업로드 후: 큰 드롭존을 슬림한 '다른 파일 선택' 바로 축소 → 작업(페이지·옵션)에 집중 */
.tp-editor .tool.is-loaded .dropzone { flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 13px 18px; }
.tp-editor .tool.is-loaded .dropzone .dropzone__icon { width: 20px; height: 20px; margin: 0; }
.tp-editor .tool.is-loaded .dropzone .dropzone__title,
.tp-editor .tool.is-loaded .dropzone .dropzone__hint { display: none; }
.tp-editor .tool.is-loaded .dropzone .dropzone__btn { margin: 0; padding: 9px 18px; font-size: .92rem; }
/* 페이지 미리보기가 비어있을 때(업로드 전) 왼쪽은 드롭존만 */
.tp-editor .tool__left .pagegrid:not([hidden]) { margin-top: 18px; }

/* 하단 중앙 플로팅 도구 독 */
.tp-dock { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 150; width: min(720px, calc(100vw - 28px)); }
/* 항상 보이는 카테고리 바 */
.tp-dock__cats { display: flex; gap: 5px; padding: 8px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(23, 23, 42, .08); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 50px rgba(23, 23, 42, .16); }
.tp-dock__cat { flex: 1 1 0; min-width: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: none; background: transparent; border-radius: 13px; cursor: pointer; font-family: inherit; color: var(--ink); transition: background var(--d-micro) var(--ez), color var(--d-micro) var(--ez); }
.tp-dock__cat:hover { background: var(--surf-2); }
.tp-dock__cat-name { font-size: 13px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.tp-dock__cat-count { font-size: 10.5px; font-weight: 700; color: #5f6473; }
.tp-dock__cat.is-current .tp-dock__cat-name { color: var(--red); }               /* 현재 도구의 카테고리 강조 */
.tp-dock__cat.is-open { background: var(--grad); color: #fff; box-shadow: var(--sh-red); }
.tp-dock__cat.is-open .tp-dock__cat-name, .tp-dock__cat.is-open .tp-dock__cat-count { color: #fff; opacity: 1; }
/* 위로 열리는 도구 패널 */
.tp-dock__panels { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; }
.tp-dock__panel { background: rgba(255, 255, 255, .96); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(23, 23, 42, .08); border-radius: 18px; padding: 12px 14px 14px; box-shadow: 0 18px 50px rgba(23, 23, 42, .18); max-height: 46vh; overflow-y: auto; animation: dockPop .22s var(--ez-out) both; }
.tp-dock__panel-head { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); margin: 0 0 10px; text-transform: none; }
.tp-dock__panel-head span { opacity: .7; }
.tp-dock__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; }
.tp-dock__item { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 13px 8px; border-radius: 13px; color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; transition: background var(--d-micro) var(--ez), color var(--d-micro) var(--ez), transform var(--d-micro) var(--ez); }
.tp-dock__item .ic-svg { width: 25px; height: 25px; }
.tp-dock__item:hover { background: var(--surf-2); color: var(--ink); text-decoration: none; transform: translateY(-2px); }
.tp-dock__item.is-active { background: var(--grad); color: #fff; box-shadow: var(--sh-red); }
@keyframes dockPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dockPopLeft { from { opacity: 0; transform: translateX(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tp-dock__panel { animation: none; } }

/* ───── 데스크톱: 플로팅 도구바를 하단 중앙 → 우측 세로 레일로 ─────
   모바일/태블릿(≤880px)은 하단 바 유지(세로 레일은 좁은 화면에 부적합) */
@media (min-width: 1000px) {
  .tp-dock { bottom: auto; left: auto; right: 16px; top: 50%; transform: translateY(-50%); width: auto; }
  .tp-dock__cats { flex-direction: column; gap: 4px; padding: 7px; border-radius: 20px; }
  .tp-dock__cat { flex: 0 0 auto; width: 70px; padding: 11px 6px; border-radius: 14px; }
  /* 패널을 레일 왼쪽으로 펼침 + 세로 중앙 정렬 */
  .tp-dock__panels { top: 50%; bottom: auto; left: auto; right: calc(100% + 12px); transform: translateY(-50%); width: 320px; }
  .tp-dock__panel { max-height: min(70vh, 560px); animation-name: dockPopLeft; }
  /* 하단 바가 없으니 도구 영역 하단 여백 축소 + 우측 레일 레인 확보(카드가 레일에 가리지 않게) */
  .tp-editor { padding-bottom: 56px; }
  .tp-editorwrap { padding-right: clamp(48px, 10vw, 140px); }
}
@media (max-width: 560px) {
  .tp-dock { bottom: 12px; width: calc(100vw - 16px); }
  .tp-dock__cats { gap: 2px; padding: 6px; border-radius: 16px; }
  .tp-dock__cat { padding: 8px 4px; }
  .tp-dock__cat-name { font-size: 11.5px; }
  .tp-dock__grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .tp-dock__item { padding: 10px 6px; font-size: 11px; gap: 5px; }
  .tp-dock__item .ic-svg { width: 22px; height: 22px; }
}

/* 페이지 미리보기 인디고 잔재 → 레드 */
/* 흰 캔버스 위 흰 썸네일이 '떠 있는 종이'로 보이게 — 색 없이 그림자로만 깊이 */
.ws .pagecell__img { border-color: var(--line-2); box-shadow: 0 1px 2px rgba(23, 23, 42, .05), 0 4px 12px rgba(23, 23, 42, .06); }
.ws .pagecell__img::after { background: rgba(229, 37, 42, .16); }
.ws .pagecell--split:not(.is-locked):hover .pagecell__img { box-shadow: 0 0 0 2px var(--red), var(--sh-sm); }
/* 페이지 선택 시 체크 배지가 톡 튀어나오게(spring) */
.ws .pagecell.is-sel .pagecell__img::before { animation: aapPop var(--d-enter) var(--ez-spring); }

/* ===== 토스풍 UX/UI 폴리시 (상세 에디터) ===== */
/* (드롭존은 홈과 동일한 기본 크기를 쓰기 위해 별도 오버라이드를 두지 않음) */
.tp-editor .tool__right .option__label { font-weight: 700; font-size: .95rem; color: var(--ink); }
.tp-editor .field { border-radius: 14px; padding: 13px 16px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.ws .option__hint { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.tp-editor .tool__right .btn--primary { border-radius: 16px; padding: 17px 20px; font-size: 1.1rem; font-weight: 700; }
.tp-editor .pagecell__img { border-radius: 14px; }

/* 페이지 썸네일 진입 — 셀이 순차적으로 부드럽게 fade-up (마지막 셀도 빨리 합류) */
.ws .pagecell { animation: aapFadeUp var(--d-enter) var(--ez-out) both; }
.ws .pagecell:nth-child(2) { animation-delay: 35ms; }
.ws .pagecell:nth-child(3) { animation-delay: 70ms; }
.ws .pagecell:nth-child(4) { animation-delay: 105ms; }
.ws .pagecell:nth-child(5) { animation-delay: 140ms; }
.ws .pagecell:nth-child(6) { animation-delay: 175ms; }
.ws .pagecell:nth-child(7) { animation-delay: 210ms; }
.ws .pagecell:nth-child(8) { animation-delay: 245ms; }
.ws .pagecell:nth-child(n+9) { animation-delay: 280ms; }
/* 드래그 진입 시 업로드 아이콘이 살짝 떠오름 */
.ws .dropzone__icon { transition: transform var(--d-hover) var(--ez); }
.ws .dropzone--over .dropzone__icon { transform: translateY(-3px); }
/* 진행바·파일 요약 진입 + 숫자 흔들림 제거 */
.ws .progress, .ws .filebar { transition: opacity var(--d-enter) var(--ez), transform var(--d-enter) var(--ez-out); }
.ws .progress__text, .ws .filebar__sum, .ws .result__size { font-variant-numeric: tabular-nums; }

.tp-info { padding: 50px 0 84px; border-top: 1px solid var(--line); margin-top: 8px; }
.tp-lead { font-size: 1.18rem; line-height: 1.8; color: var(--ink-soft); max-width: 70ch; font-weight: 450; }
.tp-lead b, .tp-lead strong { color: var(--ink); font-weight: 700; }
.tp-sec { margin-top: 56px; }
.tp-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .04em; color: var(--red); margin-bottom: 14px; }
.tp-h2 { font-family: var(--font); font-weight: 800; font-size: clamp(1.5rem, 2.9vw, 2rem); letter-spacing: -.03em; line-height: 1.2; color: var(--ink); margin: 0 0 26px; }
.tp-sec > p { font-size: 1.02rem; line-height: 1.85; color: var(--ink-soft); max-width: 70ch; }

/* 사용법 스텝(글로시 카드 스텝퍼) */
.tp-steps { list-style: none; counter-reset: tp; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tp-steps li { counter-increment: tp; display: flex; gap: 18px; align-items: flex-start; background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-sm); padding: 20px 24px; transition: transform .16s var(--ez), box-shadow .16s; }
.tp-steps li:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.tp-steps li::before { content: counter(tp, decimal-leading-zero); flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: 15px; color: #fff; background: var(--grad); box-shadow: var(--sh-red); }
.tp-steps li .tx { padding-top: 9px; font-size: 1.02rem; line-height: 1.6; color: var(--ink); font-weight: 500; }

/* 보안 콜아웃(레드 그라데이션 카드) */
.tp-secure { margin-top: 48px; display: flex; gap: 18px; align-items: flex-start; background: var(--grad); color: #fff; border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--sh-red); position: relative; overflow: hidden; }
.tp-secure::after { display: none; }
.tp-secure .ic { flex: 0 0 auto; position: relative; }
.tp-secure .ic .ic-svg { width: 30px; height: 30px; color: #fff; }
.tp-secure .tx { position: relative; }
.tp-secure strong { display: block; font-weight: 800; font-size: 1.1rem; margin-bottom: 5px; }
.tp-secure .tx span { font-size: .98rem; line-height: 1.72; color: rgba(255, 255, 255, .92); }

.tp-related { padding: 70px 0; background: var(--surf-2); border-top: 1px solid var(--line); }
.tp-related .ws-sechead { text-align: left; margin: 0 0 32px; max-width: none; }
.tp-related .ws-sechead h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.tp-relgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .tp-relgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 460px) { .tp-relgrid { grid-template-columns: 1fr; } }
.tp-rel { display: flex; align-items: center; gap: 15px; background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-sm); padding: 18px 20px; color: var(--ink); transition: transform .16s var(--ez), box-shadow .16s; }
.tp-rel:hover { transform: translateY(-4px); box-shadow: var(--sh); text-decoration: none; }
.tp-rel:hover .tp-rel__arr { transform: translateX(4px); color: var(--red); }
.tp-rel__bar { display: none; }
.tp-rel__ico { flex: 0 0 auto; display: grid; place-items: center; }
.tp-rel__ico .ic-svg { width: 46px; height: 46px; }
.tp-rel__tx { min-width: 0; flex: 1; }
.tp-rel__tx h3 { font-family: var(--font); font-weight: 800; font-size: 1.04rem; letter-spacing: -.02em; line-height: 1.2; }
.tp-rel__tx p { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.tp-rel__arr { margin-left: auto; color: var(--ink-faint); font-weight: 700; transition: transform .18s, color .18s; flex: 0 0 auto; }

/* ============ 공유 위젯 리스킨(글로시) ============ */
.ws .dropzone { border: 2px dashed var(--line-2); border-radius: var(--radius); background: var(--surf-2); transition: border-color .2s, background .2s, box-shadow .2s; }
.ws .dropzone:hover, .ws .dropzone--over { border-color: var(--red-2); background: #fff7f6; box-shadow: 0 0 0 4px rgba(229, 37, 42, .06); }
.ws .dropzone__icon { color: var(--red); }
.ws .dropzone__btn { background: var(--grad); border-radius: var(--radius); box-shadow: var(--sh-red); }
.ws .dropzone:hover .dropzone__btn { filter: brightness(1.04); }
.ws .btn--primary { background: var(--grad); border: none; border-radius: var(--radius); box-shadow: var(--sh-red); font-weight: 700; }
.ws .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(229, 37, 42, .4); }
.ws .btn--primary:disabled { background: var(--surf-3); color: var(--ink-soft); box-shadow: none; border: 1px solid var(--line-2); cursor: not-allowed; }
.ws .segmented input:not(:checked) + span:hover { background: var(--surf); color: var(--ink); box-shadow: var(--sh-sm); }
.ws .field { border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: var(--sh-sm); background: var(--surf); }
.ws .field:focus { border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(229, 37, 42, .14); outline: none; }
.ws .segmented { background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; }
.ws .segmented span { border-radius: var(--radius-sm); font-weight: 600; }
.ws .segmented input:checked + span { background: var(--grad); color: #fff; box-shadow: var(--sh-red); }
.ws .checkbox input { accent-color: var(--red); }
.ws .iconbtn { border-radius: var(--radius-sm); border: 1px solid var(--line-2); }
.ws .iconbtn:hover { background: #fff7f6; color: var(--red); border-color: #ffd5d1; }
.ws .filelist__item { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surf-2); }
.ws .filelist__thumb, .ws .pagecell__img { border-radius: var(--radius-sm); }
.ws .pagecell.is-sel .pagecell__img { box-shadow: 0 0 0 2.5px var(--red), 0 6px 16px rgba(229, 37, 42, .18); }
.ws .pagecell.is-sel .pagecell__img::before { background: var(--red); }
.ws .pagecell.is-sel .pagecell__img::after { background: rgba(229, 37, 42, .22); }
.ws .pagecell.is-sel .pagecell__no { color: #fff; background: var(--red); border-radius: var(--pill); padding: 2px 9px; min-width: 26px; text-align: center; }
.ws .pagecell--split[data-seg="1"] { background: #fff1f0; }
.ws .pagecell--split.is-cut::before { background: var(--red); }
.ws .pagecell--org.drag-over .pagecell__img { box-shadow: 0 0 0 2px var(--red), var(--sh); }
.ws .pagecell--org .pagecell__img { border-color: var(--line-2); }
.ws .progress { border-radius: var(--pill); border: 1px solid var(--line); background: var(--surf-2); }
.ws .progress__bar { background: var(--grad); }
.ws .result { border-radius: var(--radius); background: #f0fbf4; border: 1px solid #c5ecd3; }
.ws .callout { border-radius: var(--radius); }
.ws .callout--security { background: #f0fbf4; border-color: #c5ecd3; }
.ws .callout--warn { background: #fff8ec; border-color: #f4e2b8; }
.ws .pagecount { color: var(--ink-faint); }
.ws .numprev__badge { border-radius: 6px; }
.ws .numprev__badge.has-box { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(23, 23, 42, .06); }

/* ============ 도구 위젯 추가 컨트롤 (개선) ============ */
.ws .filebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 2px; font-size: 13px; color: var(--ink-soft); }
.ws .filebar__sum { font-weight: 600; letter-spacing: -.01em; }
.ws .filebar__act { display: flex; gap: 14px; }
.ws .linkbtn { background: none; border: none; padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; border-radius: var(--radius-sm); transition: color .15s; }
.ws .linkbtn:hover { color: var(--red); text-decoration: underline; }
.ws .linkbtn--danger:hover { color: var(--red-deep); }
.ws .filelist__pages { font-size: 12px; color: var(--ink-faint); margin-left: 2px; }
.ws .filelist__order { flex: 0 0 auto; min-width: 22px; height: 22px; display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: 12px; color: #fff; background: var(--grad); border-radius: var(--radius-sm); box-shadow: var(--sh-red); }
.ws .selbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ws .selbar__count { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ws .selbar__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ws .selbar__btns .linkbtn { border: 1px solid var(--line-2); padding: 5px 10px; border-radius: var(--radius-sm); }
.ws .selbar__btns .linkbtn:hover { color: var(--red); border-color: #ffd5d1; background: #fff7f6; text-decoration: none; }
.ws .result__size { color: var(--ink-faint); font-weight: 500; }
.ws .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.ws .dropzone.is-disabled { opacity: .55; pointer-events: none; filter: grayscale(.2); }

/* ============ 업로드 → 풀스크린 전환 ============ */
.ws-scrim { position: fixed; inset: 0; z-index: 998; background: rgba(23, 23, 42, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity var(--d-modal) var(--ez); }
body.ws-app-open .ws-scrim { opacity: 1; pointer-events: auto; }
.ws-window.is-max, .tp-window.is-max { position: fixed; z-index: 999; top: 50%; left: 50%; width: min(1040px, 94vw); max-height: 92vh; transform: translate(-50%, -50%); display: flex; flex-direction: column; box-shadow: var(--sh-lg); animation: wsPop var(--d-modal) var(--ez-out); }
.ws-window.is-max .herotool, .tp-window.is-max .tp-toolbody { flex: 1 1 auto; overflow: auto; min-height: 0; }
.ws-window.is-max .ws-winclose, .tp-window.is-max .ws-winclose { display: inline-flex; align-items: center; }
/* 퇴장: 닫을 때도 역재생으로 부드럽게(즉시 사라지지 않게) */
.ws-window.is-closing, .tp-window.is-closing { animation: wsPopOut var(--d-modal) var(--ez-out) forwards; }
@keyframes wsPop { from { opacity: 0; transform: translate(-50%, -47%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes wsPopOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -47%) scale(.98); } }
@media (max-width: 980px) { .ws-window.is-max, .tp-window.is-max { width: 96vw; max-height: 94vh; } }

/* ============ 포커스 가시성 ============ */
.ws a:focus-visible, .ws button:focus-visible, .ws .dropzone:focus-visible, .ws summary:focus-visible, .ws .herotool__tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 8px; }
.ws .field:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.ws .segmented input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 1px; }

@media (max-width: 560px) {
  .ws-wrap, .tp-col { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ws-window.is-max, .tp-window.is-max,
  .ws-window.is-closing, .tp-window.is-closing,
  .herotool__panel.is-active, .ws .pagecell { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}


/* ============ 카탈로그 홈: 드롭 히어로 + 카테고리 가로 선반 ============ */
.ws-hero { padding: 26px 0 6px; }
.ws-hero__win { max-width: 760px; margin: 0 auto; }
.ws-catalog { padding: 22px 0 88px; }
.ws-cat { margin-top: 44px; }
.ws-cat:first-child { margin-top: 18px; }
.ws-cat__head { margin-bottom: 16px; }
.ws-cat__title { font-family: var(--font); font-weight: 700; font-size: 1.42rem; letter-spacing: -.022em; color: var(--ink); }
.ws-cat__desc { margin-top: 5px; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); word-break: keep-all; }

/* 가로 선반(촤라락 펼쳐지는 줄) */
.ws-shelf { display: flex; gap: 16px; overflow-x: auto; padding: 12px 4px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ws-shelf::-webkit-scrollbar { height: 8px; }
.ws-shelf::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.ws-shelf::-webkit-scrollbar-track { background: transparent; }
.ws-card { flex: 0 0 290px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; background: var(--surf); border: 1px solid var(--line-2); border-radius: 16px; padding: 22px; color: var(--ink); box-shadow: 0 1px 2px rgba(23, 23, 42, .04), 0 6px 16px rgba(23, 23, 42, .05); transition: transform var(--d-hover) var(--ez), box-shadow var(--d-hover) var(--ez), border-color var(--d-hover) var(--ez); }
.ws-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(23, 23, 42, .05), 0 16px 34px rgba(229, 37, 42, .13); border-color: rgba(229, 37, 42, .28); text-decoration: none; }
.ws-card__ico { transition: transform var(--d-hover) var(--ez); }
.ws-card:hover .ws-card__ico { transform: translateY(-3px) scale(1.04); }
.ws-card__ico { width: 46px; height: 46px; flex: 0 0 46px; }
.ws-card__ico .ic-svg { width: 46px; height: 46px; }
.ws-card__name { display: block; font-family: var(--font); font-weight: 700; font-size: 1.08rem; letter-spacing: -.015em; color: var(--ink); }
.ws-card__desc { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); word-break: keep-all; }
.ws-soon { flex: 0 0 100%; display: grid; place-items: center; min-height: 110px; color: var(--ink-faint); font-size: .95rem; font-weight: 500; border: 1px dashed var(--line-2); border-radius: 16px; background: var(--surf-2); }

/* 촤라락 — 카드가 좌→우로 순차 슬라이드(스택에서 펼쳐지는 느낌) */
.js .ws-card[data-reveal] { opacity: 0; transform: translateX(-26px) scale(.96); transition: opacity var(--d-enter) var(--ez-out), transform var(--d-enter) var(--ez-out); transition-delay: calc(var(--i, 0) * 55ms); }
.js .ws-card[data-reveal].in { opacity: 1; transform: none; }
@media (max-width: 560px) { .ws-card { flex-basis: 78vw; } .ws-cat__title { font-size: 1.28rem; } }
@media (prefers-reduced-motion: reduce) { .js .ws-card[data-reveal] { opacity: 1 !important; transform: none !important; } }

/* PDF 정보 결과 표 */
.ws .infocard { width: 100%; }
.ws .infocard__h { font-family: var(--font); font-weight: 700; font-size: 1.05rem; margin: 0 0 12px; color: var(--ink); }
.ws .infotable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ws .infotable th, .ws .infotable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ws .infotable th { width: 38%; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.ws .infotable td { color: var(--ink); font-weight: 500; word-break: break-all; font-variant-numeric: tabular-nums; }
.ws .infotable tr:last-child th, .ws .infotable tr:last-child td { border-bottom: 0; }

/* ============ 홈 2단: 드롭 윈도우(왼) ↔ 카탈로그(오) 나란히 ============ */
.ws-home2 { padding: 24px 0 72px; }
.ws-home2grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 36px; align-items: start; max-width: 1340px; margin: 0 auto; }
.ws-home2left { position: sticky; top: 88px; align-self: start; min-width: 0; }
.ws-home2right { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1000px) {
  .ws-home2grid { grid-template-columns: 1fr; gap: 26px; }
  .ws-home2left { position: static; max-width: 760px; margin: 0 auto; width: 100%; }
}
/* 워크스페이스 단독(중앙) — 카탈로그는 우측 서랍으로 분리 */
.ws-home2--solo { max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* ===== 전체 도구 서랍(오른쪽 슬라이드 + 화면 밀림) ===== */
.ws-home2 { transition: transform .38s var(--ez-out); }
html.drawer-open .ws-home2 { transform: translateX(-96px); }
@media (max-width: 1023px) { html.drawer-open .ws-home2 { transform: none; } }
/* 오른쪽 가장자리 손잡이(탭) */
.ws-drawer-handle { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 240;
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 11px;
  background: var(--grad); color: #fff; border: none; border-radius: 15px 0 0 15px; cursor: pointer;
  box-shadow: var(--sh-red); font-family: inherit; transition: transform .22s var(--ez), opacity .22s var(--ez), filter .16s; }
.ws-drawer-handle:hover { filter: brightness(1.05); transform: translate(-3px, -50%); }
.ws-drawer-handle svg { width: 20px; height: 20px; }
.ws-drawer-handle span { writing-mode: vertical-rl; font-weight: 800; font-size: 13.5px; letter-spacing: .06em; }
html.drawer-open .ws-drawer-handle { opacity: 0; pointer-events: none; transform: translate(30px, -50%); }
/* 모바일: 세로 손잡이가 카드 내용을 가리므로 우하단 가로 알약(FAB)으로 전환 */
@media (max-width: 760px) {
  .ws-drawer-handle { top: auto; bottom: 16px; right: 14px; transform: none;
    flex-direction: row; gap: 7px; padding: 11px 16px; border-radius: 999px;
    box-shadow: 0 10px 26px rgba(229, 37, 42, .42); }
  .ws-drawer-handle:hover { transform: none; }
  .ws-drawer-handle span { writing-mode: horizontal-tb; font-size: 13.5px; }
  html.drawer-open .ws-drawer-handle { transform: translateY(40px); }
}
/* 서랍 본체 */
.ws-drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(460px, 92vw); z-index: 300;
  background: var(--surf); border-left: 1px solid var(--line-2); box-shadow: -24px 0 64px rgba(23, 23, 42, .2);
  transform: translateX(100%); visibility: hidden; transition: transform .38s var(--ez-out), visibility .38s; display: flex; flex-direction: column; }
html.drawer-open .ws-drawer { transform: translateX(0); visibility: visible; }
.ws-drawer__bar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ws-drawer__title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-weight: 800; font-size: 1.06rem; color: var(--ink); }
.ws-drawer__title svg { width: 20px; height: 20px; color: var(--red); }
.ws-drawer__title b { color: var(--red); }
.ws-drawer__x { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surf-2); color: var(--ink-soft); font-size: 16px; cursor: pointer; transition: .15s; }
.ws-drawer__x:hover { background: #fff; color: var(--red); box-shadow: var(--sh-sm); }
.ws-drawer__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 12px; }
.ws-drawer__scroll .ws-search { margin: 0; }
/* 스크림 */
.ws-drawer-scrim { position: fixed; inset: 0; z-index: 280; background: rgba(15, 17, 22, .42); opacity: 0; pointer-events: none; transition: opacity .38s var(--ez); }
html.drawer-open .ws-drawer-scrim { opacity: 1; pointer-events: auto; }
html.drawer-open { overflow: hidden; }
/* 서랍 안 카탈로그: 세로 아코디언 + 컴팩트 2열 카드 */
.ws-drawer .ws-cats { gap: 10px; }
.ws-drawer .ws-cat-row { flex-direction: column; gap: 0; align-items: stretch; }
.ws-drawer .ws-cattile { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding: 13px 15px; }
.ws-drawer .ws-cat-tools { width: 100%; }
.ws-drawer .ws-shelf { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; gap: 8px; padding: 10px 0 4px; scroll-snap-type: none; }
.ws-drawer .ws-card { flex: none; width: auto; min-width: 0; scroll-snap-align: none; flex-direction: row; align-items: center; padding: 13px; gap: 10px; border-radius: 13px; }
.ws-drawer .ws-card__ico { width: 32px; height: 32px; flex: 0 0 32px; }
.ws-drawer .ws-card__ico .ic-svg { width: 32px; height: 32px; }
.ws-drawer .ws-card__name { font-size: .95rem; }
.ws-drawer .ws-card__desc { display: none; }
@media (max-width: 460px) { .ws-drawer .ws-shelf { grid-template-columns: 1fr; } }

/* ===== 도구 검색 ===== */
.ws-search { position: relative; margin: 0 0 14px; }
.ws-search__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none; }
.ws-search__input { width: 100%; box-sizing: border-box; padding: 12px 16px 12px 42px; font-family: inherit; font-size: .96rem; color: var(--ink); background: var(--surf); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: var(--sh-sm); transition: border-color .14s var(--ez), box-shadow .14s var(--ez); }
.ws-search__input::placeholder { color: var(--ink-faint); }
.ws-search__input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(229, 37, 42, .14); }
.ws-search__empty { margin: 2px 0 14px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }

/* ===== 가로 아코디언: 정사각 카테고리 타일 + 클릭하면 도구가 타일 옆으로 분신술 촤라락 ===== */
.ws-cats__cap { margin: 4px 0 14px; font-size: .9rem; font-weight: 600; color: var(--ink-faint); letter-spacing: -.01em; }
.ws-cats { display: flex; flex-direction: column; gap: 18px; }
.ws-cat-row { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
/* 타일을 '구획 헤더'로(가라앉힘) — 도구 카드만 흰 카드로 떠 보이게 */
.ws-cattile { flex: 0 0 auto; width: 138px; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 13px 15px; text-align: left; background: var(--surf-2); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; font-family: inherit; color: var(--ink); transition: background var(--d-micro) var(--ez), border-color var(--d-hover) var(--ez); }
.ws-cattile:hover { background: var(--surf); border-color: var(--line-2); }
.ws-cattile.is-active { background: var(--surf); border-color: var(--red); }
.ws-cattile__count { align-self: flex-start; min-width: 21px; height: 21px; display: inline-grid; place-items: center; padding: 0 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: var(--surf-3); border-radius: var(--pill); font-variant-numeric: tabular-nums; }
.ws-cattile.is-active .ws-cattile__count { color: #fff; background: var(--red); }
.ws-cattile__title { font-family: var(--font); font-weight: 700; font-size: 1.02rem; letter-spacing: -.018em; line-height: 1.22; color: var(--ink); word-break: keep-all; }
/* 옆으로 펼쳐지는 도구 — 활성 행만. 끝선 정렬된 그리드 */
.ws-cat-tools { flex: 1 1 0; min-width: 0; }
.ws-cat-row:not(.is-active) .ws-cat-tools { display: none; }
.ws-cat-tools .ws-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; padding: 2px; }
.ws-cat-tools .ws-card { width: auto; flex-direction: row; align-items: center; padding: 11px 14px; gap: 10px; border-radius: 11px; box-shadow: 0 1px 2px rgba(23, 23, 42, .04), 0 3px 10px rgba(23, 23, 42, .05); }
.ws-cat-tools .ws-card__ico, .ws-cat-tools .ws-card__ico .ic-svg { width: 28px; height: 28px; flex-basis: 28px; }
.ws-cat-tools .ws-card__name { font-size: .92rem; line-height: 1.25; }
.ws-cat-tools .ws-card__desc { display: none; }
/* 분신술 — 활성 행 도구가 타일 옆에서 좌→우 순차 슬라이드 */
.js .ws-cat-row.is-active .ws-card { animation: fanIn var(--d-enter) var(--ez-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes fanIn { from { opacity: 0; transform: translateX(-22px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .ws-cat-row.is-active .ws-card { animation: none; } }
@media (max-width: 560px) { .ws-cattile { width: 102px; } }

/* 홈: 박스1(드롭 카드 = 제목+드롭존) · 박스2(옵션 카드) 두 개의 완전히 다른 카드 + 위에 도구 탭 */
.ws-deck:not(.is-max) { background: none; border: 0; box-shadow: none; overflow: visible; }
.ws-deck:not(.is-max) .herotool { padding: 0; background: none; }
.ws-deck:not(.is-max) .herotool__tabs { padding: 0 0 12px; }
.ws-deck:not(.is-max) .herotool__panel.is-active { padding: 0; }
.ws-deck .tool { display: flex; flex-direction: column; gap: 16px; background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.ws-deck .tool__left.ws-window { border-radius: var(--radius-lg); }
.ws-deck .tool__left .ws-winbar { padding: 14px 18px; }
.ws-deck .tool__leftbody { padding: 16px; }
.ws-deck .tool__right { background: var(--surf); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 1px 2px rgba(23, 23, 42, .04), 0 6px 16px rgba(23, 23, 42, .05); }
.ws-deck .tool__right .options { margin: 0; }
.ws-deck .tool__right .actions { margin-top: 14px; }
.ws-deck .tool__right .field { background: var(--surf-2); }
/* 풀스크린 닫기 버튼 */
.ws-deck__close { display: none; }
.ws-deck.is-max .ws-deck__close { display: inline-flex; position: absolute; top: 14px; right: 16px; z-index: 5; }
.ws-deck.is-max .herotool { padding: 12px; overflow: auto; }

/* ───────── 서명 넣기 ───────── */
.sign-tabs { display: flex; gap: 6px; background: var(--surf-2); padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.sign-tab { flex: 1; border: 0; background: none; padding: 8px 6px; border-radius: 9px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background var(--d-micro) var(--ez), color var(--d-micro) var(--ez); }
.sign-tab.is-active { background: var(--surf); color: var(--ink); box-shadow: 0 1px 2px rgba(23, 23, 42, .08); }
.sign-pane { display: flex; flex-direction: column; gap: 10px; }
.sign-pane[hidden] { display: none; }
.sign-draw { width: 100%; height: auto; aspect-ratio: 560 / 180; background: var(--surf); border: 1.5px dashed var(--line-2); border-radius: 12px; touch-action: none; cursor: crosshair; }
.sign-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sign-pens { display: inline-flex; gap: 7px; margin-right: auto; }
.sign-pens label { cursor: pointer; line-height: 0; position: relative; }
.sign-pens input { position: absolute; opacity: 0; width: 0; height: 0; }
.sign-pens .pen { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line-2); transition: box-shadow var(--d-micro) var(--ez); }
.sign-pens input:checked + .pen { box-shadow: 0 0 0 2px var(--ink); }
.sign-upload { display: flex; justify-content: center; padding: 20px; border: 1.5px dashed var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color var(--d-micro) var(--ez), background var(--d-micro) var(--ez); }
.sign-upload:hover { border-color: var(--red); background: var(--surf-2); }
.sign-typein { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; font: inherit; font-size: 1rem; color: var(--ink); }
.sign-typein:focus { outline: none; border-color: var(--ink); }
.sign-fonts { display: flex; gap: 6px; }
.sign-fonts label { flex: 1; position: relative; }
.sign-fonts input { position: absolute; opacity: 0; width: 0; height: 0; }
.sign-fonts span { display: block; text-align: center; padding: 7px 4px; border: 1px solid var(--line-2); border-radius: 9px; font-size: .8rem; color: var(--ink-soft); cursor: pointer; transition: border-color var(--d-micro) var(--ez), color var(--d-micro) var(--ez), background var(--d-micro) var(--ez); }
.sign-fonts input:checked + span { border-color: var(--ink); color: var(--ink); font-weight: 600; background: var(--surf-2); }
.sign-typeprev { min-height: 46px; display: flex; align-items: center; justify-content: center; background: var(--surf-2); border-radius: 10px; padding: 6px; }
.sign-typeprev img { max-height: 58px; max-width: 100%; }
.sign-cur { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sign-cur__label { flex: none; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.sign-cur__prev { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; background: var(--surf-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.sign-cur__prev img { max-height: 40px; max-width: 100%; }
.sign-cur__empty { font-size: .82rem; color: var(--ink-faint); }
.sign-add { margin-top: 12px; }

/* 왼쪽 미리보기 스테이지 */
.sign-stage { display: flex; flex-direction: column; gap: 14px; max-height: 72vh; overflow: auto; padding: 2px; }
.sign-stage__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 4; background: var(--surf); padding: 2px 2px 8px; border-bottom: 1px solid var(--line); }
.sign-stage__name { font-size: .88rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign-stage__reset { flex: none; border: 1px solid var(--line-2); background: var(--surf); color: var(--ink-soft); font: inherit; font-size: .78rem; padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: color var(--d-micro) var(--ez), border-color var(--d-micro) var(--ez); }
.sign-stage__reset:hover { color: var(--red); border-color: var(--red); }
.sign-page { position: relative; margin: 0 auto; box-shadow: 0 2px 12px rgba(23, 23, 42, .12); border-radius: 4px; overflow: hidden; }
.sign-page__cv { display: block; width: 100%; height: 100%; }
.sign-page__no { position: absolute; top: 6px; left: 6px; background: rgba(23, 23, 42, .58); color: #fff; font-size: .66rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; pointer-events: none; }
.sign-stamp { position: absolute; cursor: grab; touch-action: none; outline: 1.5px dashed transparent; outline-offset: 1px; border-radius: 2px; }
.sign-stamp:active { cursor: grabbing; }
.sign-stamp img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-select: none; user-select: none; }
.sign-stamp.is-sel { outline-color: var(--red); }
.sign-stamp__resize { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: var(--surf); border: 2px solid var(--red); border-radius: 50%; cursor: nwse-resize; opacity: 0; transition: opacity var(--d-micro) var(--ez); touch-action: none; }
.sign-stamp__del { position: absolute; right: -9px; top: -9px; width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; border: 2px solid #fff; border-radius: 50%; font-size: .62rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--d-micro) var(--ez); }
.sign-stamp:hover .sign-stamp__resize, .sign-stamp.is-sel .sign-stamp__resize,
.sign-stamp:hover .sign-stamp__del, .sign-stamp.is-sel .sign-stamp__del { opacity: 1; }
@media (max-width: 880px) { .sign-stage { max-height: none; } }

/* ===== 홈 설명 콘텐츠(신뢰 배지 · 이용법 · 왜 · FAQ) — 토큰 기반 자동 테마 대응 ===== */
.home-explain { padding: 4px 0 76px; }
.home-trust { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 46px; padding: 0; }
.home-trust li { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; text-align: center; box-shadow: var(--sh-sm); }
.home-trust b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.home-trust span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-faint); }
.home-explain__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; margin-bottom: 46px; }
.home-block__h { font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 22px; }
.home-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.home-steps li { display: flex; gap: 14px; align-items: flex-start; }
.home-steps__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--grad, var(--accent)); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px; box-shadow: var(--sh-red, none); }
.home-steps li b { display: block; color: var(--ink); font-size: 1.02rem; }
.home-steps li p { margin: 4px 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.home-why { display: flex; flex-direction: column; gap: 14px; }
.home-why__card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--sh-sm); }
.home-why__card h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.home-why__card p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }
.home-faqblock { max-width: 840px; }
.home-faq { display: flex; flex-direction: column; gap: 10px; }
.home-faq details { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); }
.home-faq summary { cursor: pointer; padding: 15px 44px 15px 16px; font-weight: 700; color: var(--ink); list-style: none; position: relative; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-weight: 700; font-size: 1.2rem; }
.home-faq details[open] summary::after { content: "\2013"; }
.home-faq details p { margin: 0; padding: 0 16px 15px; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
@media (max-width: 860px) { .home-explain__grid { grid-template-columns: 1fr; gap: 32px; } .home-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .home-trust { grid-template-columns: 1fr; } }

/* ===== 다크 모드 (prefers-color-scheme) — 토큰 반전 + 유리/하이라이트 보정 ===== */
@media (prefers-color-scheme: dark) {
  .ws {
    --ink: #e9ebef; --ink-soft: #aeb4c0; --ink-faint: #8b93a1;
    --bg: #0e1016; --surf: #171a21; --surf-2: #1e222b; --surf-3: #262b36;
    --line: #2a2f3a; --line-2: #363d4a;
    --accent-soft: #2a1618; --grad-soft: #2a1618;
    --sh-sm: 0 2px 10px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --sh: 0 14px 36px rgba(0, 0, 0, .55);
    --sh-lg: 0 30px 70px rgba(0, 0, 0, .65);
  }
  .ws body, body.ws { background: var(--bg); }
  /* 유리(글래스) 헤더·독을 어둡게 */
  .ws-taskbar { background: rgba(16, 18, 24, .82); }
  .tp-dock__cats { background: rgba(22, 25, 32, .92); border-color: var(--line-2); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
  .tp-dock__panel { background: rgba(24, 27, 34, .97); border-color: var(--line-2); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
  /* 서랍 다크 */
  .ws-drawer { background: #171a21; border-left-color: var(--line-2); box-shadow: -24px 0 64px rgba(0, 0, 0, .6); }
  .ws-drawer__x:hover { background: var(--surf-3); }
  /* 타일 상단 흰 하이라이트 제거 + 그림자 강화 */
  .ws-tile { box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 6px 14px rgba(0, 0, 0, .4), 0 16px 30px rgba(0, 0, 0, .45); }
  .ws-tile:hover { box-shadow: 0 2px 5px rgba(0, 0, 0, .45), 0 18px 34px rgba(0, 0, 0, .55); }
  /* 하드코딩 밝은 accent 표면 보정 */
  .ws .result { background: #10241a; border-color: #1f4a33; }
  .ws .result__ok { color: #7fdca8; }
  .ws-kicker, .ws-launchhero__badge { border-color: #4a1e1e; }
  .ws-cattile.is-active { border-color: var(--red); }
  /* 종이/캔버스는 밝게 유지: 서명 그리기, 번호 미리보기 배지, PDF 썸네일 */
  .sign-draw { background: #f4f5f7; }
  .ws .numprev__badge.has-box { background: rgba(255, 255, 255, .85); }
  .pagecell__img { background: #fff; }

  /* ===== 다크 특화: 깊이 · 엘리베이션 · 네온 글로우 ===== */
  /* 1) 납작한 검정 대신 은은한 방사형 그라데이션 배경으로 깊이감 */
  .ws body, body.ws { background:
      radial-gradient(1200px 680px at 50% -10%, #171c27 0%, rgba(23,28,39,0) 60%),
      radial-gradient(900px 520px at 85% 4%, #201526 0%, rgba(32,21,38,0) 55%),
      var(--bg); }
  /* 2) 카드: 상단 미세 하이라이트 + 또렷한 테두리 + 깊은 그림자(글래스 느낌) */
  .ws-deck, .ws-window { border: 1px solid var(--line-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .4), 0 24px 54px rgba(0, 0, 0, .5); }
  /* 3) 기본 CTA(빨강)에 은은한 네온 글로우 */
  .ws .btn--primary:not(:disabled) { box-shadow: 0 0 0 1px rgba(229, 37, 42, .35), 0 8px 26px rgba(229, 37, 42, .4), 0 2px 8px rgba(0, 0, 0, .5); }
  .ws .btn--primary:not(:disabled):hover { box-shadow: 0 0 0 1px rgba(229, 37, 42, .5), 0 16px 40px rgba(229, 37, 42, .5); }
  .dropzone__btn { box-shadow: 0 0 0 1px rgba(229, 37, 42, .3), 0 6px 20px rgba(229, 37, 42, .4); }
  /* 4) 드롭존: 미세 그라데이션 + 호버/포커스 시 빨강 글로우 */
  .dropzone { background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0)); border-color: var(--line-2); }
  .dropzone:hover, .dropzone:focus-visible, .dropzone--over { border-color: var(--red); background: rgba(229, 37, 42, .06); box-shadow: inset 0 0 44px rgba(229, 37, 42, .05); }
  /* 5) 헤더·푸터를 경계선으로 층 분리 + 글래스 블러 */
  .ws-taskbar { border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); }
  .ws-foot { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(0, 0, 0, 0)); }
  /* 6) 메뉴바 '전체 도구' 항목 다크 대비 */
  .ws-nav__alltools { background: var(--surf-2); border-color: var(--line-2); }
  .ws-nav__alltools:hover { background: var(--surf-3); border-color: var(--line-strong, var(--line)); }
  /* 7) 활성 히어로 탭 글로우 */
  .ws-window .herotool__tab[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(229, 37, 42, .3); }
}