/* 홈·2026Mech·시뮬레이터·강의에 더하여·프로그램 목록 페이지의 공통 스타일 (옛 디자인은 /archive/) */
:root{
  --ink:#1B2430; --ink-soft:#57616F; --ink-faint:#8A93A1; --line:#E2E6EB; --paper:#F6F7F9; --card:#FFFFFF;
  --navy:#213863; --navy-deep:#152540; --navy-soft:#E7ECF5;
  --teal:#0F8A82; --teal-soft:#E3F4F1;
  --amber:#B4690E; --amber-soft:#FBF0DF;
  --rose:#B8465A; --rose-soft:#FBEAEC;
  --radius:14px;
  --tap:44px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{background:var(--paper);color:var(--ink);font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px;}
[hidden]{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}


/* 상단 메뉴 (하위 페이지) */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;height:56px;padding:0 8px;background:var(--navy-deep);color:#fff;}
.topbar a.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:10px;color:#C7D4E8;text-decoration:none;}
.topbar a.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.topbar .topbar-title{flex:1;min-width:0;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}
.topbar .spacer{width:var(--tap);}
.icon{width:22px;height:22px;flex:0 0 auto;}

/* 머리글 */
.hero{background:linear-gradient(155deg,var(--navy-deep) 0%,var(--navy) 62%,#2B4C7E 100%);color:#fff;padding:36px 20px 64px;text-align:center;}
.hero h1{margin:14px 0 8px;font-size:clamp(24px,6vw,32px);font-weight:900;letter-spacing:-.01em;}
.hero p{margin:0;color:#C7D4E8;font-size:15px;}
.hero.compact{padding:22px 20px 56px;}
.hero.compact h1{margin:0 0 4px;font-size:clamp(22px,5.4vw,28px);}
/* 브랜드: 산과 자전거 — "Physics, True to Its Nature." 능선은 퍼텐셜 에너지 곡선처럼 매끄럽게 */
.hero h1.brand-title{display:inline-flex;align-items:center;gap:.32em;margin:6px 0 10px;font-family:'Times New Roman',Times,serif;font-weight:700;font-size:clamp(28px,7.4vw,40px);letter-spacing:-.005em;}
.brand-title .brand-icon{width:1.3em;height:1.3em;color:#7FA8E0;flex:0 0 auto;}
.hero p.motto{font-family:'Times New Roman',Times,serif;font-style:italic;font-weight:700;font-size:clamp(16px,4.2vw,19px);color:#E6EDF8;letter-spacing:.01em;}
.topbar .topbar-title{display:flex;align-items:center;justify-content:center;gap:7px;font-family:'Times New Roman',Times,serif;font-size:17px;}
.topbar .topbar-title .brand-icon{width:19px;height:19px;color:#7FA8E0;flex:0 0 auto;}
.topbar .topbar-title > span{overflow:hidden;text-overflow:ellipsis;}
a.topbar-title{color:#fff;text-decoration:none;}
a.topbar-title:hover > span{text-decoration:underline;text-underline-offset:3px;}
/* 처음 열 때 산 능선 → 바퀴 → 차체 순서로 그려지듯 나타납니다 */
.brand-title .brand-icon > *,.brand-line .brand-icon > *{stroke-dasharray:1 2;stroke-dashoffset:1;animation:draw .9s cubic-bezier(.4,0,.2,1) forwards;}
.brand-title .brand-icon .wheel,.brand-line .brand-icon .wheel{animation-delay:.45s;}
.brand-title .brand-icon .frame,.brand-line .brand-icon .frame{animation-delay:.8s;}
@keyframes draw{to{stroke-dashoffset:0;}}

.wrap{max-width:720px;margin:-36px auto 0;padding:0 16px 48px;position:relative;}

/* 구역 */
.section{margin-top:28px;}
.section:first-child{margin-top:0;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 4px 10px;}
.section-head h2{margin:0;font-size:15px;font-weight:800;color:var(--ink);}
.section-head a{font-size:14px;font-weight:700;color:var(--teal);text-decoration:none;padding:8px 0;}
.section-head a:hover{text-decoration:underline;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 3px rgba(21,37,64,.06);overflow:hidden;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 16px;border-bottom:1px solid var(--line);}
.panel-head h2{margin:0;font-size:15px;font-weight:800;}
.panel-head a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;font-size:14px;font-weight:700;color:var(--teal);text-decoration:none;}
.panel-head a:hover{text-decoration:underline;}
.panel-head .link-btn{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--teal);cursor:pointer;}
.panel-head .link-btn:hover{text-decoration:underline;}
#todoMore{overflow:hidden;}
.panel .status-msg{margin:12px;}
.tabs + .status-msg{margin-top:16px;}
#panels{margin-top:18px;}

/* 한 줄 목록 */
.row{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;text-decoration:none;color:inherit;background:var(--card);border:0;width:100%;font:inherit;text-align:left;}
.row + .row,.row-wrap + .row-wrap,.row + .row-wrap,.row-wrap + .row{border-top:1px solid var(--line);}
.row-wrap{display:flex;align-items:center;gap:2px;padding-right:8px;background:var(--card);}
.row-wrap > .row{flex:1;min-width:0;}
a.row:hover{background:#FAFBFC;}
a.row:hover .row-title{color:var(--teal);}
.row-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--navy-soft);color:var(--navy);flex:0 0 auto;}
.row-body{flex:1;min-width:0;}
.row-title{font-size:16px;font-weight:700;line-height:1.35;}
.row-desc{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-meta{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.row-end{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--ink-faint);}
.row.muted .row-title{color:var(--ink-soft);font-weight:600;}
.row.muted{cursor:default;}

/* 남은 날짜 배지 */
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;background:var(--teal-soft);color:var(--teal);font-variant-numeric:tabular-nums;}
.chip.soon{background:var(--amber-soft);color:var(--amber);}
.chip.urgent{background:var(--rose-soft);color:var(--rose);}
.chip.plain{background:var(--paper);color:var(--ink-soft);}

/* 다운로드 버튼 */
.dl-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:10px;color:var(--ink-soft);}
.dl-btn:hover{background:var(--paper);color:var(--teal);}

/* 탭 (같은 너비로 나눔) */
.tabs{display:flex;gap:4px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(21,37,64,.06);}
.tab{flex:1;min-height:var(--tap);border:0;border-radius:9px;background:none;font:inherit;font-size:14.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
.tab .count{font-size:12px;font-weight:700;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.tab[aria-selected="true"]{background:var(--navy);color:#fff;}
.tab[aria-selected="true"] .count{color:#C7D4E8;}
.tab:not([aria-selected="true"]):hover{background:var(--paper);color:var(--ink);}

/* 접는 묶음 */
details.fold{margin-top:12px;}
details.fold > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);padding:0 16px;border-radius:12px;cursor:pointer;font-size:14.5px;font-weight:700;color:var(--ink-soft);}
details.fold > summary::-webkit-details-marker{display:none;}
details.fold > summary:hover{background:#ECEFF3;color:var(--ink);}
details.fold > summary .chev{transition:transform .15s;}
details.fold[open] > summary .chev{transform:rotate(180deg);}
details.fold > .panel{margin-top:6px;}

.empty{padding:22px 16px;text-align:center;color:var(--ink-soft);font-size:14px;}
.status-msg{margin:0 4px 12px;padding:12px 14px;border-radius:10px;background:var(--rose-soft);color:var(--rose);font-size:14px;}
.skeleton{height:64px;background:linear-gradient(90deg,#F1F3F6 0%,#F8F9FB 50%,#F1F3F6 100%);background-size:200% 100%;animation:sk 1.2s infinite;}
.skeleton + .skeleton{border-top:1px solid var(--line);}
@keyframes sk{to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none;}details.fold > summary .chev{transition:none;}}

footer.copyright{margin-top:40px;font-size:12px;color:#9AA2B1;text-align:center;}
footer.copyright a{color:#9AA2B1;text-underline-offset:2px;}
footer.copyright a:hover{color:var(--teal);}

/* ── 움직임 ───────────────────────────── */
@view-transition{navigation:auto;}

/* 머리글 */
.hero{position:relative;overflow:hidden;isolation:isolate;}
.hero > *{position:relative;}

/* 차례로 떠오르기 */
.reveal{animation:rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms);}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* 줄: 누르고 가리킬 때 */
.row{transition:background-color .15s ease;}
.row .row-end > svg:last-child{transition:transform .2s cubic-bezier(.2,.7,.2,1),color .15s;}
a.row:hover .row-end > svg:last-child{transform:translateX(3px);color:var(--teal);}
a.row:active{background:#F1F4F7;}
.row-icon{transition:transform .25s cubic-bezier(.3,1.6,.5,1),background-color .2s,color .2s;}
a.row:hover .row-icon{transform:scale(1.08) rotate(-4deg);background:var(--teal-soft);color:var(--teal);}
.row-title{transition:color .15s;}
.dl-btn{transition:background-color .15s,color .15s,transform .15s;}
.dl-btn:active{transform:translateY(2px);}

/* 급한 마감 배지: 은은하게 맥박 */
.chip.urgent{animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(184,70,90,.35);}50%{box-shadow:0 0 0 6px rgba(184,70,90,0);}}

/* 탭: 미끄러지는 선택 표시 */
.tabs{position:relative;}
.tab{position:relative;z-index:1;transition:color .2s ease;}
.tab[aria-selected="true"]{background:none;}
.tabs:not(:has(.tab-pill)) .tab[aria-selected="true"]{background:var(--navy);}
.tab-pill{position:absolute;top:4px;bottom:4px;left:0;border-radius:9px;background:var(--navy);box-shadow:0 2px 8px rgba(21,37,64,.25);z-index:0;}
.tab-pill.ready{transition:transform .32s cubic-bezier(.3,1.2,.4,1),width .32s cubic-bezier(.3,1.2,.4,1);}
.tab:active{transform:scale(.97);}
/* 탭 줄 끝의 아이콘 링크(대쉬보드): 글자 탭보다 좁게 */
.tabs .tab-link{flex:0 0 52px;text-decoration:none;color:var(--ink-soft);}
.tabs .tab-link:hover{background:var(--paper);color:var(--navy);}
.tabs .tab-link .icon{width:20px;height:20px;}

/* 접기: 닫히는 동안 화살표도 함께 */
details.fold.closing > summary .chev{transform:none;}
details.fold > .panel{overflow:hidden;}
details.fold > summary{transition:background-color .15s,color .15s;}

/* 상단 메뉴: 스크롤하면 그림자 */
.topbar{transition:box-shadow .2s;}
.topbar.scrolled{box-shadow:0 4px 16px rgba(21,37,64,.28);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal{opacity:1;transform:none;}
  .brand-title .brand-icon > *,.brand-line .brand-icon > *{stroke-dashoffset:0;}
  @view-transition{navigation:none;}
}

/* ── 깔끔하게: 테두리 대신 배경 대비, 넉넉한 여백 ───────────── */
:root{--paper:#F2F4F6;--ink:#191F28;--ink-soft:#4E5968;--ink-faint:#8B95A1;--radius:20px;}
.panel{border:0;box-shadow:none;}
.row + .row,.row-wrap + .row-wrap,.row + .row-wrap,.row-wrap + .row{border-top:0;}
.row{min-height:68px;padding:14px 20px;}
.row-wrap{padding-right:12px;}
.panel-head{border-bottom:0;padding:14px 12px 2px 20px;}
.panel-head h2{font-size:17px;}
.section-head{margin:0 6px 12px;}
.section-head h2{font-size:17px;}
.section{margin-top:32px;}
.tabs{border:0;box-shadow:0 1px 2px rgba(21,37,64,.04);border-radius:16px;}
details.fold > summary:hover{background:#E8EBEE;}
.row-kicker{display:none;}

/* ── 넓은 화면(아이패드·데스크톱): 바로가기를 타일로 ───────────── */
@media (min-width:768px){
  .hero{padding:52px 24px 92px;}
  .hero.compact{padding:30px 24px 72px;}
  .wrap{max-width:960px;padding:0 32px 64px;margin-top:-48px;}
  .row{min-height:76px;padding:16px 24px;}
  .row-title{font-size:17px;}
  .panel-head{padding:18px 16px 4px 24px;}

  .shortcuts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;background:none;overflow:visible;}
  .shortcuts .row{position:relative;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;min-height:104px;padding:22px 24px;border-radius:var(--radius);
    transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background-color .15s;}
  .shortcuts .row:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(21,37,64,.08);background:var(--card);}
  .shortcuts .row-icon{width:40px;height:40px;border-radius:12px;}
  .shortcuts .row-icon .icon{width:20px;height:20px;}
  .shortcuts .row-body{flex:1;min-width:0;}
  .shortcuts .row-title{font-size:19px;font-weight:800;letter-spacing:-.01em;}
  .shortcuts .row-desc{font-size:15px;margin-top:4px;white-space:normal;}
  .shortcuts .row-end{display:none;} /* 타일 전체가 링크라 화살표 없이 */
  .shortcuts .row-title{word-break:keep-all;}
  /* 이번 학기 과목: 머리글 남색을 옅게 푼 색. 같은 색 계열의 명도 차로만 강조하고, 청록은 작은 신호(D-day 등)에만 남겨 둡니다. */
  .shortcuts .featured{grid-column:span 2;background:linear-gradient(135deg,#E3EAF6 0%,#EDF1F8 100%);}
  .shortcuts .featured:hover{background:linear-gradient(135deg,#DCE5F3 0%,#E8EEF7 100%);box-shadow:0 12px 32px rgba(33,56,99,.10);}
  .shortcuts .featured .row-icon,.shortcuts .featured:hover .row-icon{background:#fff;color:var(--navy);}
  .shortcuts .featured .row-title{font-size:22px;color:var(--navy-deep);}
  .shortcuts .featured:hover .row-title{color:var(--navy-deep);}
  .shortcuts .featured .row-desc{color:#4E5968;}
  .shortcuts .featured .row-end{color:#5E7193;}
  .shortcuts .featured:hover .row-end > svg:last-child{color:var(--navy);}
  .shortcuts .featured .row-kicker{display:block;margin-bottom:2px;font-size:13px;font-weight:700;color:#2B4C7E;letter-spacing:.02em;}
}
@media (min-width:1024px){
  .shortcuts{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:768px){
  .wrap.narrow{max-width:760px;}
}
/* 홈: 진행 중인 자료가 없으면 머리글과 겹치지 않고, 머리글 아래에 '바로가기' 제목과 카드가 차례로 놓입니다 */
.section[hidden] + .section{margin-top:0;}


/* ── 하위 목록 페이지(시뮬레이터·강의에 더하여·프로그램) ───────────── */
/* 분야가 많으면 휴대폰에서 탭을 옆으로 밀어 봅니다 */
.tabs.scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.tabs.scroll::-webkit-scrollbar{display:none;}
.tabs.scroll .tab{flex:0 0 auto;padding:0 16px;white-space:nowrap;}
/* 목록: 설명은 모두 두 줄 높이로 맞춰 줄마다 높이가 같습니다 */
.catalog .row-desc{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.45;min-height:2.9em;}
.catalog .row-title{display:block;}
.catalog .row-title .katex{font-size:1.02em;}
.topbar{padding-inline:max(8px,calc((100vw - 960px) / 2));}
@media (min-width:768px){
  .tabs.scroll .tab{flex:1 0 auto;}
  .catalog .row-desc{-webkit-line-clamp:3;min-height:4.35em;}
  .catalog .row{min-height:0;justify-content:flex-start;gap:20px;}
  .catalog .row-body{margin-top:auto;}
}
@media (min-width:768px){ body:has(.wrap.narrow) .topbar{padding-inline:max(16px,calc((100vw - 760px) / 2));} }

/* 카드는 머리글과 겹치지 않습니다. 머리글에 걸치는 것은 탭뿐입니다. */
.hero,.hero.compact{padding-bottom:36px;}
.wrap{margin-top:24px;}
body:has(#tabs:not([hidden])) .hero{padding-bottom:52px;}
body:has(#tabs:not([hidden])) .wrap{margin-top:-26px;}
@media (min-width:768px){
  .hero,.hero.compact{padding-bottom:48px;}
  .wrap{margin-top:32px;}
  body:has(#tabs:not([hidden])) .hero{padding-bottom:64px;}
  body:has(#tabs:not([hidden])) .wrap{margin-top:-26px;}
}

/* ── 큰 카드(시뮬레이터·강의에 더하여·프로그램): 설명 전체를 보여 줍니다 ───────────── */
.cards{display:grid;gap:12px;}
.card{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 20px 22px;border-radius:var(--radius);background:var(--card);color:inherit;text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;}
.card:active{background:#F7F8FA;}
.card-top{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.card-top .card-title{flex:1;min-width:0;}
.title-chip{height:22px;margin-left:8px;padding:0 8px;font-size:12px;vertical-align:3px;}
.card-top .row-end{flex:0 0 auto;align-self:flex-start;margin-top:10px;}
.card-top .row-end{color:var(--ink-faint);}
.card-title{display:block;font-size:18px;font-weight:800;line-height:1.4;letter-spacing:-.01em;}
.card-title .katex{font-size:1.02em;}
.card-desc{display:block;font-size:15px;line-height:1.65;color:var(--ink-soft);}
.card .row-icon{transition:transform .25s cubic-bezier(.3,1.6,.5,1),background-color .2s,color .2s;}
.card .row-end > svg:last-child{transition:transform .2s cubic-bezier(.2,.7,.2,1),color .15s;}
@media (hover:hover){
  .card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(21,37,64,.08);}
  .card:hover .card-title{color:var(--teal);}
  .card:hover .row-icon{transform:scale(1.08) rotate(-4deg);background:var(--teal-soft);color:var(--teal);}
  .card:hover .row-end > svg:last-child{transform:translateX(3px);color:var(--teal);}
}
@media (min-width:768px){
  .cards{grid-template-columns:repeat(2,1fr);gap:16px;}
  .card{padding:24px 24px 26px;}
  .card-title{font-size:19px;}
}
@media (min-width:1024px){ .cards{grid-template-columns:repeat(3,1fr);} }

/* ── 홈 머리글: 산 능선 위를 달리는 자전거 (ui/ridge-hero.js) ─────────
   브랜드 이름을 작게 위에, 모토를 크게 아래에. 맨 앞 능선은 페이지 바탕색이라 머리글 아랫단이 산 실루엣이 됩니다. */
.hero.home-hero{padding:30px 20px 0;}
.home-hero .hero-text{padding-bottom:88px;}
.home-hero h1.brand-line{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;font-family:'Times New Roman',Times,serif;font-size:19px;font-weight:700;letter-spacing:.02em;color:#C7D4E8;}
.home-hero .brand-line .brand-icon{width:24px;height:24px;color:#7FA8E0;flex:0 0 auto;}
.home-hero p.motto{margin:0;font-family:'Times New Roman',Times,serif;font-style:italic;font-weight:700;font-size:clamp(28px,7.6vw,40px);line-height:1.1;letter-spacing:-.01em;color:#fff;}
.home-hero .ridge-canvas{position:absolute;left:0;bottom:-1px;display:block;width:100%;height:104px;pointer-events:none;}
@media (min-width:768px){
  .hero.home-hero{padding-top:40px;}
  .home-hero .motto br{display:none;} /* 넓은 화면에서는 모토를 한 줄로 */
  .home-hero h1.brand-line{font-size:23px;gap:9px;margin-bottom:6px;}
  .home-hero .brand-line .brand-icon{width:28px;height:28px;}
  .home-hero p.motto{font-size:clamp(36px,3.6vw,46px);}
  .home-hero .hero-text{padding-bottom:104px;}
  .home-hero .ridge-canvas{height:136px;}
}
/* 산 능선 너머의 달과 별: 아주 천천히 반짝입니다(별 8·11초, 달빛 14초 주기). 글자와 겹치지 않게 양옆에 둡니다. */
.home-hero .hero-text{z-index:1;}
.home-hero .sky{position:absolute;inset:0;z-index:0;pointer-events:none;}
.home-hero .sky svg{position:absolute;display:block;}
.home-hero .moon{right:8%;top:30%;width:22px;height:22px;color:#E9EFF9;animation:moon-glow 14s ease-in-out infinite;}
.home-hero .star{width:10px;height:10px;color:#DCE6F6;animation:twinkle 8s ease-in-out infinite;}
.home-hero .star.s1{left:7%;top:20%;}
.home-hero .star.s2{left:14%;top:46%;width:7px;height:7px;animation-duration:11s;animation-delay:-5s;}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.75);}50%{opacity:.9;transform:scale(1);}}
@keyframes moon-glow{0%,100%{opacity:.8;filter:drop-shadow(0 0 3px rgba(233,239,249,.25));}50%{opacity:1;filter:drop-shadow(0 0 9px rgba(233,239,249,.55));}}
@media (min-width:768px){
  .home-hero .moon{right:13%;top:26%;width:30px;height:30px;}
  .home-hero .star{width:12px;height:12px;}
  .home-hero .star.s1{left:12%;top:22%;}
  .home-hero .star.s2{left:20%;top:50%;width:8px;height:8px;}
}
/* 그 밖의 머리글: 바닥에 옅은 산 능선 두 겹(같은 식으로 만든 그림) */
.hero.compact{background-image:url(/ui/ridges.svg),linear-gradient(155deg,var(--navy-deep) 0%,var(--navy) 62%,#2B4C7E 100%);
  background-repeat:no-repeat;background-position:center bottom,0 0;background-size:100% 64px,auto;}

/* 회원 아이콘(/ui/member.js): 상단 메뉴 오른쪽, 홈은 머리글 오른쪽 위. 승인된 회원이면 작은 청록 점 */
.topbar a.icon-btn.account,.hero > a.hero-account{position:relative;}
.hero > a.hero-account{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:10px;color:#C7D4E8;text-decoration:none;}
.hero > a.hero-account:hover{background:rgba(255,255,255,.08);color:#fff;}
.account .icon,.hero-account .icon{width:22px;height:22px;}
.account-dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:#3CC4B9;box-shadow:0 0 0 2px var(--navy-deep);}