/* Japanese Room v3.2.4 - 首頁大型介紹框 */
.jr-home-hero{
  position:relative;
  padding:42px 0 32px;
  border:0!important;
  background:
    radial-gradient(circle at 12% 6%,color-mix(in srgb,var(--jr-blue) 22%,transparent),transparent 30%),
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--jr-primary) 16%,transparent),transparent 28%);
  overflow:hidden;
}
.jr-home-hero:before,.jr-home-hero:after{content:"";position:absolute;pointer-events:none;border-radius:999px;filter:blur(2px)}
.jr-home-hero:before{width:280px;height:280px;right:-120px;top:-140px;border:1px solid color-mix(in srgb,var(--jr-blue) 30%,transparent)}
.jr-home-hero:after{width:170px;height:170px;left:-95px;bottom:-105px;border:1px solid color-mix(in srgb,var(--jr-primary) 25%,transparent)}
.jr-home-hero-shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:32px;
  align-items:stretch;
  padding:clamp(28px,4vw,54px);
  border:1px solid var(--jr-line);
  border-radius:32px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--jr-card) 96%,transparent),color-mix(in srgb,var(--jr-card-2) 94%,transparent));
  box-shadow:var(--jr-shadow);
  overflow:hidden;
}
.jr-home-hero-shell:before{
  content:"あ";
  position:absolute;
  right:37%;
  top:-38px;
  font-size:190px;
  line-height:1;
  font-weight:950;
  color:color-mix(in srgb,var(--jr-blue) 9%,transparent);
  pointer-events:none;
}
.jr-home-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.jr-home-hero-eyebrow{display:inline-flex;align-items:center;gap:11px;width:fit-content;max-width:100%;padding:8px 14px 8px 9px;border-radius:999px;background:color-mix(in srgb,var(--jr-blue) 13%,var(--jr-card));border:1px solid color-mix(in srgb,var(--jr-blue) 32%,var(--jr-line));color:var(--jr-text);font-weight:850;font-size:15px;line-height:1.4}
.jr-home-hero-eyebrow img{width:38px;height:38px;flex:0 0 auto}
.jr-home-hero h1{margin:22px 0 14px;color:var(--jr-text)!important;font-size:clamp(2.35rem,5vw,4.35rem);line-height:1.12;letter-spacing:-.045em;font-weight:950;text-wrap:balance}
.jr-home-hero-copy>p{max-width:760px;margin:0;color:var(--jr-muted);font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.8}
.jr-home-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}
.jr-home-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:12px 21px;border-radius:15px;border:1px solid transparent;text-decoration:none;font-size:17px;font-weight:900;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;background:none}
.jr-home-btn:hover{transform:translateY(-2px)}
.jr-home-btn-primary{background:linear-gradient(135deg,#ff811f,#ed5e00);color:#fff!important;box-shadow:0 12px 27px rgba(237,94,0,.25)}
.jr-home-btn-secondary{background:var(--jr-card-2);color:var(--jr-text)!important;border-color:var(--jr-line)}
.jr-home-btn-secondary:hover{border-color:var(--jr-blue);box-shadow:0 10px 24px color-mix(in srgb,var(--jr-blue) 18%,transparent)}
.jr-home-capabilities{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.jr-home-capabilities span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--jr-card-2) 90%,transparent);border:1px solid var(--jr-line);color:var(--jr-muted);font-size:14px;font-weight:750}
.jr-home-capabilities i{color:var(--jr-blue)}
.jr-home-learning-card{position:relative;z-index:1;padding:25px;border-radius:25px;border:1px solid color-mix(in srgb,var(--jr-blue) 22%,var(--jr-line));background:color-mix(in srgb,var(--jr-bg) 58%,var(--jr-card));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.jr-home-learning-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}
.jr-home-learning-head span{display:block;color:var(--jr-blue);font-size:12px;font-weight:950;letter-spacing:.16em}
.jr-home-learning-head h2{margin:3px 0 0;color:var(--jr-text);font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.3}
.jr-home-learning-head img{width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 8px 13px rgba(0,0,0,.2))}
.jr-home-learning-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.jr-home-learning-list li{display:flex;align-items:center;gap:13px;min-height:70px;padding:12px 14px;border-radius:16px;background:var(--jr-card);border:1px solid var(--jr-line)}
.jr-home-learning-list b{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:linear-gradient(135deg,var(--jr-blue),#1555c0);color:#fff;font-size:17px;box-shadow:0 7px 16px color-mix(in srgb,var(--jr-blue) 28%,transparent)}
.jr-home-learning-list strong{display:block;color:var(--jr-text);font-size:17px;line-height:1.35}
.jr-home-learning-list small{display:block;margin-top:3px;color:var(--jr-muted);font-size:14px;line-height:1.5}
[data-theme="light"] .jr-home-hero-shell{background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,246,255,.96))}
[data-theme="light"] .jr-home-learning-card{background:linear-gradient(160deg,#f6faff,#eef5fd)}
[data-theme="light"] .jr-home-learning-list li{box-shadow:0 7px 18px rgba(47,78,112,.06)}
/* 大框在最上方後，會員 CTA 不再製造過大的空白。 */
.jr-home-hero + .smart-cta-wrapper{padding-top:22px!important}
@media(max-width:980px){
  .jr-home-hero-shell{grid-template-columns:1fr;gap:24px}
  .jr-home-hero-shell:before{right:-20px;top:-25px}
  .jr-home-learning-card{display:grid;grid-template-columns:1fr}
}
@media(max-width:640px){
  .jr-home-hero{padding:18px 0 18px}
  .jr-home-hero .container{padding:0 12px!important}
  .jr-home-hero-shell{padding:22px 16px;border-radius:23px;gap:20px}
  .jr-home-hero-eyebrow{font-size:13px;padding-right:11px}
  .jr-home-hero-eyebrow img{width:34px;height:34px}
  .jr-home-hero h1{font-size:2.25rem;margin-top:18px}
  .jr-home-hero-copy>p{font-size:1.02rem;line-height:1.72}
  .jr-home-hero-actions{display:grid;grid-template-columns:1fr;margin-top:22px}
  .jr-home-btn{width:100%;min-height:56px;font-size:17px}
  .jr-home-capabilities{display:grid;grid-template-columns:1fr;gap:7px}
  .jr-home-capabilities span{border-radius:12px;font-size:14px}
  .jr-home-learning-card{padding:18px 14px;border-radius:20px}
  .jr-home-learning-head img{width:58px;height:58px}
  .jr-home-learning-list li{align-items:flex-start;min-height:0;padding:12px}
  .jr-home-learning-list b{width:38px;height:38px;flex-basis:38px}
  .jr-home-learning-list strong{font-size:16.5px}
  .jr-home-learning-list small{font-size:14px}
}

/* ========================================================================== 
   Japanese Room v3.2.5｜首頁課程卡片
   - 上方角標與價格欄位用途分開：免費課程仍顯示 Free。
   - 兩個原有連結先顯示，完整資料再由 details 展開。
   - 圖片完整呈現，不任意裁切。
   ========================================================================== */
.jr-course-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
  margin-top:32px!important;
}
.jr-course-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--jr-line);
  border-radius:24px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--jr-card) 96%,transparent),color-mix(in srgb,var(--jr-card-2) 94%,transparent));
  box-shadow:var(--jr-shadow);
  color:var(--jr-text);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.jr-course-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--jr-blue) 42%,var(--jr-line));
}
.jr-course-card-main{
  display:grid;
  grid-template-columns:minmax(190px,42%) minmax(0,1fr);
  gap:22px;
  padding:22px 22px 17px;
  align-items:center;
}
.jr-course-media{
  position:relative;
  display:grid;
  place-items:center;
  align-self:stretch;
  min-height:245px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--jr-line) 78%,transparent);
  border-radius:19px;
  background:#fff;
  box-shadow:0 10px 26px rgba(7,20,38,.13);
}
.jr-course-media>img{
  display:block;
  width:100%;
  height:100%;
  max-height:320px;
  object-fit:contain;
  object-position:center;
  background:#fff;
  cursor:zoom-in;
}
.jr-course-free-badge{
  position:absolute;
  z-index:3;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:104px;
  min-height:82px;
  padding:12px 28px 14px 16px;
  color:#fff;
  background:linear-gradient(135deg,#ef2b2f 0%,#d3151a 70%,transparent 70.5%);
  filter:drop-shadow(0 6px 12px rgba(188,20,24,.24));
  pointer-events:none;
}
.jr-course-free-badge strong{font-size:27px;line-height:1;font-weight:950;letter-spacing:.04em}
.jr-course-free-badge small{margin-top:6px;font-size:15px;line-height:1;font-weight:900;letter-spacing:.08em}
.jr-course-image-fallback{display:grid;place-items:center;gap:10px;padding:24px;color:#243b5b;font-weight:900;text-align:center}
.jr-course-image-fallback img{width:110px;height:110px;object-fit:contain}
.jr-course-summary{min-width:0}
.jr-course-curator{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
  color:#f6b62d;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
}
.jr-course-summary h3{
  margin:0;
  color:var(--jr-text)!important;
  font-size:clamp(1.38rem,2vw,1.82rem);
  line-height:1.32;
  font-weight:950;
  overflow-wrap:anywhere;
}
.jr-course-schedule{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:11px 0 0;
  color:var(--jr-muted);
  font-size:15.5px;
  line-height:1.55;
  font-weight:700;
}
.jr-course-schedule i{margin-top:5px;color:var(--jr-blue)}
.jr-course-value-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:17px;
  padding:12px 14px;
  border:1px solid var(--jr-line);
  border-radius:15px;
  background:color-mix(in srgb,var(--jr-card-2) 90%,transparent);
}
.jr-course-price{
  flex:0 0 auto;
  color:var(--jr-text);
  font-size:1.42rem;
  line-height:1;
  font-weight:950;
  white-space:nowrap;
}
.jr-course-price.is-free{color:var(--jr-green)}
.jr-course-meta{
  display:flex;
  flex:1;
  min-width:0;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  padding-left:14px;
  border-left:1px solid var(--jr-line);
}
.jr-course-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:var(--jr-muted);
  font-size:14.5px;
  line-height:1.35;
  font-weight:800;
}
.jr-course-meta span+span:before{content:'•';margin-right:1px;color:var(--jr-soft)}
.jr-course-meta i{color:var(--jr-blue)}
.jr-course-summary-points{
  list-style:none;
  display:grid;
  gap:7px;
  margin:16px 0 0;
  padding:0;
}
.jr-course-summary-points li{
  position:relative;
  padding-left:25px;
  color:var(--jr-muted);
  font-size:15px;
  line-height:1.5;
  font-weight:650;
}
.jr-course-summary-points li:before{
  content:'✓';
  position:absolute;
  left:0;
  top:1px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  color:#fff;
  background:var(--jr-green);
  font-size:11px;
  font-weight:950;
}
.jr-course-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  padding:0 22px 18px;
}
.jr-course-buy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:51px;
  padding:11px 14px;
  border:1px solid transparent;
  border-radius:13px;
  color:#fff!important;
  text-align:center;
  text-decoration:none!important;
  font-size:15.5px;
  line-height:1.35;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.13);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.jr-course-buy:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 11px 23px rgba(0,0,0,.2)}
.jr-course-buy.is-seven,.jr-course-buy.is-primary{background:linear-gradient(135deg,#ff8917,#f26300)}
.jr-course-buy.is-family{background:linear-gradient(135deg,#13aa84,#087d67)}
.jr-course-buy.is-secondary{background:linear-gradient(135deg,#3c5575,#2b405e);border-color:color-mix(in srgb,#fff 12%,transparent)}
.jr-course-details{border-top:1px solid var(--jr-line);background:color-mix(in srgb,var(--jr-card-2) 78%,transparent)}
.jr-course-details>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:57px;
  padding:14px 22px;
  color:var(--jr-text);
  cursor:pointer;
  font-size:15.5px;
  font-weight:900;
  user-select:none;
}
.jr-course-details>summary::-webkit-details-marker{display:none}
.jr-course-details>summary span{display:flex;align-items:center;gap:9px}
.jr-course-details>summary span i{color:var(--jr-blue)}
.jr-course-chevron{color:var(--jr-muted);transition:transform .22s ease}
.jr-course-details[open] .jr-course-chevron{transform:rotate(180deg)}
.jr-course-details-body{
  display:grid;
  gap:17px;
  padding:2px 22px 23px;
  animation:jrCourseDetailIn .24s ease;
}
@keyframes jrCourseDetailIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.jr-course-details-body section{
  padding:17px;
  border:1px solid var(--jr-line);
  border-radius:15px;
  background:var(--jr-card);
}
.jr-course-details-body h4{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 11px;
  color:var(--jr-text);
  font-size:17px;
  font-weight:950;
}
.jr-course-details-body h4 i{color:var(--jr-blue)}
.jr-course-details-body ul{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.jr-course-details-body li{
  position:relative;
  padding-left:20px;
  color:var(--jr-muted);
  font-size:15px;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.jr-course-details-body li:before{content:'•';position:absolute;left:2px;color:var(--jr-green);font-weight:950}
.jr-course-note{border-left:4px solid #ff6269!important}
.jr-course-note p{margin:0;color:var(--jr-muted);font-size:15px;line-height:1.7;overflow-wrap:anywhere}
[data-theme="light"] .jr-course-card{background:linear-gradient(145deg,#fff,#f7fbff)}
[data-theme="light"] .jr-course-media{box-shadow:0 9px 24px rgba(55,83,116,.1)}
[data-theme="light"] .jr-course-buy.is-secondary{background:linear-gradient(135deg,#58708e,#3d5675)}

@media(max-width:1100px){
  .jr-course-card-main{grid-template-columns:1fr;align-items:start}
  .jr-course-media{min-height:220px;max-height:330px}
  .jr-course-summary-points{grid-template-columns:1fr}
}
@media(max-width:820px){
  .jr-course-grid{grid-template-columns:1fr!important;gap:19px!important}
  .jr-course-card-main{grid-template-columns:minmax(180px,40%) minmax(0,1fr);gap:17px;padding:18px}
  .jr-course-media{min-height:220px}
  .jr-course-actions{padding:0 18px 16px}
  .jr-course-details>summary{padding:14px 18px}
  .jr-course-details-body{padding:2px 18px 20px}
}
@media(max-width:560px){
  .jr-course-card{border-radius:20px}
  .jr-course-card-main{grid-template-columns:1fr;padding:14px;gap:14px}
  .jr-course-media{min-height:0;aspect-ratio:16/10;border-radius:15px}
  .jr-course-media>img{max-height:none}
  .jr-course-free-badge{min-width:91px;min-height:72px;padding:10px 23px 12px 13px}
  .jr-course-free-badge strong{font-size:23px}
  .jr-course-free-badge small{font-size:13px}
  .jr-course-curator{margin-bottom:6px}
  .jr-course-summary h3{font-size:1.34rem}
  .jr-course-schedule{font-size:15px}
  .jr-course-value-row{align-items:flex-start;gap:10px;margin-top:13px;padding:11px 12px}
  .jr-course-price{font-size:1.35rem}
  .jr-course-meta{gap:5px;padding-left:10px}
  .jr-course-meta span{font-size:14px}
  .jr-course-summary-points li{font-size:15px}
  .jr-course-actions{grid-template-columns:1fr;padding:0 14px 14px}
  .jr-course-buy{min-height:54px;font-size:16px}
  .jr-course-details>summary{padding:14px;font-size:15.5px}
  .jr-course-details-body{padding:2px 14px 17px}
  .jr-course-details-body section{padding:14px}
}


/* ========================================================================== 
   Japanese Room v3.3.13｜首頁學習內容區塊
   - 標題、說明與顏色由 admin/curriculum.php 管理。
   - 每一階段卡片由 curriculum 資料表的已發布內容產生。
   ========================================================================== */
.jr-curriculum-section{
  position:relative;
  overflow:hidden;
  padding:78px 0;
  border:0!important;
  background:
    radial-gradient(circle at 8% 10%,rgba(56,189,248,.18),transparent 28%),
    radial-gradient(circle at 94% 84%,rgba(34,197,94,.13),transparent 30%),
    linear-gradient(145deg,#071224 0%,#0d1b31 52%,#101d32 100%);
}
.jr-curriculum-section:before{
  content:"学";
  position:absolute;
  right:-24px;
  top:-80px;
  color:rgba(255,255,255,.035);
  font-size:290px;
  line-height:1;
  font-weight:950;
  pointer-events:none;
}
.jr-curriculum-heading{
  position:relative;
  z-index:1;
  max-width:860px;
  margin:0 auto 34px;
  text-align:center;
}
.jr-curriculum-heading .section-kicker{
  color:#63d6ff!important;
  letter-spacing:.14em;
  font-weight:900;
}
.jr-curriculum-heading .section-title{
  margin-top:8px;
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.2;
  text-wrap:balance;
}
.jr-curriculum-description{
  max-width:760px;
  margin:14px auto 0;
  font-size:clamp(1rem,1.6vw,1.18rem);
  line-height:1.8;
  text-wrap:balance;
}
.jr-curriculum-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.jr-curriculum-card{
  position:relative;
  min-width:0;
  padding:26px;
  border:1px solid rgba(148,163,184,.2);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(21,35,57,.93),rgba(12,25,44,.95));
  box-shadow:0 18px 40px rgba(0,0,0,.2);
  color:#e5edf7;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.jr-curriculum-card:hover{
  transform:translateY(-3px);
  border-color:rgba(99,214,255,.5);
  box-shadow:0 22px 48px rgba(0,0,0,.28);
}
.jr-curriculum-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.jr-curriculum-step{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:15px;
  background:linear-gradient(135deg,#38bdf8,#1769e0);
  color:#fff;
  font-size:16px;
  font-weight:950;
  box-shadow:0 9px 22px rgba(23,105,224,.28);
}
.jr-curriculum-card h3{
  margin:0;
  color:#fff!important;
  font-size:clamp(1.2rem,2vw,1.55rem);
  line-height:1.35;
  font-weight:950;
  overflow-wrap:anywhere;
}
.jr-curriculum-list{
  list-style:none;
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
}
.jr-curriculum-list li{
  position:relative;
  padding-left:26px;
  color:#d7e2ef;
  font-size:16px;
  line-height:1.65;
}
.jr-curriculum-list li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#36d98b;
  font-weight:950;
}
.jr-curriculum-note{
  margin:18px 0 0;
  padding:13px 15px;
  border-left:4px solid #f6b62d;
  border-radius:0 12px 12px 0;
  background:rgba(246,182,45,.09);
  color:#f8e4ad;
  line-height:1.65;
}
.jr-curriculum-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:20px;
  color:#63d6ff!important;
  font-weight:900;
  text-decoration:none;
}
.jr-curriculum-link:hover{
  color:#fff!important;
}
@media(max-width:820px){
  .jr-curriculum-section{
    padding:58px 0;
  }
  .jr-curriculum-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:560px){
  .jr-curriculum-section{
    padding:46px 0;
  }
  .jr-curriculum-heading{
    margin-bottom:24px;
  }
  .jr-curriculum-card{
    padding:20px 17px;
    border-radius:18px;
  }
  .jr-curriculum-card-head{
    align-items:flex-start;
  }
  .jr-curriculum-step{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
}

/*
 * v3.3.15：學習內容標題支援前台深色與淺色模式各自的文字顏色。
 */
.jr-curriculum-heading .section-title {
  color: var(--jr-curr-title-dark, #ffffff) !important;
}

.jr-curriculum-heading .jr-curriculum-description {
  color: var(--jr-curr-desc-dark, #cbd5e1) !important;
}

[data-theme="light"] .jr-curriculum-heading .section-title {
  color: var(--jr-curr-title-light, #172033) !important;
}

[data-theme="light"] .jr-curriculum-heading .jr-curriculum-description {
  color: var(--jr-curr-desc-light, #52637a) !important;
}