/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


:root{
  --bg: #ffffff;
  --text: #111;
  --panel: #f7f7f8;
  --border: #e5e7eb;
  --hover: #eef2f7;
  --accent: #2b67f6;
}

* {
  box-sizing: border-box;
  }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Verdana, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
  line-height: 1.65;
}

html, body {
  margin:0;
  max-width: 100%;
  overflow-x: hidden;
}

img, video{ max-width: 100%; height: auto; display: block;}
/*이미지, 비디오가 박스 밖으로 안 튀게 함*/

.home-main{
  min-height: 100vh;
  min-height: 100dvh;
  /*vh는 기본값, dvh는 최신 브라우저에 지원. css는 항상 밑의 줄이 먼저 작동하게 됨*/
  display: flex; justify-content: center; align-items: center;
  padding: 16px;
}

.home-box{
  display: flex; width: 100%; max-width: 1320px;
  background: #fff; border-radius: 16px; overflow: hidden;
}

.home-box left{ flex: 0 0 220px; background: #efefef }
.home-box right{ flex: 1 1 auto; padding: 20px; background: #fff }

img, video { max-width: 100%; height: auto; display: block;}
  
@media (max-width: 768px) {
  .home-box{ flex-direction: column; }
  .home-box left{ flex: none; width: 100%; }
  .home-box right{ padding: 16px; }
  .grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
}

/*사이드 메뉴*/
.left-menu { list-style: none; padding: 16px 10px; margin: 0; }
.left-menu li{ margin: 8px 0; }

.menu-link{
  display: block; padding: 8px 10px;
  border-radious: 8px; text-decoration: none; color:var(--text);
  -webkit-tap-highlight-color: transparent;
  user-select:none; -webkit-user-select: none; webkit-touch-callout: none;  
}

/*방문해도 보라색 금지 */
.menu-link:visited { color: var(--text); }
.menu-link:hover { background: var(--hover); }
.menu-link:active { opacity: .7; }
.menu-link:focus-visible { outline: 2px solid var(--accent); outline-offset:2px }
.menu-link.active{ background: #6e87b5; font-weight: 700; }

/*카드형 리스트 (공통) */
.post-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rignt-post .post-card{
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border);
  background: #f7f7f8;
  background: var(--panel);
  border-radius: 12px;
  padding: 16px 18px;
}
.post-card:hover{
  transform: translateY(-1px);
  background: #fff
}
.post-title{
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}
.post-link { color: inherit; text-decoration: none; }
.post-link:hover {text-decoration: underline; }