:root{
--snt-navy:#002457;
--snt-orange:#f08f2a;
--snt-blue:#a0dcff;
}
.seat-info-container {
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  color: #333;
}

.page-title{
font-size:26px;
font-weight:700;
text-align:center;
margin-bottom:40px;
color:var(--snt-navy);
}

.section {
  margin-bottom: 40px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

.section-title {
  background: #e7e8ff;
  color: #30306d;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 16px;
  border-left: 5px solid #6c63ff;
}

.section-content {
  padding: 20px;
  line-height: 1.7;
}

.notice {
  background: #f8f8f8;
  border: 1px solid #ddd;
}

.notice ul {
  list-style: none;
  padding-left: 0;
}

.notice li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}

.notice li::before {
  content: "✔";
  color: #6c63ff;
  position: absolute;
  left: 0;
  top: 0;
}

.notice-bottom {
  margin-top: 16px;
  color: #d33;
  font-weight: 600;
  text-align: center;
}

.notice-bottom .highlight {
  color: #6c63ff;
}

.seat-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.seat-table th,
.seat-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.seat-table th {
  background: #f3f3ff;
  font-weight: 600;
  color: #333;
}
.seat-info-container{
max-width:1000px;
margin:auto;
padding:20px;
}

.install-card{
display:flex;
justify-content:space-between;
align-items:center;
background:#ecfdf5;
border:1px solid #bbf7d0;
padding:20px;
border-radius:12px;
margin-bottom:20px;
}

.install-card button{
background:#16a34a;
color:white;
border:none;
padding:10px 16px;
border-radius:8px;
font-weight:600;
cursor:pointer;
}

.info-card,
.notice-card,
.table-card{
background:white;
border:1px solid #e5e7eb;
padding:20px;
border-radius:12px;
margin-bottom:20px;
}

.notice-card ul{
padding-left:18px;
}

.seat-table{
width:100%;
border-collapse:collapse;
}

.seat-table th,
.seat-table td{
padding:10px;
border-bottom:1px solid #e5e7eb;
text-align:center;
}

.seat-table th{
background:#f9fafb;
font-weight:600;
}
.install-card button{

background:linear-gradient(135deg,#16a34a,#22c55e);
color:#fff;

border:none;
border-radius:12px;

padding:12px 20px;

font-size:15px;
font-weight:700;

cursor:pointer;

box-shadow:0 4px 10px rgba(0,0,0,0.15);

transition:all .2s ease;

}

/* hover */

.install-card button:hover{

transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,0.25);

}

/* 클릭 */

.install-card button:active{

transform:scale(0.96);

}
@media (max-width:768px){

.install-card{

flex-direction:column;
gap:14px;
text-align:center;

}

.install-card button{

width:100%;
font-size:16px;
padding:14px;

}

}
.ios-install{

margin-top:12px;
font-size:13px;
color:#6b7280;
background:#f9fafb;
padding:10px;
border-radius:8px;

}

.install-card{
display:flex;
justify-content:space-between;
align-items:center;

background:#f0f7ff;
border:1px solid var(--snt-blue);

padding:20px;
border-radius:12px;
margin-bottom:20px;
}

.install-card button{

background:linear-gradient(135deg,#f08f2a,#f97316);
color:#fff;

border:none;
border-radius:12px;

padding:12px 20px;

font-size:15px;
font-weight:700;

cursor:pointer;

box-shadow:0 4px 10px rgba(0,0,0,0.15);

transition:all .2s ease;
}

.section-title{

background:#eaf3ff;
color:var(--snt-navy);

font-size:18px;
font-weight:600;

padding:12px 16px;

border-left:5px solid var(--snt-navy);
}

.notice li::before{
content:"✔";
color:var(--snt-orange);
}

.notice-bottom .highlight{
color:var(--snt-navy);
}

.seat-table th{
background:#f0f7ff;
color:var(--snt-navy);
font-weight:600;
}
/* =========================
   모바일 카드 디자인 개선
========================= */

@media (max-width:768px){

.seat-table{
border:0;
}

.seat-table thead{
display:none;
}

.seat-table tr{
display:block;
background:#fff;
border-radius:14px;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
margin-bottom:16px;
padding:16px 18px;
}

/* 강의명 (카드 제목) */

.seat-table td:first-child{
display:block;
font-size:16px;
font-weight:700;
color:#111;
line-height:1.4;
margin-bottom:10px;
}

/* 정보 영역 */

.seat-table td{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 0;
font-size:14px;
border:none;
}

/* 왼쪽 라벨 */

.seat-table td::before{
font-weight:600;
color:#6b7280;
flex:0 0 80px;
}

/* 라벨 이름 */

.seat-table td:nth-child(1)::before{content:"";}
.seat-table td:nth-child(2)::before{content:"강의실";}
.seat-table td:nth-child(3)::before{content:"강의시간";}
.seat-table td:nth-child(4)::before{content:"예약시작";}

/* 오른쪽 값 */

.seat-table td span{
color:#111;
}

}
.seat-table td:first-child{
word-break:keep-all;
}