/* Yurev Studio News / Insight pages
   Extends the unchanged v101.4 public-site stylesheet. */

.news-page{
  background:var(--canvas);
}

.news-page .header{
  background:rgba(255,253,252,.94);
}

/* Keep the supplied full lockup visible at every header width. */
.news-page .logo.logo-lockup{
  flex:0 0 auto;
  overflow:visible;
}

.news-page .brand-full-logo{
  display:block;
  width:auto;
  height:clamp(34px,2.8vw,44px);
  max-width:100%;
  object-fit:contain;
  object-position:left center;
  overflow:visible;
}

.news-page .navlinks a[aria-current="page"]{
  color:var(--ink);
}

.news-page .navlinks a[aria-current="page"]::after{
  transform:scaleX(1);
}

.news-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(50px,5vw,64px) 0 clamp(38px,3.8vw,48px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--canvas) 0%,var(--warm) 100%);
}

.news-hero::before,
.news-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.news-hero::before{
  width:310px;
  height:310px;
  right:-130px;
  top:-150px;
  background:var(--rose);
  opacity:.14;
}

.news-hero::after{
  width:190px;
  height:190px;
  left:-90px;
  bottom:-120px;
  background:var(--dusty);
  opacity:.1;
}

.news-hero-inner{
  position:relative;
  z-index:1;
  width:calc(100% - clamp(40px,4.5vw,112px));
  max-width:none;
  margin-inline:auto;
}

html[lang="ko"] .news-hero h1,
html[lang="ja"] .news-hero h1{
  max-width:100%;
  margin-top:14px;
  font-size:calc(26px + .9vw);
  line-height:1.34;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.news-hero h1 em{
  color:var(--pink);
  font-style:normal;
}

.news-hero .lead{
  max-width:100%;
  margin-top:18px;
  font-size:calc(13.5px + .18vw);
  line-height:1.86;
  text-wrap:pretty;
}

.news-section{
  padding:72px 0 104px;
}

.news-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.news-section-head h2{
  margin-top:8px;
  font-size:calc(21px + .4vw);
}

.news-count{
  color:var(--muted);
  font-size:calc(11px + .1vw);
  font-weight:650;
  letter-spacing:.02em;
}

.article-list{
  display:grid;
  gap:18px;
}

.article-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,300px);
  min-height:310px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:32px;
  background:#fff;
  box-shadow:var(--soft-shadow);
}

.article-card-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(30px,3.2vw,44px);
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 12px;
  color:var(--muted);
  font-size:calc(10.5px + .1vw);
  font-weight:650;
}

.article-category{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid rgba(223,94,135,.2);
  border-radius:999px;
  background:var(--pink-soft);
  color:var(--pink);
  font-weight:720;
}

.article-card h3{
  max-width:100%;
  margin-top:19px;
  font-size:calc(18.2px + .64vw);
  line-height:1.38;
  letter-spacing:-.045em;
  font-weight:760;
}

.article-card p{
  max-width:100%;
  margin-top:14px;
  color:var(--sub);
  font-size:calc(12.8px + .16vw);
  line-height:1.84;
}

.article-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  margin-top:26px;
  color:var(--ink);
  font-size:calc(11.5px + .1vw);
  font-weight:720;
}

.article-link span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--pink);
  color:#fff;
  transition:transform .2s ease;
}

.article-card:hover .article-link span{
  transform:translateX(3px);
}

.article-card-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:310px;
  padding:36px;
  border-left:1px solid var(--line);
  background:var(--warm);
}

.article-card-visual::before,
.article-card-visual::after{
  content:"";
  position:absolute;
  border-radius:50%;
}

.article-card-visual::before{
  width:190px;
  height:190px;
  background:var(--rose);
  opacity:.22;
}

.article-card-visual::after{
  width:118px;
  height:118px;
  transform:translate(66px,-55px);
  background:var(--dusty);
  opacity:.22;
}

.visual-mark{
  position:relative;
  z-index:1;
  display:grid;
  width:166px;
  min-height:166px;
  place-items:center;
  padding:22px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:50%;
  background:rgba(255,255,255,.78);
  box-shadow:0 22px 56px rgba(47,29,25,.09);
  text-align:center;
}

.visual-mark b{
  display:block;
  color:var(--pink);
  font-size:16px;
  line-height:1.45;
  letter-spacing:-.02em;
}

.visual-mark small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
  font-weight:720;
  letter-spacing:.09em;
}

.article-hero{
  padding:clamp(42px,4.2vw,56px) 0 clamp(46px,4.6vw,62px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--canvas) 0%,var(--warm) 100%);
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:calc(10.5px + .1vw);
  font-weight:600;
}

.breadcrumbs a:hover{
  color:var(--pink);
}

.breadcrumbs span[aria-hidden="true"]{
  color:var(--line-strong);
}

.article-header{
  width:100%;
  max-width:none;
  margin-top:34px;
}

.article-header h1{
  max-width:100%;
  margin-top:20px;
  font-size:calc(22px + 1.32vw);
  line-height:1.18;
  letter-spacing:-.058em;
}

.article-deck{
  max-width:100%;
  margin-top:24px;
  color:var(--sub);
  font-size:calc(13.6px + .25vw);
  line-height:1.88;
}

.article-byline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  margin-top:28px;
  color:var(--muted);
  font-size:calc(11px + .1vw);
}

.article-byline strong{
  color:var(--ink);
  font-weight:720;
}

.article-layout{
  display:grid;
  width:calc(100% - clamp(36px,4vw,88px));
  max-width:none;
  grid-template-columns:minmax(0,1fr) minmax(240px,18vw);
  justify-content:center;
  gap:clamp(36px,4vw,64px);
  padding-top:68px;
  padding-bottom:110px;
}

.article-content{
  min-width:0;
  width:100%;
  max-width:none;
}

.article-intro{
  padding-bottom:8px;
}

.article-intro p{
  color:var(--sub);
  font-size:calc(13.7px + .17vw);
  line-height:1.95;
}

.article-intro p+p{
  margin-top:18px;
}

.article-content section{
  padding:62px 0 0;
}

.article-content h2{
  max-width:100%;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
  font-size:calc(21.2px + .5vw);
  line-height:1.45;
  letter-spacing:-.045em;
}

.article-content h3{
  margin-top:34px;
  font-size:calc(16.1px + .25vw);
  line-height:1.55;
  letter-spacing:-.035em;
  font-weight:740;
}

.article-content h2 + p,
.article-content h3 + p{
  margin-top:20px;
}

.article-content p,
.article-content li{
  color:var(--sub);
  font-size:calc(13.7px + .17vw);
  line-height:1.95;
}

.article-content p+p{
  margin-top:18px;
}

.article-content ul,
.article-content ol{
  display:grid;
  gap:10px;
  margin:22px 0 0;
  padding-left:24px;
}

.article-content li::marker{
  color:var(--pink);
  font-weight:750;
}

.summary-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  overflow:hidden;
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--line);
}

.summary-item{
  padding:21px 22px;
  background:#fff;
}

.summary-item b{
  display:block;
  color:var(--pink);
  font-size:12px;
  font-weight:720;
  letter-spacing:.02em;
}

.summary-item span{
  display:block;
  margin-top:7px;
  color:var(--sub);
  font-size:14px;
  line-height:1.75;
}

.scope-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:28px;
}

.scope-card{
  padding:24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
}

.scope-card:nth-child(1){border-top:3px solid var(--pink)}
.scope-card:nth-child(2){border-top:3px solid var(--dusty)}
.scope-card:nth-child(3){border-top:3px solid var(--mauve)}
.scope-card:nth-child(4){border-top:3px solid var(--clay)}
.scope-card:nth-child(5){border-top:3px solid var(--honey)}
.scope-card:nth-child(6){border-top:3px solid var(--rose)}

.scope-card h3{
  margin-top:0;
  font-size:18px;
}

.scope-card .scope-no{
  display:inline-block;
  margin-right:8px;
  color:var(--pink);
  font-size:.68em;
  font-weight:800;
  letter-spacing:.04em;
  vertical-align:.1em;
}

.scope-card p{
  margin-top:10px;
  font-size:14px;
  line-height:1.82;
}

.process-list{
  counter-reset:article-step;
  display:grid;
  gap:13px;
  margin-top:26px;
  padding:0!important;
  list-style:none;
}

.process-list li{
  counter-increment:article-step;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:16px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
}

.process-list li::before{
  content:counter(article-step,decimal-leading-zero);
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--pink-soft);
  color:var(--pink);
  font-size:12px;
  font-weight:760;
}

.process-list strong{
  display:block;
  color:var(--ink);
  font-size:15px;
}

.process-list span{
  display:block;
  margin-top:5px;
  color:var(--sub);
  font-size:14px;
  line-height:1.75;
}

.prep-note{
  margin-top:26px;
  padding:23px 24px;
  border-left:3px solid var(--dusty);
  border-radius:0 18px 18px 0;
  background:var(--dusty-soft);
}

.prep-note strong{
  display:block;
  color:var(--ink);
}

.prep-note p{
  margin-top:8px;
  font-size:14.5px;
}

.faq-list{
  display:grid;
  gap:12px;
  margin-top:27px;
}

.faq-item{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
}

.faq-item summary{
  position:relative;
  padding:20px 54px 20px 22px;
  color:var(--ink);
  font-size:15px;
  line-height:1.65;
  font-weight:720;
  cursor:pointer;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary::after{
  content:"+";
  position:absolute;
  right:21px;
  top:50%;
  transform:translateY(-50%);
  color:var(--pink);
  font-size:22px;
  font-weight:500;
}

.faq-item[open] summary::after{
  content:"−";
}

.faq-item p{
  padding:0 22px 21px;
  font-size:14.5px;
  line-height:1.85;
}

.article-cta{
  margin-top:66px;
  padding:34px;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--warm);
}

.article-cta h2{
  padding:0;
  border:0;
  font-size:25px;
}

.article-cta p{
  margin-top:12px;
  font-size:14.5px;
}

.article-cta .actions{
  margin-top:23px;
}

.article-sidebar{
  min-width:0;
}

.toc{
  position:sticky;
  top:98px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
}

.toc-title{
  color:var(--ink);
  font-size:calc(10px + .1vw);
  font-weight:760;
  letter-spacing:.08em;
}

.toc ol{
  display:grid;
  gap:11px;
  margin:15px 0 0;
  padding-left:19px;
}

.toc li{
  color:var(--muted);
  font-size:calc(10.5px + .1vw);
  line-height:1.6;
}

.toc a:hover{
  color:var(--pink);
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:var(--sub);
  font-size:calc(10.5px + .1vw);
  font-weight:680;
}

html[lang="ja"] .article-header h1,
html[lang="ja"] .news-hero h1,
html[lang="ja"] .article-card h3,
html[lang="ja"] .article-content h2,
html[lang="ja"] .article-content h3{
  word-break:normal;
  overflow-wrap:anywhere;
  line-break:strict;
}

/* Keep both language versions on one uncapped fluid title scale.
   The viewport term has no maximum value, so the Japanese title keeps
   enlarging on wide and ultra-wide screens just like the Korean title. */
@media(min-width:761px){
  .article-header{
    --article-title-fluid-size:calc(16px + 1.85vw);
  }
  html[lang="ko"] .article-header h1,
  html[lang="ja"] .article-header h1{
    max-width:none;
    font-size:var(--article-title-fluid-size);
  }
}

/* On narrower desktop windows, move the TOC above the article body. */
@media(max-width:1120px){
  .article-layout{
    width:min(calc(100% - clamp(36px,4vw,72px)),980px);
    max-width:980px;
    grid-template-columns:1fr;
    gap:30px;
  }
  .article-content{max-width:none}
  .article-sidebar{order:-1}
  .toc{position:static}
  .toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:980px){
  .news-page .navlinks{gap:14px;font-size:12.5px}
  .news-page .nav-cta{display:none}
  .article-card{grid-template-columns:1fr 250px}
  .article-card-copy{padding:36px}
}

@media(max-width:760px){
  .news-page .logo.logo-lockup{overflow:visible}
  .news-page .brand-full-logo{height:34px;max-width:100%}
  .news-hero{padding:40px 0 32px;text-align:center}
  .news-hero-inner{margin:0 auto}
  .news-hero .eyebrow{margin-left:auto;margin-right:auto}
  html[lang="ko"] .news-hero h1,
  html[lang="ja"] .news-hero h1{font-size:27px;line-height:1.38}
  .news-hero .lead{margin-top:13px;font-size:clamp(13.4px,3.8vw,14.8px)}
  .news-section{padding:54px 0 74px}
  .news-section-head{align-items:start;margin-bottom:21px}
  .news-section-head h2{font-size:24px}
  .news-count{font-size:13px}
  .article-card{grid-template-columns:1fr;border-radius:26px}
  .article-card-copy{padding:28px 23px}
  .article-meta{font-size:12.5px}
  .article-card h3{font-size:23px;line-height:1.48}
  .article-card p{font-size:14px}
  .article-link{font-size:13.5px}
  .article-card-visual{min-height:220px;border-top:1px solid var(--line);border-left:0}
  .article-hero{padding:38px 0 46px}
  .breadcrumbs{font-size:12.5px}
  .article-header{margin-top:27px}
  html[lang="ko"] .article-header h1,
  html[lang="ja"] .article-header h1{font-size:27px;line-height:1.38}
  .article-deck{font-size:15.5px;line-height:1.88}
  .article-byline{font-size:13px}
  .article-layout{width:min(var(--max),calc(100% - 36px));padding-top:42px;padding-bottom:78px}
  .toc{padding:19px}
  .toc-title{font-size:12px}
  .toc ol{grid-template-columns:1fr;gap:9px}
  .toc li,.back-link{font-size:12.5px}
  .article-intro p,
  .article-content p,
  .article-content li{font-size:15px;line-height:1.9}
  .article-content section{padding-top:50px}
  .article-content h2{font-size:25px;line-height:1.48}
  .article-content h3{font-size:18px}
  .summary-box,
  .scope-grid{grid-template-columns:1fr}
  .process-list li{grid-template-columns:38px 1fr;padding:17px;gap:13px}
  .process-list li::before{width:38px;height:38px}
  .faq-item summary{padding:18px 48px 18px 18px}
  .faq-item p{padding:0 18px 19px}
  .article-cta{margin-top:54px;padding:27px 22px}
  .article-cta h2{font-size:23px}
}

@media(max-width:390px){
  .news-page .brand-full-logo{height:30px}
  html[lang="ko"] .news-hero h1,
  html[lang="ja"] .news-hero h1,
  html[lang="ko"] .article-header h1,
  html[lang="ja"] .article-header h1{font-size:23px}
  .article-byline{gap:7px 12px}
}

@media(prefers-reduced-motion:reduce){
  .article-link span{transition:none}
}