/* 기본 레이아웃 */
:root{
  --max-width:1100px;
  --gap:20px;
  --accent:#111;
  --card-bg:#fff;
  --accent-color:#ff6b6b;
  --muted:#666;
  --price-border: #9EEAE1;
  --price-inner: #F3FFF9;         /* 연한 청록 내부 색 */
  --price-border-hover: #7fe0d3;
  --background: #f6fbf9;         /* 페이지 전체 배경 (쿨 틸과 조화) */
}

/* 페이지 배경 대비 개선 */
body{
  background: var(--background);
}

/* 기본 리셋 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  color:#222;
  line-height:1.5;
  background:var(--background);
}

/* 컨테이너 중앙 정렬 */
header, .hero, section, footer{
  max-width:var(--max-width);
  margin:0 auto;
  padding:20px;
}

/* 헤더 */
header{
  font-family: "Poppins", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:18px 20px;
  max-width:var(--max-width);
  margin:0 auto;
}
header h1{margin:0;font-size:1.2rem;font-weight:600;line-height:1}
header h1 a{color:inherit;text-decoration:none}
nav{display:flex;gap:12px;align-items:center}
nav a{
  text-decoration:none;
  color:var(--accent);
  padding:6px 8px;
  border-radius:4px;
  font-size:0.95rem;
  font-weight:600;
}
nav a:hover{background:#f0f0f0}
nav a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -2px 0 var(--accent-color);}

/* 히어로 */
.hero{text-align:center;padding:40px 20px}
.hero h2{margin:0 0 8px;font-size:1.8rem;font-weight:600}
.hero p, .hero .hero-sub{margin:0;color:var(--muted);font-size:1rem}

/* About 섹션: 두 칼럼 레이아웃 */
.about-inner{
  display:flex;
  gap:20px;
  align-items:stretch;
  margin-top:8px;
}
.about-text{
  /* 기존 스타일 유지 + 수직 배치 제어 */
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* 제목/본문과 문의 링크 간 거리 자동 조절 */
  padding:22px;
  min-height:140px; /* 필요시 값 조정 가능 */
}
.about-note{
  margin-top:12px;
  color:#7a7a7a;
  font-weight:500;
}
.about-note a{
  color:#6b6b6b;
  text-decoration:none;
  font-weight:600;
  position:relative;
  padding-bottom:3px;
  transition: color .18s ease, box-shadow .18s ease, transform .12s;
}
.about-note a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:100%;
  background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  transform:scaleX(0);
  transform-origin:left;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s;
  opacity:.95;
  border-radius:2px;
}
/* hover / focus 시 밑줄 전개 */
.about-note a:hover,
.about-note a:focus{
  color:#333;
  outline:none;
}
.about-note a:hover::after,
.about-note a:focus::after{
  transform:scaleX(1);
  background:linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0.04));
}
/* 키보드 접근성용 포커스 스타일 */
.about-note a:focus{
  box-shadow:0 0 0 4px rgba(0,0,0,0.06);
  border-radius:4px;
}
/* 방문 링크 색상 약간 톤다운 */
.about-note a:visited{
  color:#575757;
}

.about-card{
  /* 너비는 고정하되 내용은 수직 가운데 정렬하여 비대칭 느낌 완화 */
  flex:0 0 280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
  background:#111;
  color:#fff;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(10,10,10,0.06);
}
.about-card ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px; /* 항목 간격 */
}

/* 항목을 카드처럼 보이게 하고 텍스트 가독성 향상 */
.about-card li{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:12px 14px;
  border-radius:8px;
  border-left:4px solid rgba(255,255,255,0.04); /* 왼쪽 액센트 바 */
  color:#e6e6e6;
  line-height:1.45;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);
}

/* 제목을 더 도드라지게 */
.about-card strong{
  display:block;
  font-weight:700;
  margin-bottom:4px;
  color:#fff;
  font-size:0.98rem;
}

/* 설명 텍스트(줄바꿈 후 부분) 톤 다운 */
.about-card li > br { display:none; } /* 기존 br이 있더라도 layout 제어 */
.about-card li{
  white-space:normal;
}
.about-card li > *:not(strong){
  color:#d0d0d0;
  font-weight:500;
  font-size:0.92rem;
}

/* 항목별 다른 액센트 색(선택사항) */
.about-card li:nth-child(1){ border-left-color: #ff6b6b; } /* 전문 분야 */
.about-card li:nth-child(2){ border-left-color: #6bc1ff; } /* 툴 */
.about-card li:nth-child(3){ border-left-color: #9b8cff; } /* 스타일 */

/* 작품 그리드 (반응형) */
.work-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items:start;
  margin-bottom:20px;
}
.work-item{
  background:var(--card-bg);
  border-radius:8px;
  padding:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}

/* 반응형 비디오 래퍼 (16:9) */
.video-wrapper{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  overflow:hidden;
  border-radius:6px;
  background:#000;
  cursor:pointer;
}
.video-wrapper iframe{
  position:absolute;
  top:0;left:0;width:100%;height:100%;border:0;
}

/* 버튼/링크 스타일 */
.more-btn{text-align:center;margin:16px 0}
.more-btn a, .contact-btn{
  display:inline-block;padding:10px 14px;background:#111;color:#fff;text-decoration:none;border-radius:6px;
}
.contact-links{display:flex;gap:10px;flex-wrap:wrap}

/* 푸터 */
footer{text-align:center;padding:20px 0;color:#666;font-size:0.9rem}

/* 필터 컨트롤 */
.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin:12px 0 18px;
}
.filter-group{display:flex;gap:8px}

/* 기본 필터 버튼 */
.filter-btn{
  background:transparent;
  border:1px solid rgba(34,34,34,0.08);
  color:var(--accent);
  padding:8px 12px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 160ms cubic-bezier(.2,.8,.2,1);
}
.filter-btn svg{width:16px;height:16px;flex:0 0 16px;fill:currentColor;display:block}
.filter-btn .btn-label{line-height:1;font-size:0.95rem}
.filter-btn:focus{outline:3px solid rgba(255,107,107,0.12);outline-offset:2px}

/* 활성 */
.filter-btn.active{
  background:var(--accent-color);
  color:#fff;
  border-color:var(--accent-color);
  box-shadow:0 6px 18px rgba(255,107,107,0.14);
}

/* 카테고리 숨김 */
.category-wrapper.hidden{display:none}

/* 접근성용 시각적 숨김(aria-live용) */
.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* 로딩 전 약간의 스켈레톤 효과(데이터-src가 있으면 적용) */
.lazy-iframe{
  background:linear-gradient(90deg,#111 0%, #222 50%, #111 100%);
}

/* More / contact / footer */
.more-btn{text-align:center;margin:16px 0}
.more-btn a, .contact-btn{
  display:inline-block;padding:10px 14px;background:#111;color:#fff;text-decoration:none;border-radius:6px;
}
.contact-links{display:flex;gap:10px;flex-wrap:wrap}
footer{text-align:center;padding:20px 0;color:#666;font-size:0.9rem}

/* 가격 카드 그리드 */
.price-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:14px;
}
.price-card{
  background:var(--price-inner);
  border-radius:10px;
  padding:16px;
  box-shadow:0 6px 18px rgba(10,10,10,0.04);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:180px;
  border:1px solid var(--price-border);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.price-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(10,10,10,0.06);
  border-color:var(--price-border-hover);
}

/* 강조 버튼(빠른 문의용) — 기존 .contact-cta 스타일 업데이트 (아이콘 포함 정렬) */
.price-card .contact-cta,
.contact-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  color:#111;
  background:linear-gradient(180deg,#f7f7f8,#efefef);
  border:1px solid #e6e6e6;
  box-shadow:0 6px 18px rgba(10,10,10,0.04);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.contact-cta svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:inline-block;
  vertical-align:middle;
  fill:currentColor;
}
.contact-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(10,10,10,0.06);
  background:linear-gradient(180deg,#fff,#f2f2f2);
}
.contact-cta:focus{
  outline:3px solid rgba(0,0,0,0.06);
  outline-offset:3px;
}

/* price-note 내 링크 기본 스타일이 남아있다면 덮어쓰기(회색톤 유지) */
.price-note a, .price-note a:visited{
  color:#4b4b4b;
  text-decoration:none;
}

/* 반응형 */
@media (max-width:900px){
  .about-inner{flex-direction:column}
  .about-card{
    flex:1 1 auto;
  }
}
@media (max-width:600px){
  header{flex-direction:column;align-items:flex-start;gap:8px}
  .hero{padding:28px 12px}
  .hero h2{font-size:1.4rem}
  header h1{font-size:1.1rem}
  .controls{flex-direction:column;align-items:stretch}
  .filter-group{flex-wrap:wrap;gap:6px}
  .filter-btn{padding:8px 10px}
  .price-card{min-height:auto;padding:14px}
  .price-card-head{flex-direction:column;align-items:flex-start;gap:6px}
}