/* 오플리·오살롱·오클래스 후기 위젯 — 실사이트 코드위젯 CSS 를 페이지별로 그대로 옮김(색·테두리·그림자가 페이지마다 다르다) */
/* 아임웹 기본 CSS 처럼 버튼이 위젯의 줄간격(1.6)을 물려받아야 버튼 높이가 실사이트와 같다 */
#tmOply button, #tmOsalon button, #tmOclass button { line-height: inherit; }

#tmOply{
  /* 오늘은뮤직 사이트 토큰 */
  --tmo-bg:#FFBD59;                 /* 섹션 배경 */
  --tmo-card:#FFFFFF; --tmo-red:#FF751F; --tmo-red-dp:#E85B0A;
  --tmo-title:#FF751F;              /* 대제목·대시·소개문구·필터 색 */
  --tmo-shadow:#E85A0C;             /* 대제목 그림자 */
  --tmo-lede:#FF751F;               /* 소개 문구 */
  --tmo-tint:#F7DFDA; --tmo-ink:#212121; --tmo-ink-2:#363636; --tmo-ink-3:#8C8279;
  --tmo-line:#EFE3D6; --tmo-line-2:#F6EDE3;
  --tmo-font:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --tmo-display:'Gasoek One','Barlow Condensed','Malgun Gothic',sans-serif;
  /* 각진펜(유료)이 사이트에 로드돼 있으면 그게 먼저 쓰이고, 없으면 에스코어드림으로 대체됩니다 */
  --tmo-pen:'각진펜','Gakjin Pen','AngledPen','S-CoreDream-6Bold','S-CoreDream-5Medium',var(--tmo-font);
  /* 오늘은뮤직 사이트 본문 폭(.inside = max-width 1280px + 좌우 15px)에 맞춤 */
  max-width:1280px; margin:0 auto; padding:58px 15px 44px;
  font-family:var(--tmo-font); color:var(--tmo-ink); background:var(--tmo-bg);
  font-size:15px; line-height:1.6; text-align:left; -webkit-font-smoothing:antialiased;
}
#tmOply, #tmOply *{box-sizing:border-box}
#tmOply a{text-decoration:none; color:inherit}
#tmOply button{font-family:inherit; cursor:pointer; border-radius:999px;
  transition:background .15s,color .15s,border-color .15s}
#tmOply button:focus-visible{outline:2px solid var(--tmo-red-dp); outline-offset:2px}
/* ── 헤더 ── */
#tmOply .tmo-dash{display:block; width:68px; height:9px; border-radius:2px;
  background:var(--tmo-title); margin-bottom:20px}
#tmOply .tmo-h{
  margin:0; font-family:var(--tmo-display); font-weight:400;
  font-size:clamp(42px,6.8vw,80px); line-height:1.04; letter-spacing:-.005em;
  color:var(--tmo-title); text-shadow:4px 5px 0 var(--tmo-shadow);
}
#tmOply .tmo-lede{
  margin:18px 0 0; color:var(--tmo-lede); font-family:var(--tmo-pen); font-weight:700;
  font-size:clamp(17px,1.7vw,22px); line-height:1.65; letter-spacing:-.01em;
}
/* ── 필터 ── */
#tmOply .tmo-filters{margin:34px 0 30px; border-top:1px solid rgba(255,117,31,.42); padding-top:18px}
#tmOply .tmo-row{display:flex; flex-wrap:wrap; gap:7px}
#tmOply .tmo-row2{margin-top:11px; padding-top:12px; border-top:1px dashed rgba(255,117,31,.34)}
#tmOply .tmo-reg{
  padding:8px 17px; font-size:14px; font-weight:600; border:1px solid var(--tmo-title);
  background:transparent; color:var(--tmo-title);
}
#tmOply .tmo-reg[aria-pressed="true"]{background:var(--tmo-title); border-color:var(--tmo-title); color:#fff}
#tmOply .tmo-br{
  padding:6px 14px; font-size:13.5px; font-weight:500; border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.72); color:#6B5A4A;
}
#tmOply .tmo-br:hover{background:#fff; color:var(--tmo-ink-2)}
#tmOply .tmo-br[aria-pressed="true"]{background:#fff; border-color:#fff;
  color:var(--tmo-red-dp); font-weight:600}
/* ── 카드 ── */
#tmOply .tmo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:22px}
#tmOply .tmo-card{
  display:flex; flex-direction:column; background:var(--tmo-card);
  border:1px solid rgba(255,255,255,.6); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(120,60,20,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
#tmOply .tmo-card:hover{transform:translateY(-3px);
  box-shadow:0 20px 38px -18px rgba(120,45,15,.55)}
#tmOply .tmo-card:focus-visible{outline:2px solid #fff; outline-offset:3px}
#tmOply .tmo-thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--tmo-tint)}
#tmOply .tmo-thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease}
#tmOply .tmo-card:hover .tmo-thumb img{transform:scale(1.045)}
#tmOply .tmo-tag{
  position:absolute; left:10px; bottom:10px; background:rgba(33,33,33,.84); color:#fff;
  padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600;
}
#tmOply .tmo-body{padding:15px 16px 14px; display:flex; flex-direction:column; gap:7px; flex:1}
#tmOply .tmo-title{
  margin:0; font-size:15px; font-weight:600; line-height:1.45; color:var(--tmo-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#tmOply .tmo-sum{
  margin:0; font-size:13.5px; line-height:1.6; color:var(--tmo-ink-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#tmOply .tmo-foot{
  margin-top:auto; padding-top:11px; border-top:1px solid var(--tmo-line-2);
  display:flex; justify-content:space-between; align-items:center; font-size:13px;
  color:var(--tmo-ink-3);
}
#tmOply .tmo-foot em{font-style:normal; color:var(--tmo-red); font-weight:600}
#tmOply .tmo-card:hover .tmo-foot em{text-decoration:underline}
/* ── 더 보기 / 상태 ── */
#tmOply .tmo-more{text-align:center; padding:26px 0 8px}
#tmOply .tmo-more button{
  padding:12px 34px; font-size:14.5px; font-weight:600;
  border:1px solid #fff; background:#fff; color:var(--tmo-red-dp);
}
#tmOply .tmo-more button:hover{background:var(--tmo-red); border-color:var(--tmo-red); color:#fff}
#tmOply .tmo-skel{
  aspect-ratio:4/3; border-radius:14px; border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(100deg,rgba(255,255,255,.35) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.35) 70%) 0/240% 100%;
  animation:tmoShine 1.3s linear infinite;
}
@keyframes tmoShine{to{background-position:-240% 0}}
#tmOply .tmo-empty{padding:52px 0; text-align:center; color:#7A4530; font-size:14.5px}
@media (max-width:900px){ #tmOply .tmo-grid{gap:16px} }
@media (max-width:560px){
  #tmOply{padding:42px 15px 36px}
  #tmOply .tmo-grid{grid-template-columns:1fr}
  #tmOply .tmo-dash{width:56px; height:8px; margin-bottom:16px}
  /* 지점이 많아 세로로 길어지므로 모바일에서는 한 줄 가로 스크롤 */
  #tmOply .tmo-row2{flex-wrap:nowrap; overflow-x:auto; padding-bottom:7px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none}
  #tmOply .tmo-row2::-webkit-scrollbar{display:none}
  #tmOply .tmo-row2 .tmo-br{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){ #tmOply *{transition:none!important; animation:none!important}
}

#tmOsalon{
  /* 오늘은뮤직 사이트 토큰 */
  --tmo-bg:#FF914D;                 /* 섹션 배경 */
  --tmo-card:#FFFFFF; --tmo-red:#CC4D3C; --tmo-red-dp:#B8402F;
  --tmo-title:#CC4D3C;              /* 대제목·대시 색 */
  --tmo-shadow:#A93B2C;             /* 대제목 그림자 */
  --tmo-lede:#FFFFFF;               /* 소개 문구 */
  --tmo-tint:#F7DFDA; --tmo-ink:#212121; --tmo-ink-2:#363636; --tmo-ink-3:#8C8279;
  --tmo-line:#EFE3D6; --tmo-line-2:#F6EDE3;
  --tmo-font:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --tmo-display:'Gasoek One','Barlow Condensed','Malgun Gothic',sans-serif;
  --tmo-pen:'각진펜','Gakjin Pen','AngledPen','S-CoreDream-6Bold','S-CoreDream-5Medium',var(--tmo-font);
  /* 오늘은뮤직 사이트 본문 폭(.inside = max-width 1280px + 좌우 15px)에 맞춤 */
  max-width:1280px; margin:0 auto; padding:58px 15px 44px;
  font-family:var(--tmo-font); color:var(--tmo-ink); background:var(--tmo-bg);
  font-size:15px; line-height:1.6; text-align:left; -webkit-font-smoothing:antialiased;
}
#tmOsalon, #tmOsalon *{box-sizing:border-box}
#tmOsalon a{text-decoration:none; color:inherit}
#tmOsalon button{font-family:inherit; cursor:pointer; border-radius:999px;
  transition:background .15s,color .15s,border-color .15s}
#tmOsalon button:focus-visible{outline:2px solid #fff; outline-offset:2px}
/* ── 헤더 ── */
#tmOsalon .tmo-dash{display:block; width:68px; height:9px; border-radius:2px;
  background:var(--tmo-title); margin-bottom:20px}
#tmOsalon .tmo-h{
  margin:0; font-family:var(--tmo-display); font-weight:400;
  font-size:clamp(42px,6.8vw,80px); line-height:1.04; letter-spacing:-.005em;
  color:var(--tmo-title); text-shadow:4px 5px 0 var(--tmo-shadow);
}
#tmOsalon .tmo-lede{
  margin:18px 0 0; color:var(--tmo-lede); font-family:var(--tmo-pen); font-weight:700;
  font-size:clamp(17px,1.7vw,22px); line-height:1.65; letter-spacing:-.01em;
}
/* ── 필터 ── */
#tmOsalon .tmo-filters{margin:34px 0 30px; border-top:1px solid rgba(255,255,255,.45); padding-top:18px}
#tmOsalon .tmo-row{display:flex; flex-wrap:wrap; gap:7px}
#tmOsalon .tmo-row2{margin-top:11px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.4)}
#tmOsalon .tmo-reg{
  padding:8px 17px; font-size:14px; font-weight:600; border:1px solid #fff;
  background:transparent; color:#fff;
}
#tmOsalon .tmo-reg:hover{background:rgba(255,255,255,.18)}
#tmOsalon .tmo-reg[aria-pressed="true"]{background:var(--tmo-red); border-color:var(--tmo-red); color:#fff}
#tmOsalon .tmo-br{
  padding:6px 14px; font-size:13.5px; font-weight:500; border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.72); color:#6B4A3A;
}
#tmOsalon .tmo-br:hover{background:#fff; color:var(--tmo-ink-2)}
#tmOsalon .tmo-br[aria-pressed="true"]{background:#fff; border-color:#fff;
  color:var(--tmo-red); font-weight:600}
/* ── 카드 ── */
#tmOsalon .tmo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:22px}
#tmOsalon .tmo-card{
  display:flex; flex-direction:column; background:var(--tmo-card);
  border:1px solid rgba(255,255,255,.6); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(120,50,20,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
#tmOsalon .tmo-card:hover{transform:translateY(-3px);
  box-shadow:0 20px 38px -18px rgba(120,40,15,.55)}
#tmOsalon .tmo-card:focus-visible{outline:2px solid #fff; outline-offset:3px}
#tmOsalon .tmo-thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--tmo-tint)}
#tmOsalon .tmo-thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease}
#tmOsalon .tmo-card:hover .tmo-thumb img{transform:scale(1.045)}
#tmOsalon .tmo-tag{
  position:absolute; left:10px; bottom:10px; background:rgba(33,33,33,.84); color:#fff;
  padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600;
}
#tmOsalon .tmo-body{padding:15px 16px 14px; display:flex; flex-direction:column; gap:7px; flex:1}
#tmOsalon .tmo-title{
  margin:0; font-size:15px; font-weight:600; line-height:1.45; color:var(--tmo-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#tmOsalon .tmo-sum{
  margin:0; font-size:13.5px; line-height:1.6; color:var(--tmo-ink-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#tmOsalon .tmo-foot{
  margin-top:auto; padding-top:11px; border-top:1px solid var(--tmo-line-2);
  display:flex; justify-content:space-between; align-items:center; font-size:13px;
  color:var(--tmo-ink-3);
}
#tmOsalon .tmo-foot em{font-style:normal; color:var(--tmo-red); font-weight:600}
#tmOsalon .tmo-card:hover .tmo-foot em{text-decoration:underline}
/* ── 더 보기 / 상태 ── */
#tmOsalon .tmo-more{text-align:center; padding:26px 0 8px}
#tmOsalon .tmo-more button{
  padding:12px 34px; font-size:14.5px; font-weight:600;
  border:1px solid #fff; background:#fff; color:var(--tmo-red);
}
#tmOsalon .tmo-more button:hover{background:var(--tmo-red); border-color:var(--tmo-red); color:#fff}
#tmOsalon .tmo-skel{
  aspect-ratio:4/3; border-radius:14px; border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(100deg,rgba(255,255,255,.35) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.35) 70%) 0/240% 100%;
  animation:tmoShine 1.3s linear infinite;
}
@keyframes tmoShine{to{background-position:-240% 0}}
#tmOsalon .tmo-empty{padding:52px 0; text-align:center; color:#fff; font-size:14.5px}
@media (max-width:900px){ #tmOsalon .tmo-grid{gap:16px} }
@media (max-width:560px){
  #tmOsalon{padding:42px 15px 36px}
  #tmOsalon .tmo-grid{grid-template-columns:1fr}
  #tmOsalon .tmo-dash{width:56px; height:8px; margin-bottom:16px}
  /* 지점이 많아 세로로 길어지므로 모바일에서는 한 줄 가로 스크롤 */
  #tmOsalon .tmo-row2{flex-wrap:nowrap; overflow-x:auto; padding-bottom:7px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none}
  #tmOsalon .tmo-row2::-webkit-scrollbar{display:none}
  #tmOsalon .tmo-row2 .tmo-br{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){ #tmOsalon *{transition:none!important; animation:none!important}
}

#tmOclass{
  /* 오늘은뮤직 사이트 토큰 */
  --tmo-bg:#CC4D3C;                 /* 섹션 배경 */
  --tmo-card:#FFFFFF; --tmo-red:#CC4D3C; --tmo-orange:#FF914D;
  --tmo-title:#FF914D;              /* 대제목·대시 색 */
  --tmo-shadow:#9E3527;             /* 대제목 그림자 */
  --tmo-lede:#FFFFFF;               /* 소개 문구 */
  --tmo-tint:#F7DFDA; --tmo-ink:#212121; --tmo-ink-2:#363636; --tmo-ink-3:#8C8279;
  --tmo-line:#EFE3D6; --tmo-line-2:#F6EDE3;
  --tmo-font:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --tmo-display:'Gasoek One','Barlow Condensed','Malgun Gothic',sans-serif;
  --tmo-pen:'각진펜','Gakjin Pen','AngledPen','S-CoreDream-6Bold','S-CoreDream-5Medium',var(--tmo-font);
  /* 오늘은뮤직 사이트 본문 폭(.inside = max-width 1280px + 좌우 15px)에 맞춤 */
  max-width:1280px; margin:0 auto; padding:58px 15px 44px;
  font-family:var(--tmo-font); color:var(--tmo-ink); background:var(--tmo-bg);
  font-size:15px; line-height:1.6; text-align:left; -webkit-font-smoothing:antialiased;
}
#tmOclass, #tmOclass *{box-sizing:border-box}
#tmOclass a{text-decoration:none; color:inherit}
#tmOclass button{font-family:inherit; cursor:pointer; border-radius:999px;
  transition:background .15s,color .15s,border-color .15s}
#tmOclass button:focus-visible{outline:2px solid #fff; outline-offset:2px}
/* ── 헤더 ── */
#tmOclass .tmo-dash{display:block; width:68px; height:9px; border-radius:2px;
  background:var(--tmo-title); margin-bottom:20px}
#tmOclass .tmo-h{
  margin:0; font-family:var(--tmo-display); font-weight:400;
  font-size:clamp(42px,6.8vw,80px); line-height:1.04; letter-spacing:-.005em;
  color:var(--tmo-title); text-shadow:4px 5px 0 var(--tmo-shadow);
}
#tmOclass .tmo-lede{
  margin:18px 0 0; color:var(--tmo-lede); font-family:var(--tmo-pen); font-weight:700;
  font-size:clamp(17px,1.7vw,22px); line-height:1.65; letter-spacing:-.01em;
}
/* ── 필터 ── */
#tmOclass .tmo-filters{margin:34px 0 30px; border-top:1px solid rgba(255,255,255,.4); padding-top:18px}
#tmOclass .tmo-row{display:flex; flex-wrap:wrap; gap:7px}
#tmOclass .tmo-row2{margin-top:11px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.35)}
#tmOclass .tmo-reg{
  padding:8px 17px; font-size:14px; font-weight:600; border:1px solid #fff;
  background:transparent; color:#fff;
}
#tmOclass .tmo-reg:hover{background:rgba(255,255,255,.15)}
#tmOclass .tmo-reg[aria-pressed="true"]{background:var(--tmo-orange); border-color:var(--tmo-orange); color:#fff}
#tmOclass .tmo-br{
  padding:6px 14px; font-size:13.5px; font-weight:500; border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.72); color:#6B3A30;
}
#tmOclass .tmo-br:hover{background:#fff; color:var(--tmo-ink-2)}
#tmOclass .tmo-br[aria-pressed="true"]{background:#fff; border-color:#fff;
  color:var(--tmo-red); font-weight:600}
/* ── 카드 ── */
#tmOclass .tmo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:22px}
#tmOclass .tmo-card{
  display:flex; flex-direction:column; background:var(--tmo-card);
  border:1px solid rgba(255,255,255,.6); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(80,20,10,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
#tmOclass .tmo-card:hover{transform:translateY(-3px);
  box-shadow:0 20px 38px -18px rgba(70,15,5,.65)}
#tmOclass .tmo-card:focus-visible{outline:2px solid #fff; outline-offset:3px}
#tmOclass .tmo-thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--tmo-tint)}
#tmOclass .tmo-thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease}
#tmOclass .tmo-card:hover .tmo-thumb img{transform:scale(1.045)}
#tmOclass .tmo-tag{
  position:absolute; left:10px; bottom:10px; background:rgba(33,33,33,.84); color:#fff;
  padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600;
}
#tmOclass .tmo-body{padding:15px 16px 14px; display:flex; flex-direction:column; gap:7px; flex:1}
#tmOclass .tmo-title{
  margin:0; font-size:15px; font-weight:600; line-height:1.45; color:var(--tmo-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#tmOclass .tmo-sum{
  margin:0; font-size:13.5px; line-height:1.6; color:var(--tmo-ink-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#tmOclass .tmo-foot{
  margin-top:auto; padding-top:11px; border-top:1px solid var(--tmo-line-2);
  display:flex; justify-content:space-between; align-items:center; font-size:13px;
  color:var(--tmo-ink-3);
}
#tmOclass .tmo-foot em{font-style:normal; color:var(--tmo-red); font-weight:600}
#tmOclass .tmo-card:hover .tmo-foot em{text-decoration:underline}
/* ── 더 보기 / 상태 ── */
#tmOclass .tmo-more{text-align:center; padding:26px 0 8px}
#tmOclass .tmo-more button{
  padding:12px 34px; font-size:14.5px; font-weight:600;
  border:1px solid #fff; background:#fff; color:var(--tmo-red);
}
#tmOclass .tmo-more button:hover{background:var(--tmo-orange); border-color:var(--tmo-orange); color:#fff}
#tmOclass .tmo-skel{
  aspect-ratio:4/3; border-radius:14px; border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(100deg,rgba(255,255,255,.25) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.25) 70%) 0/240% 100%;
  animation:tmoShine 1.3s linear infinite;
}
@keyframes tmoShine{to{background-position:-240% 0}}
#tmOclass .tmo-empty{padding:52px 0; text-align:center; color:#fff; font-size:14.5px}
@media (max-width:900px){ #tmOclass .tmo-grid{gap:16px} }
@media (max-width:560px){
  #tmOclass{padding:42px 15px 36px}
  #tmOclass .tmo-grid{grid-template-columns:1fr}
  #tmOclass .tmo-dash{width:56px; height:8px; margin-bottom:16px}
  /* 지점이 많아 세로로 길어지므로 모바일에서는 한 줄 가로 스크롤 */
  #tmOclass .tmo-row2{flex-wrap:nowrap; overflow-x:auto; padding-bottom:7px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none}
  #tmOclass .tmo-row2::-webkit-scrollbar{display:none}
  #tmOclass .tmo-row2 .tmo-br{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){ #tmOclass *{transition:none!important; animation:none!important}
}