:root{
  --bg:#0b1220;
  --card:#0f1a2e;
  --muted:#0b1426;
  --text:#e9eefc;
  --sub:#b9c6e6;
  --line:rgba(255,255,255,.10);
  --btn:#ffffff;
  --btnText:#0b1220;
  --btn2:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans KR,Apple SD Gothic Neo,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(11,18,32,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex;align-items:center;gap:12px;min-height:60px}
.brand{display:flex;flex-direction:column}
.brand-title{font-weight:800;letter-spacing:-.3px}
.brand-sub{font-size:12px;color:var(--sub)}
.nav{margin-left:auto;display:flex;gap:14px;align-items:center}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:var(--btn2)}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 10px;font-size:16px}

.hero{padding:26px 0 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start}
.hero-copy{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.hero-copy h1{margin:0 0 10px;font-size:24px}
.lead{margin:0 0 14px;color:var(--sub);line-height:1.45}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.note{margin-top:12px;font-size:12px;color:var(--sub)}

.ratio-16x9{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.ratio-16x9 iframe{position:absolute;inset:0;width:100%;height:100%}

.section{padding:22px 0}
.section-muted{background:var(--muted);border-top:1px solid var(--line)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-head h2{margin:0;font-size:18px}
.section-meta{font-size:12px;color:var(--sub)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.card-title{font-weight:700;margin-bottom:10px}
.card-foot{margin-top:10px;display:flex;justify-content:flex-end}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid var(--line);
  padding:10px 12px;
  background:var(--btn2);
  color:var(--text);
}
.btn:hover{filter:brightness(1.05)}
.btn.primary{background:var(--btn);color:var(--btnText);border-color:transparent;font-weight:700}
.btn.small{padding:8px 10px;border-radius:10px;font-size:13px}

.list{display:flex;flex-direction:column;gap:10px}
.list.compact{gap:8px}
.item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 10px;
  background:rgba(255,255,255,.03);
}
.item .title{font-weight:700;margin-bottom:6px}
.item .meta{font-size:12px;color:var(--sub);display:flex;gap:10px;flex-wrap:wrap}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--sub)}
.item .actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.muted{color:var(--sub);font-size:12px}



/* === Minimal Accent Badges (Schedule) === */
.item.accent{
  position:relative;
  padding-left:12px; /* bar space */
}
.item.accent::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background: var(--accent, rgba(255,255,255,.25));
}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--sub);
  background:rgba(255,255,255,.03);
}
.chip .dot{
  width:6px;height:6px;border-radius:999px;
  background: var(--accent, rgba(255,255,255,.4));
  border:1px solid var(--line);
}

/* Ayurveda purple scale (subtle) */
.ayu-1{--accent:#B9A7FF;}
.ayu-2{--accent:#9E86FF;}
.ayu-3{--accent:#7D63F1;}
.ayu-4{--accent:#5B3ED6;}
.ayu-5{--accent:#3D22A8;}

/* Other muted accents */
.acc-blue{--accent:#4C8DFF;}
.acc-orange{--accent:#F3A24D;}
.acc-green{--accent:#5CCB8A;}
.acc-navy{--accent:#2F3A5A;}
.acc-red{--accent:#E46A6A;}

/* Calendar dot uses same accent var */
.cal-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:999px;
  background: var(--accent, rgba(255,255,255,.35));
  border:1px solid var(--line);
}

/* Right info card typography */
.right-info .ri-p{font-size:13px;line-height:1.6;color:var(--sub);margin:0 0 10px}
.right-info .ri-list{margin:0 0 10px;padding-left:18px;color:var(--sub);font-size:13px;line-height:1.55}
.right-info .ri-list.ri-small{font-size:12px}
.right-info .ri-hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.right-info .ri-subtitle{font-weight:700;margin:0 0 8px}

/* Month cards side */
.month-cards .item{cursor:default}

.calendar-controls{display:flex;align-items:center;gap:8px}
.cal-label{min-width:120px;text-align:center;color:var(--sub);font-size:13px}

.calendar-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start}
.calendar{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
}
.cal-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px}
.cal-dow{font-size:12px;color:var(--sub);text-align:center;padding:6px 0}
.cal-cell{
  border:1px solid var(--line);
  border-radius:12px;
  min-height:72px;
  padding:8px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
.cal-cell:hover{filter:brightness(1.08)}
.cal-day{font-weight:700;font-size:13px}
.cal-dots{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:999px;border:1px solid var(--line)}
.dot.edu{background:rgba(255,255,255,.75)}
.dot.exam{background:rgba(255,255,255,.35)}
.cal-out{opacity:.35}
.cal-today{outline:2px solid rgba(255,255,255,.35)}

.cal-side{position:sticky;top:78px}

.site-footer{border-top:1px solid var(--line);padding:16px 0;margin-top:8px}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--sub);font-size:13px}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.footer-links a{opacity:.9}
.footer-links a:hover{opacity:1}

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .calendar-wrap{grid-template-columns:1fr}
  .cal-side{position:static}
}

@media (max-width: 720px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;
    right:16px;
    top:60px;
    background:rgba(11,18,32,.98);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px;
    display:none;
    flex-direction:column;
    width:min(280px, calc(100vw - 32px));
  }
  .nav.open{display:flex}
  .nav a{padding:10px 12px}
}

/* === Organization Info (right-bottom) === */
.org-info{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.org-lines{
  font-size: 12px;
  line-height: 1.6;
  color: var(--sub);
}

.org-lines .sep{ opacity: .5; padding: 0 6px; }

.org-split{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.org-card{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 12px;
}

.org-title{
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 6px;
}

.org-big{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 4px;
  color: var(--text);
}

.org-muted{
  font-size: 12px;
  color: var(--sub);
  line-height: 1.5;
}

@media (max-width: 860px){
  .org-split{ grid-template-columns: 1fr; }
}



/* === FIX: ensure right column shows org-info === */
.right,
.right-col,
#right,
#rightColumn {
  overflow: visible;
}



/* === KAPTI preview image === */
.kapti-preview{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.kapti-preview img{
  display: block;
  width: 100%;
  height: auto;
}

.kapti-actions{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* === KAPTI figure + actions === */
.kapti-figure{
  margin-top: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 10px;
}
.kapti-figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.kapti-actions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* === Organization Info (right-bottom) === */
.org-info{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.org-lines{
  font-size: 12px;
  line-height: 1.6;
  color: var(--sub);
}
.org-lines .sep{ opacity: .5; padding: 0 6px; }
.org-split{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.org-card{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 12px;
}
.org-title{
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 6px;
}
.org-big{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 4px;
  color: var(--text);
}
.org-muted{
  font-size: 12px;
  color: var(--sub);
  line-height: 1.5;
}
@media (max-width: 860px){
  .org-split{ grid-template-columns: 1fr; }
}

/* Right info long copy readability */
.right-info .ri-p{ margin: 10px 0; line-height: 1.7; }
.right-info .ri-list{ margin: 10px 0 0 18px; line-height: 1.7; }
.right-info .ri-subtitle{ margin-top: 14px; }
.right-info .ri-hr{ margin: 14px 0; }

/* HUMIND info blocks (calendar side) */
.humind-info{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.humind-block{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 12px;
}
.humind-title{
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 8px;
}
.humind-line{
  font-size: 12px;
  color: var(--sub);
  line-height: 1.6;
}
.humind-big{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 2px 0 6px;
}

/* Make schedule+calendar feel like footer sections */
.section-muted .section-head h2{ font-size: 18px; }
.section-muted .calendar-wrap{ margin-top: 10px; }
.card.cal-side{ opacity: .95; }

/* Right info blocks spacing */
.humind-in-right{ margin-top: 14px; }
.right-info .humind-info{ gap: 10px; }
.right-info .humind-block{ background: rgba(255,255,255,.02); }

/* Toned background for HUMIND company/contact blocks */
.humind-toned{
  background: linear-gradient(180deg, rgba(120,90,160,.12), rgba(40,30,60,.12));
  border-radius: 14px;
  padding: 12px;
}
.humind-toned .humind-block{
  background: rgba(20,16,36,.45);
  border-color: rgba(160,130,220,.25);
}

/* Distinct tone for institute/contact/account blocks */
.humind-toned .humind-block{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.humind-toned .humind-title{
  color: rgba(255,255,255,.78);
}
.humind-toned .humind-line{
  color: rgba(255,255,255,.68);
}
.humind-toned .humind-big{
  color: rgba(255,255,255,.92);
}

/* Center utility for CTA buttons */
.center-btn{
  display:block;
  margin:16px auto 0 auto;
  text-align:center;
}

/* Force center align for offline purchase button area */
.right-info .kapti-actions{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
}
.right-info .kapti-actions .btn{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Package (묶음) UI */
.pkg-header{
  margin: 10px 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid rgba(173, 112, 255, .55);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}
.pkg-header.small{
  margin: 8px 0 6px;
  padding: 8px 10px;
  border-radius: 10px;
}
.pkg-title{
  font-weight: 700;
  letter-spacing: -0.2px;
}
.badge.pkg{
  border-color: rgba(173, 112, 255, .35);
  background: rgba(173, 112, 255, .10);
}


/* Notices (top images in right info card) */
.notice-area{
  display:flex;
  gap:12px;
  margin: 0 0 14px;
}
.notice-card{
  flex:1;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.notice-card a{
  display:block;
  text-decoration:none;
}
.notice-card img{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width: 980px){
  .notice-area{ flex-direction:column; }
}