/* 수심달 가이드 허브 공통 스타일 (운영용 · 학생용 · 선생님용 · 가맹 학원용)
   2026-09-29: 원래 허브의 색 · 글꼴 · 캐릭터를 그대로 두고, 배치만 앱스토어처럼 바꿨습니다.
   PC는 왼쪽 사이드바(검색 · 카테고리) + 오른쪽 목록(앱 행 + 미리보기), 휴대폰은 아래 탭 막대입니다. 추천 배너는 2026-09-29 사용자 지시로 뺐습니다.
   2026-09-29 색: 바탕 · 선택 · 버튼 · 테두리는 회색, 분홍 · 보라는 로고 · 메뉴 아이콘 · 「시작하기」 글자 같은 포인트에만 씁니다(사용자 지시). */
:root{--pink:#FF6971;--pink-deep:#E0505C;--violet:#918AFF;--violet-deep:#4B43C9;--ink:#2F2F31;--ink-70:#5A5A5E;--ink-60:#6E6E73;--ink-50:#86868B;--ink-30:#C7C7CC;--line:#E5E5EA;--fill:#F2F2F7;--fill-2:#E8E8ED;--bg:#F5F5F7;--card:#fff;--ease:cubic-bezier(.22,1,.36,1);--side-w:260px;--tabbar-h:0px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;font-size:16px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* 아이콘: Lucide(오픈소스 아이콘 모음) SVG를 마스크로 씁니다 */
.ic{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-search{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/search.svg)}
.ic-book{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/book-open.svg)}
.ic-sparkles{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/sparkles.svg)}
.ic-users{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/users.svg)}
.ic-monitor{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/monitor.svg)}
.ic-briefcase{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/briefcase.svg)}
.ic-link{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/link.svg)}
.ic-ext{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/external-link.svg)}
.ic-x{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@1.48.0/icons/x.svg)}

/* ── 틀: 왼쪽 사이드바 + 오른쪽 본문 ───────── */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:22px 14px 18px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-right:1px solid var(--line)}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.m-link{display:none;font-size:13px;font-weight:700;color:var(--ink-50);white-space:nowrap}
.m-link:hover{color:var(--ink)}
.brand{display:flex;align-items:center;gap:8px;padding:2px 8px;font-weight:900;color:var(--ink);font-size:17px;letter-spacing:-.2px}
.brand i{width:28px;height:28px;border-radius:8px;background:var(--pink);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-style:normal;font-weight:900}
.brand .badge{font-size:11.5px;font-weight:800;color:var(--violet-deep);background:var(--fill);padding:3px 9px;border-radius:999px;letter-spacing:0}
.search{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;border-radius:12px;background:rgba(118,118,128,.12);color:var(--ink-50);transition:background .15s,box-shadow .15s}
.search:focus-within{background:#fff;box-shadow:0 0 0 3px rgba(60,60,67,.16)}
.search .ic{width:17px;height:17px}
.search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:15.5px;color:var(--ink);outline:none}
.search input::placeholder{color:var(--ink-50)}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{display:none;width:22px;height:22px;border:0;border-radius:50%;background:rgba(118,118,128,.45);color:#fff;cursor:pointer;align-items:center;justify-content:center;padding:0}
.search .clear .ic{width:13px;height:13px}
.search.has .clear{display:inline-flex}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-h{margin:12px 10px 4px;font-size:12px;font-weight:800;color:var(--ink-50)}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);font-size:15.5px;font-weight:700;line-height:1.3;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.nav-item .ic{width:22px;height:22px;color:var(--pink)}
.nav-item[data-aud=teacher] .ic,.nav-item[data-aud=ops] .ic{color:var(--violet)}
.nav-item .cnt{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-50)}
.nav-item:hover{background:rgba(0,0,0,.04)}
.nav-item.on{background:var(--fill-2);color:var(--ink)}
.nav-item.on .cnt{color:var(--ink-60)}
.nav-item:focus-visible{outline:2px solid var(--ink-60);outline-offset:1px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:10px 10px 0}
.side-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink-70)}
.side-link .ic{width:16px;height:16px}
.side-link:hover{color:var(--ink)}
.side-copy{margin:0;font-size:12px;color:var(--ink-50);line-height:1.55}

.main{min-width:0;padding:30px 44px 56px}
.main-in{max-width:1080px;margin:0 auto}

/* 제목(앱스토어의 큰 제목) */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.page-h h1{margin:0;font-size:32px;font-weight:800;letter-spacing:-.8px;line-height:1.2}
.page-h p{margin:0;color:var(--ink-50);font-size:14px;font-weight:700;white-space:nowrap}
.empty{margin:40px 0;text-align:center;color:var(--ink-50);font-size:15px}

/* 앱 행 + 미리보기: 가이드 하나를 흰 카드 하나로 묶고(2026-09-29 사용자 지시), 모든 카드를 같은 크기로 둡니다 */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.app{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 30px -24px rgba(20,20,30,.35);transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
.app:hover{transform:translateY(-3px);box-shadow:0 24px 42px -28px rgba(20,20,30,.42)}
.app:hover{border-color:#D1D1D6}
.app-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:14px}
.app-icon{flex:none;width:72px;height:72px;border-radius:17px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px -6px rgba(20,20,30,.3);overflow:hidden;display:flex;align-items:center;justify-content:center}
.app-icon img{width:100%;height:100%;object-fit:contain}
.app-txt{min-width:0}
.app h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .hit::after{content:"";position:absolute;inset:0;z-index:1;border-radius:22px}
.app .hit:focus{outline:none}
.app .hit:focus-visible::after{outline:3px solid var(--ink-60);outline-offset:0}
.app .sub{margin:3px 0 0;font-size:14px;line-height:1.4;min-height:2.8em;color:var(--ink-50);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app .meta{margin:4px 0 0;font-size:12.5px;font-weight:700;color:var(--ink-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .meta b{color:var(--ink-70);font-weight:800}
.app .meta .resume{color:var(--pink-deep)}
.get-col{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:86px}
.get{display:inline-flex;align-items:center;justify-content:center;min-width:80px;padding:6px 16px;border-radius:999px;background:var(--fill);color:var(--pink-deep);font-size:15px;font-weight:800;white-space:nowrap;transition:background .15s}
.app:hover .get{background:var(--fill-2)}
.get-col .cap{font-size:11px;font-weight:700;color:var(--ink-50);white-space:nowrap}
.shot{position:relative;margin-top:16px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--fill);box-shadow:0 14px 32px -22px rgba(20,20,30,.45)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}

/* 공유 링크 복사 버튼(운영용 · 가맹 학원용 허브의 미리보기 아래) */
.share{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:14px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-70);font-size:13px;font-weight:800;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.share svg{width:15px;height:15px;flex:none}
.share:hover{border-color:var(--ink-30);color:var(--ink)}
.share:focus-visible{outline:2px solid var(--ink-60);outline-offset:2px}
.share.done{background:var(--fill);border-color:var(--fill);color:var(--ink)}
.share.ph{visibility:hidden;pointer-events:none}

/* 공유용 허브 주소(운영용 허브, 왼쪽 메뉴의 「공유용 허브」를 눌렀을 때만 보임) */
.hubs{margin:0}
.hubs[hidden]{display:none}
.hubs-note{margin:0 0 16px;color:var(--ink-50);font-size:14px}
.hubs-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hub-item{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 30px -24px rgba(20,20,30,.35)}
.hub-item h3{margin:0;font-size:16.5px;letter-spacing:-.2px}
.hub-item p{margin:0;font-size:13.5px;color:var(--ink-70);line-height:1.5}
.hub-item .url{font-size:12.5px;font-weight:700;color:var(--ink-50);word-break:break-all}
.hub-item .acts{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.hub-item .share{margin-top:0}
.hub-item .open{flex:none;display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;background:var(--fill);color:var(--pink-deep);font-size:13px;font-weight:800;white-space:nowrap}
.hub-item .open:hover{background:var(--fill-2)}

.site{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-50);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 휴대폰 아래 탭 막대(앱스토어 앱의 탭 막대) */
.tabbar{display:none}

/* ── 화면 폭에 따라 ─────────────────────── */
@media (max-width: 1180px){
  .main{padding:26px 28px 48px}
  .grid{gap:20px}
  .hubs-list{grid-template-columns:1fr}
}
@media (max-width: 900px){
  :root{--tabbar-h:64px}
  .shell{display:block}
  .side{position:static;height:auto;overflow:visible;gap:10px;padding:14px 16px 12px;border-right:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.86)}
  .brand{font-size:16px}
  .side-nav,.side-foot{display:none}
  .main{padding:18px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px)}
  .m-link{display:inline-block} /* 휴대폰에서는 사이드바 아래 링크가 숨으므로 위쪽 줄에 둡니다 */
  .brand{padding:2px 0}
  .page-h{margin:4px 0 18px}
  .page-h h1{font-size:26px}
  .grid{grid-template-columns:1fr;gap:16px}
  .app{padding:14px;border-radius:18px}
  .app .hit::after{border-radius:18px}
  .shot{margin-top:14px;border-radius:12px}
  .app-row{grid-template-columns:60px minmax(0,1fr) auto;gap:12px}
  .app-icon{width:60px;height:60px;border-radius:14px}
  .app h3{font-size:17px}
  .get-col{min-width:74px}
  .get{min-width:70px;padding:6px 12px;font-size:14px}
  .site{flex-direction:column;gap:6px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
  .tabbar button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border:0;background:transparent;color:var(--ink-50);font-size:10.5px;font-weight:700;line-height:1.2;text-align:center;cursor:pointer}
  .tabbar button .ic{width:24px;height:24px}
  .tabbar button.on{color:var(--ink)}
  .tabbar button.on .ic{color:var(--pink)}
  .tabbar button.on[data-aud=teacher] .ic,.tabbar button.on[data-aud=ops] .ic{color:var(--violet)}
  .tabbar button:focus-visible{outline:2px solid var(--ink-60);outline-offset:-2px;border-radius:10px}
}
@media (prefers-reduced-motion: reduce){.shot img,.app{transition:none!important}.app:hover{transform:none}html{scroll-behavior:auto}}