:root{
  --text:#222;
  --muted:#666;
  --line:#e6e6e6;
  --bg:#fff;
  --brand:#0f8a77;
  --brand2:#0e6d5f;
  --accent:#f59e0b;
  --card:#fafafa;
  --radius:14px;
  --shadow: 0 2px 5px rgba(0,0,0,.06);
  --font: 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --base:18px;
}
.entry {color:#00a0e9 !important;}
.beginner {color:#39b987 !important;}
.inter {color:#f79a48 !important;}
.hiint {color:#f15f5f !important;}
.advan {color:#b88fe6 !important;}
.business {color:#384de9 !important;}

img {
  max-width: 100%;
  height: auto;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, p,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	/* background: transparent; */
}


*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--base);
  color:var(--text);
  background:var(--bg);
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.9}

.header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand img{height:34px; width:auto}
.brand-text{font-size:18px; color:var(--brand2); letter-spacing:-.2px}

.top-menu{display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.top-link{
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  background:#f4f6f8;
  border:1px solid #edf0f2;
}
.top-link.btn{cursor:pointer}
.top-link:hover{background:#eef3f7}

.nav-inner{border-top:1px solid var(--line)}
.main-nav{
  max-width:1100px;
  margin:0 auto;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-start;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.nav-item{position:relative; padding:17px 0;}
.nav-btn{
  appearance:none;
  border:0;
  background:transparent;
  font-family:var(--font);
  font-size:24px;
  font-weight:500;
  padding:14px 24px;
  border-bottom:3px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.nav-item:hover .nav-btn{border-bottom-color:var(--accent)}
.dropdown{
  position:absolute;
  left:0;
  top:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  min-width:180px;
  padding:8px;
  display:none;
}
.nav-item:hover .dropdown{display:block}


.dropdown a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  font-size:16px;
}
.dropdown a:hover{background:#f6f7f8}

.container{max-width:1100px; margin:0 auto; padding:30px 16px}


h2.section-title{
  margin:45px 0 20px;
  font-size:2.5rem;
  letter-spacing:-.6px;
  font-weight:500;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px 40px;
}
.board-card{
  border-top:0;
  display:flex;
  gap:40px;
  margin:0px;
}
.board-card div {
	width:33%;
}
.view_all {
	font-size:0.92rem;
	font-weight:500;
	color:#555;
	display:inline-block;
	position:absolute;
	top:26px; right:5px;
}
.class_study {position:relative;}
.class_study li:first-child {border-top:1px solid #888;}
.class_study li {
	list-style-position: inside;
	line-height:2.5rem;
	border-bottom:1px solid #ddd;
	width:100%;
}
.class_blet {
	display:block;
	width:36px;
	height:7px;
	border-radius: 50px;
	background:#0f8a77;
	margin-bottom:0.5rem;
}
.class_blet_red {
	background:#f17112 !important;
}
.class_blet_blue {
	background:#1f86c5 !important;
}
.board-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.board-title{
  font-size:28px;
  font-weight:500;
  letter-spacing:-.4px;
}
.board-title .en{font-weight:700; letter-spacing:-0.2em;}
.board-title.entry{color:#0077dc}
.board-title.beginner{color:#00a642}
.board-title.intermediate{color:#f59e0b}
.board-title.hiinter{color:#ef4444}
.board-title.advanced{color:#bc3cd3}
.more-link{font-size:13px; color:#111}
.post-list{
  margin-top:10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.post-row{
  display:grid;
  grid-template-columns: 1fr 110px;
  gap:10px;
  padding:10px 0;
  border-top:1px solid #f0f0f0;
  align-items:center;
}
.post-row:first-child{border-top:0}
.post-title{
  font-size:16px;
  color:#222;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.post-date{
  font-size:12px;
  color:#888;
  text-align:right;
  white-space:nowrap;
}

/* Cheer board */
.cheer-wrap{
  border-top:1px solid #333;
  padding-top:18px;
  margin-top:10px;
}
.cheer-form{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.icon-pick{
  display:flex;
  gap:10px;
  align-items:center;
}
.icon-btn{
  width:34px; height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.icon-btn.active{outline:2px solid var(--brand); border-color:transparent}
.cheer-input2{
  flex:1;
  height:42px;
  border-radius:5px;
  border:1px solid var(--line);
  padding:0 12px;
  font-size:15px;
}
.cheer-input{
  flex:1;
  min-width:85%;
  height:42px;
  border-radius:5px;
  border:1px solid var(--line);
  padding:0 12px;
  font-size:15px;
}
.cheer-submit{
  height:50px;
  border:0;
  border-radius:12px;
  padding:0 16px;
  background:#111;
  color:#fff;
  cursor:pointer;
  font-size:17px;
  font-weight:600;
  display:block;
}

.cheer-list{
  margin-top:14px;
  border-top:1px solid var(--line);
}
.cheer-item{
  display:grid;
  grid-template-columns: 48px 120px 1fr 90px;
  gap:5px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #eee;
}
.cheer-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:14px;
  color:#333;
  margin-left:4px;
}
.cheer-user{font-size:14px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.cheer-del{
  justify-self:end;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.cheer-del:hover{background:#f6f7f8}

.site-footer{border-top:1px solid var(--line); margin-top:40px}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:18px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-size:14px;
  color:#666;
}
.foot-title{font-weight:600; color:#222}
.foot-right{gap:12px; flex-wrap:wrap}
.icon-btn img{
  width:100%;
  height:100%;
  border-radius:8px;
  object-fit:cover;
}

/* Icon hover effect */
.icon-btn:hover{
  border:3px solid #0cb89a;
}

/* Icon hover scale effect */
.icon-btn{
  transition: transform 0.15s ease, border 0.15s ease;
}
.icon-btn:hover{
  transform: scale(1.05);
}

/* Audio download buttons: add sound icon and default opacity */
.audio-with-icon{
  flex-direction: column;
  gap: 8px;
}
.audio-with-icon .audio-icon{
  width: 28px;
  height: 28px;
  opacity: 0.5;
  object-fit: contain;
}
.audio-with-icon:hover .audio-icon{
  opacity: 1;
}






/* Audio grid wrapper (hotfix for Cafe24 rendering) */
.audio-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
}


/* --- Audio download hover colors per level --- */
.audio-btn{
  color:#222; /* off state */
  border-color: var(--line);
}
.audio-with-icon .audio-icon{ opacity:0.5; }


/* Reset active to not force orange text; keep outline only if present */
.audio-btn.active{ color:#222; }

/* Per-level hover (border + text) */
.audio-btn.audio-with-icon[data-level="entry"]:hover{ border-color:#0077dc; color:#0077dc; }
.audio-btn.audio-with-icon[data-level="beginner"]:hover{ border-color:#00a642; color:#00a642; }
.audio-btn.audio-with-icon[data-level="intermediate"]:hover{ border-color:#f59e0b; color:#f59e0b; }
.audio-btn.audio-with-icon[data-level="hiinter"]:hover{ border-color:#ef4444; color:#ef4444; }
.audio-btn.audio-with-icon[data-level="etc"]:hover{ border-color:#bc3cd3; color:#bc3cd3; }

/* --- Cheer icons sizing & spacing --- */
.icon-pick{ gap:2px; }
.icon-btn{
  width:44px;
  height:44px;
  border-radius:0; /* 라운드 아님 */
}
.icon-btn img{
  border-radius:0; /* 이미지도 라운드 제거 */
}

/* Cheer list icon bigger */
.cheer-avatar{
  width:44px;
  height:44px;
  border-radius:0; /* 라운드 아님 */
  margin-left:0;
}
.cheer-item{
  grid-template-columns: 56px 120px 1fr 90px;
}

/* ========== Top menu pill style (like provided image) ========== */
.top-menu{
  background: var(--brand);
  border-radius: 999px;
  padding: 6px 8px;
  border: 0;
}
.top-link{
  background: transparent;
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 10px;
}
.top-link:hover{ background: rgba(255,255,255,.12); }


/* ========== Audio download bigger icon + font ========== */
.audio-btn{ font-size:16px; color:#222; }
.audio-with-icon .audio-icon{ width:34px; height:34px; }

/* --- Logo adjustments --- */
.brand img{
  height:40px;
  width:auto;
}
.foot-right img{
  height:36px;
  width:auto;
}


/* ===== Mobile top menu as icon + drawer ===== */
.mobile-menu-btn{
  display:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.mobile-menu-btn img{
  width:38px;
  height:38px;
  display:block;
}

.mobile-drawer{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.15);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 999;
}
.mobile-drawer.open{ opacity:1; pointer-events:auto; }
.mobile-drawer.open .mobile-drawer-panel{ transform: translateX(0); }

.mobile-drawer-close{
  align-self:flex-end;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:50px;
  line-height:1;
  cursor:pointer;
}

body.drawer-open{ overflow:hidden; }


/* ===== Cheer comment font size ===== */
.cheer-text{ font-size:17px; }

/* ===== Audio download button height ===== */
 .audio-btn{
      display:flex; align-items:center; justify-content:center;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      font-weight:800;
      font-size:16px;
	  height:100px;
    }
.audio-btn.active{outline:2px solid var(--accent); border-color:transparent; color:#f59e0b}

/* ===== Mobile hamburger + drawer (fix) ===== */
.header-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}


/* Drawer */

.mobile-drawer-panel{
  position:absolute;
  top:0;
  right:0;
  width: 240px;
  max-width: 80vw;
  height: 100%;
  background: #00957b;
  color:#fff;
  transform: translateX(100%);
  transition: transform .25s ease;
  padding: 18px 18px;
  display:flex;
  flex-direction:column;
  gap:0px;
}
.mobile-drawer-link{
  color:#fff;
  font-weight:800;
  font-size:20px;
  padding:10px 6px;
  border-bottom:1px dotted #eee;
}





/* Active menu state (server-driven) */
.nav-btn.is-current{border-bottom-color:var(--accent);}
.dropdown a.is-current{background:#f6f7f8;font-weight:800;}

/* ===== Final Banner Block (V13 locked) ===== */
.banner-carousel{
  position:relative;
  margin-top:8px;
}

.banner-viewport{
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#fff;
}

.banner-track{
  display:flex;
  width:100%;
  transform:translateX(0%);
  transition:transform .35s ease;
}

.banner-track.no-anim{
  transition:none !important;
}

.banner-slide{
  min-width:0 !important;
  position:relative;
  flex:0 0 auto;
  background:#fff;
  box-sizing:border-box;
}

.banner-box{
  width:100%;
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  box-sizing:border-box;
}

.banner-link{
  display:block;
  width:100%;
  height:100%;
  position:relative;
}

.banner-link img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.banner-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:-.5px;
  color:#222;
  background:#efefef;
  pointer-events:none;
}

.banner-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#222;
  letter-spacing:-.5px;
}

.banner-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #bbb;
  background:#fff;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  line-height:44px;
  opacity:.85;
  cursor:pointer;
  z-index:2;
}

.banner-arrow.left{ left:10px; }
.banner-arrow.right{ right:10px; }
.banner-arrow:hover{ opacity:1; }

.view_title {
	display:flex;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
	align-items:flex-start;
}
.ct {
	display:inline-block;
	margin-left:8px;
	font-size:13px;
	color:#666;
	white-space:nowrap;
}
@media (max-width: 500px){
.ct {display:block; margin-left:0px;}
}

.top-link-external{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.external-link-icon{
  display:inline-block;
  font-size:12px;
  line-height:1;
  transform:translateY(-1px);
}
.study-room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.study-room-card{background:#fff;border:1px solid #ddd;border-radius:18px;padding:20px 20px 16px;box-shadow:0 4px 8px rgba(15,23,42,.05)}
.study-room-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.study-room-title{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:600;}
.study-room-dot{width:10px;height:10px;border-radius:999px;background:#16a34a;flex:0 0 auto}
.study-room-dot.is-red{background:#ef4444}
.study-room-dot.is-blue{background:#3b82f6}
.red {color:#ef4444}
.study-room-more,.study-room-item{color:#555;text-decoration:none}
.study-room-more{font-size:14px;font-weight:700;white-space:nowrap}
.study-room-list{display:flex;flex-direction:column;}
.study-room-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #f1f5f9}
.study-room-item:first-child{border-top:0;padding-top:0}
.study-room-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.study-room-arrow{flex:0 0 auto;color:#16a34a;font-weight:900}
.study-room-empty{padding:14px 0 4px;color:#6b7280;font-size:14px}
@media (max-width: 640px){
  .study-room-grid{gap:14px}
  .study-room-card{padding:18px 16px 14px}
}
.student-eval-wrap{display:grid;gap:20px; letter-spacing:-0.03rem;}
.student-eval-hero{border:1px solid #e8edf4;border-radius:15px;padding:25px;box-shadow:0 3px 6px rgba(15,23,42,.05); box-sizing: border-box; text-align:center;}
.student-eval-hero h2{margin:0 0 10px;font-size:1.55rem;color:#0f172a}
.student-eval-hero p{margin:0;line-height:1.6; font-size:1.1rem;}
.student-eval-alert{padding:14px 16px;border-radius:15px;border:1px solid #d5e9ff;background:#f5faff;color:#1d4f91}
.student-eval-requestbox{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 22px;border-radius:15px;border:1px solid #e8edf4;background:#fff}
.student-eval-requestbox strong{display:block;font-size:1.02rem;color:#111827;margin-bottom:4px}
.student-eval-requestbox p{margin:0;line-height:1.6}
.student-eval-request-btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;height:48px;padding:0 18px;border-radius:14px;border:1px solid #cfd8e3;background:#eef2f7;color:#98a2b3;font-weight:600;cursor:not-allowed; font-size:16px;}
.student-eval-request-btn.is-ready{background:#1f6feb;border-color:#1f6feb;color:#fff;cursor:pointer}
.student-eval-request-btn.is-ready:hover{background:#1559c1}
.student-eval-accordion{display:grid;gap:14px}
.student-eval-item{border:1px solid #e8edf4;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 3px 6px rgba(15,23,42,.04)}
.student-eval-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;background:#fff;border:0;cursor:pointer;text-align:left}
.student-eval-trigger-title{font-size:1.2rem;font-weight:600;color:#0f172a; font-family:'Lexend'; margin-right:5px;}
.student-eval-trigger-meta{margin-top:6px;font-size:.9rem;color:#667085}
.student-eval-trigger-icon{width:34px;height:34px;border-radius:50%;background:#f5f7fb;color:#344054;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0}
.student-eval-item.is-open .student-eval-trigger{background:#fbfcff}
.student-eval-item.is-open .student-eval-trigger-icon{background:#1f6feb;color:#fff}
.student-eval-panel{display:none;padding:0 22px 22px;border-top:1px solid #edf2f7}
.student-eval-item.is-open .student-eval-panel{display:block}
.student-eval-graph{display:grid;gap:12px;padding-top:18px}
.student-eval-row{display:grid;grid-template-columns:120px 1fr 36px;gap:12px;align-items:center}
.student-eval-row-label{font-weight:500;color:#222}
.student-eval-row-track{height:16px;border-radius:999px;background:#edf2f7;overflow:hidden}
.student-eval-row-fill{height:100%;border-radius:999px}
.student-eval-row-score{text-align:right;font-weight:600;color:#111827}
.student-eval-comment{padding:16px 18px;border-radius:15px;background:#fbfcfe;border:1px solid #edf2f7; flex-grow: 1;}
.student-eval-comment-label{display:block;margin-bottom:8px;font-size:.95rem;font-weight:500;color:#0f8a77;font-family:'Lexend';}
.student-eval-comment-text{line-height:1.6; }
.student-eval-empty{padding:22px;border-radius:15px;background:#fff;border:1px dashed #d8e1ec;color:#667085}
.student-comment-wrp {display:flex; gap:20px; margin-top:25px; }
.student-comment-txt {padding:15px; border:1px solid #ddd; border-radius:15px; line-height:1.7rem; font-size:16px;}
.student-comment-txt p {padding:0px; margin:0px;}
.sub-title2 {
	font-size:2.5rem;
	margin:10px;
	line-height:3.2rem;
}

@media (max-width: 768px){
  .student-eval-hero{padding:22px 18px}
  .student-eval-requestbox{padding:18px; font-size:16px;}
  .student-eval-trigger,.student-eval-panel{padding-left:18px;padding-right:18px}
  .student-eval-trigger-meta {display:block;}
  .student-eval-row-score{text-align:left}
  .student-eval-graph{gap:5px;}
  .student-eval-comment {padding:12px;}
  .student-eval-requestbox p{line-height:1.5}
  .student-eval-row {grid-template-columns:110px 1fr 36px;}
  .student-eval-comment-text{line-height:1.45; font-size:0.95rem;}
  .student-comment-wrp {display:flex; flex-direction: column;}

}
@media (max-width: 430px){
	.student-eval-row {grid-template-columns:85px 1fr 25px; font-size:0.95rem;}
	.student-comment-txt {font-size:14px; padding:12px 10px; line-height:1.5;}
}
h2 span {font-size:1.1rem; font-weight:500 !important; display:inline-block; color:#666;}
.word_card {
	position:relative;
}
.word_card div {
	width:330px; height:200px;
	background-size: cover;
	position:absolute;
	top:70px;
}
.word_card01 {
	background:url("/image/word_01.png") no-repeat top left;
	z-index:100;
	left:-20px;
}
.word_card02 {
	background:url("/image/word_02.png") no-repeat top left;
	z-index:90;
	left:240px;
}
.word_card03 {
	background:url("/image/word_03.png") no-repeat top left;
	z-index:80;
	left:500px;
}
.word_card04 {
	background:url("/image/word_04.png") no-repeat top left;
	z-index:70;
	left:760px;
}
.mt100 {margin-top:240px !important;}
.word_card ul {overflow:hidden; margin:70px 80px 0 0;}
.word_card li {text-align:right; list-style:none;}
.word_card p {
	width:110px; height:32px; line-height:28px; 
	 background: #fff url('/image/view_btn.png') no-repeat;
	 background-size: 20%; background-position:10% 50%;
	 border:1px solid #999;
	 border-radius:20px;
	 text-align:center;
	 text-indent:18px; color:#333; font-weight:700; letter-spacing:-0.03rem;
	 font-size:0.95rem;  display: inline-block; 
	 margin-top:8px;
}
.word_card span, .word_card_mb span
{font-weight:700;}

.word_card_mb {
	display:flex;
	gap:10px;
	position:relative;
	width:96%; margin:0 auto;
	 flex-wrap: wrap;
}
.word_card_mb div {
	width:100%;
	max-width:390px; box-sizing: border-box;
	position:relative;
}
.word_card_mb li {
	list-style:none;
}
.word_card_mb h5 {font-weight:600; border-bottom:1px solid #ddd; margin-bottom:15px; text-align:right;}
.word_card_mb h5 span {font-size:2rem;}
.word_card_mb p {
	 width:90px; height:60px; line-height:45px;  padding-top:18px; padding-bottom:13px;
	 background: #fff url('/image/view_btn.png') no-repeat;
	 background-size: 25%; background-position:50% 20%;
	  border:1px solid #999;
	 border-radius:10px;
	 text-align:center;color:#333; font-weight:700; letter-spacing:-0.03rem;
	 font-size:0.95rem;  display: inline-block; 
	 position:absolute; top:75px; right:20px;
}
.word_card_mb_wrp {display:none;}