/* =========================================================
   ACADEM / Design Guide (shop-guide)
   brand: #165cde
   ========================================================= */

/* 공통 */
.shop-guide{
  --brand:#165cde; --brand-weak:rgba(22,92,222,.12);
  --border:#e5e7eb; --muted:#666;
  max-width:880px; margin:0 auto; color:#222; line-height:1.7;
  font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,Arial,
               'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;
}
.shop-guide h2{font-size:1.6rem;margin:6px 0 12px;}
.shop-guide h3{font-size:1.1rem;margin:14px 0 6px;display:flex;align-items:center;gap:8px;}
.shop-guide p,.shop-guide li{font-size:1rem;}
.shop-guide ul{margin:4px 0 0 18px;}
.shop-guide .tight{margin-top:2px;margin-bottom:6px;}
.shop-guide .muted{color:var(--muted);}

/* 본문 좌정렬/폰트(테마 보강) */
.view-content .shop-guide, .view-content .shop-guide *{ text-align:left !important; }
#sit_inf_explan .shop-guide, #sit_inf_explan .shop-guide *{
  text-align:left !important;
  font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,Arial,
              'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif !important;
}

/* 카드형 레이아웃 */
.shop-guide .sg-cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; margin:8px 0;
}
@media(max-width:700px){
  .shop-guide .sg-cards{ grid-template-columns:1fr; }
}

/* 기본 카드 */
.shop-guide .sg-card{
  display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center;
  border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:#fff;
}
.shop-guide .sg-card-ico{
  width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-weak);color:var(--brand);font-size:20px;font-weight:700;
}
.shop-guide .sg-card-title{font-weight:700;margin-bottom:2px;}
.shop-guide .sg-card-desc{color:#333;}

/* 첨부파일 톤 변형 */
.shop-guide .sg-card.sg-attach{
  background:#f8faff; border:1px solid #d8e2f3; border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.shop-guide .sg-card.sg-attach .sg-card-ico{
  width:28px;height:28px;background:#165cde;color:#fff;font-size:13px;font-weight:700;
}
.shop-guide .sg-card.sg-attach .sg-card-title{ display:flex; align-items:center; gap:6px; }

/* 단계 리스트 (세로형) */
.shop-guide .sg-steps{ list-style:none; margin:8px 0; padding-left:0; gap:12px; display:flex; flex-direction:column; }
.shop-guide .sg-step{
  display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center;
  border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:#fff;
}
.shop-guide .sg-step-no{
  width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--brand); background:var(--brand-weak);
}
.shop-guide .sg-step-title{font-weight:600;}
.shop-guide .sg-step-meta{font-size:.95rem;color:var(--muted);white-space:nowrap;}
@media(max-width:520px){
  .shop-guide .sg-step{grid-template-columns:48px 1fr; align-items:start;}
  .shop-guide .sg-step-meta{grid-column:2 / span 1; margin-top:2px; white-space:normal;}
}
/* gap 폴백 */
@supports not (gap: 12px){
  .shop-guide .sg-step + .sg-step{ margin-top:12px; }
}

/* 표 기본 */
.shop-guide table{width:100%;border-collapse:collapse;margin:6px 0;}
.shop-guide th,.shop-guide td{border:1px solid var(--border);padding:8px 10px;vertical-align:top;}
.shop-guide th{width:22%;background:#fafafa;color:#555;font-weight:600;}

/* 공통 카드 박스 (테이블/내용 감싸기) */
.shop-guide .sg-box{
  background:#f8faff; border:1px solid #d8e2f3; border-radius:12px;
  padding:16px; margin-bottom:20px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.shop-guide .sg-box table{ width:100%; border-collapse:collapse; }
.shop-guide .sg-box th,
.shop-guide .sg-box td{ border-bottom:1px solid #e1e8f4; padding:10px 8px; text-align:left; }
.shop-guide .sg-box th{ background:#eef4ff; font-weight:600; }
.shop-guide .contact-table th{ width:120px; }

/* 간격 스페이서 */
.shop-guide .sp-4{display:block;height:4px;line-height:0;font-size:0}
.shop-guide .sp-4::before{content:"";display:block;height:100%}

/* shop-guide 경고 박스 */
.shop-guide .sg-box.is-danger{ border-color:#fecaca; background:#fff7f7; }

/* 타이포 미세조정 */
@media(min-width:768px){ .shop-guide h2{font-size:1.55rem;} }

/* ===== Board Notice / 공지 컴포넌트 ===== */
.board-notice{
  --brand:#165cde; --brand-weak:rgba(22,92,222,.12);
  --border:#e5e7eb; --muted:#666;
  max-width:880px; margin:0 auto; color:#222; line-height:1.7;
  font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,Arial,
               'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;
}
.board-notice h2{font-size:1.6rem;margin:4px 0 12px;display:flex;gap:8px;align-items:center}
.board-notice .lead{margin:6px 0 10px;color:#333}

/* 컬러 변형 */
.board-notice.is-qna    { --brand:#16a34a; --brand-weak:rgba(22,163,74,.12) }  /* Q&A */
.board-notice.is-event  { --brand:#7c3aed; --brand-weak:rgba(124,58,237,.12) } /* 이벤트 */
.board-notice.is-market { --brand:#f59e0b; --brand-weak:rgba(245,158,11,.12) }  /* 장터 */

/* 카드 그리드 */
.board-notice .cards{ display:grid; gap:12px; margin:10px 0 }
.board-notice .cards.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.board-notice .cards.cols-1{ grid-template-columns:1fr }
@media (max-width:700px){ .board-notice .cards.cols-2{ grid-template-columns:1fr } }

.board-notice .card{
  display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:flex-start;
  border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:#fff;
}
.board-notice .card-ico{
  width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-weak); color:var(--brand); font-size:20px; font-weight:700; flex-shrink:0;
}
.board-notice .card-title{ font-weight:700; margin-bottom:4px }
.board-notice .card-desc{ color:#333 }

/* 불릿 리스트 */
.board-notice ul{ margin:4px 0 0 0; padding-left:0; list-style:none }
.board-notice li{ margin:4px 0; position:relative; padding-left:18px }
.board-notice li::before{ content:"•"; position:absolute; left:0; top:0; color:var(--brand) }

/* 하단 알림 박스 */
.board-notice .note{
  border:1px dashed var(--brand); background:var(--brand-weak);
  border-radius:12px; padding:12px 14px; margin-top:10px; color:#1f2a37;
}

/* 표 (공지 전용) */
.board-notice table{width:100%;border-collapse:collapse;margin:6px 0}
.board-notice th,.board-notice td{border:1px solid var(--border);padding:8px 10px;vertical-align:top}
.board-notice th{width:28%;background:#fafafa;color:#555;font-weight:600}

/* 테마 보강 */
.view-content .board-notice, .view-content .board-notice *{ text-align:left !important }

/* 상점 학원명 받는것 */
.od-memo-help { margin-top:8px; font-size:12px; color:#666; }
.od-memo-help ul { padding-left:16px; margin:0; }
.od-memo-help li { margin:2px 0; list-style:disc; }
#od_memo { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; }

/* ─────────────────────────────────────────────
   디자인 의뢰 메모: 라벨(왼쪽 제목)만 세로 중앙 정렬
   - textarea 높이와 동일한 값으로 맞춰 세로 중앙처럼 보이게
   - 이 행(row-od-memo)에만 적용되어 다른 행엔 영향 없음
   ───────────────────────────────────────────── */
#od_memo {                 /* 메모 textarea 높이 */
  height: 120px;
}

.row-od-memo th {          /* 혹시 테마가 top 고정이면 강제로 중앙 */
  vertical-align: middle !important;
}

.row-od-memo th label {    /* 라벨 자체를 중앙처럼 보이게 */
  display: block;
  height: 100px;           /* textarea와 동일 값 */
  line-height: 0px;      /* 텍스트를 박스 중앙으로 */
  white-space: nowrap;     /* 두 줄로 안 꺾이게 */
  margin: 0;
}

/* ─────────────────────────────────────────────
   디자인 의뢰 메모 (모바일 버전)
   - 높이를 PC와 맞추되, 모바일 UI에 맞게 padding 조정
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
  #od_memo {
    height: 120px;        /* PC와 동일 높이 */
    padding-top: 10px;    /* placeholder/글자가 위로 붙지 않도록 */
    padding-bottom: 10px;
    box-sizing: border-box;
  }
}

/* -------------------------------
   아카뎀 인사이트 카드 스타일
   ------------------------------- */
.akadem-insight-card {
  border-left: 4px solid #165cde;
  margin-bottom: 1rem;
  background: #f9fbff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.akadem-insight-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #165cde;
  margin-bottom: 0.5rem;
}
.akadem-insight-card ul { padding-left: 1.2rem; margin-bottom: 0; }
.akadem-insight-card ul li { font-size: 0.95rem; color: #444; line-height: 1.6; margin-bottom: 0.35rem; }