/* Sub page: the main frame/background/connector/ribbon remain exactly as in style.css. */
.sub-page{background:#eef0f3;color:#566075}
.sub-page .page-frame{min-height:1320px;--page-height:1320px}
.sub-panel{min-height:1138px;background:transparent}
.sub-panel::after{height:100%}

.sub-global-nav{height:76px;display:flex;align-items:flex-end;background:#fff;padding:0 54px 0 0;position:relative;z-index:5}
.sub-brand{flex:1;width:auto;height:76px;display:flex;align-items:center;justify-content:center;color:#e33b31;font-family:"Gowun Batang",serif;font-size:28px;font-weight:700;text-decoration:none;letter-spacing:-.045em}
.sub-bookmarks{margin-left:auto;display:flex;align-items:flex-end;height:76px;gap:4px}
.sub-bookmarks a{position:relative;width:194px;height:54px;display:flex;align-items:center;justify-content:center;background:#e73b31;color:#fff;text-decoration:none;font-size:24px;font-weight:500;letter-spacing:-.035em;box-shadow:0 -1px 5px rgba(28,39,57,.18);clip-path:polygon(0 0,88% 0,100% 38%,100% 100%,0 100%)}
.sub-bookmarks a.is-pale{background:#fff;color:#5b6271;border:1px solid #aab0bb;box-shadow:0 -1px 6px rgba(28,39,57,.18)}
.sub-bookmarks a.is-active{background:#df392f}

.sub-hero{height:122px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;background:transparent}
.sub-hero h1{margin:0;font-family:"Gowun Batang",serif;font-size:28px;font-weight:700;letter-spacing:-.04em;text-shadow:0 1px 4px rgba(28,40,60,.15)}
.sub-hero h1 strong{font-size:48px;font-weight:700}
.sub-hero h1 span{margin-left:16px;font-size:28px;font-weight:700}

.sub-content{min-height:940px;background:#fff;padding:0 84px 110px}
.sub-local-nav{height:108px;border-bottom:1px solid #aeb5c0;display:flex;justify-content:center;align-items:center;gap:30px;font-size:28px;font-weight:600;letter-spacing:-.04em}
.sub-local-nav a{color:#a9afb9;text-decoration:none;padding:38px 0 32px;font-weight:600}
.sub-local-nav a.is-active{font-weight:600;color:#414b60}
.sub-local-nav i{width:1px;height:20px;background:#8f97a5}

.profile-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);gap:62px;padding-top:42px}
.profile-copy h2,.career-card h2{font-size:24px;line-height:1.5;color:#414b60;margin:0 0 28px;font-weight:700;letter-spacing:-.035em}
.profile-copy h2,.profile-copy p{font-family:"Gowun Batang",serif}
.profile-copy p{font-size:20px;line-height:2;margin:0 0 18px;letter-spacing:-.035em;color:#626b7d}
.career-card{background:#e9ebf0;padding:44px 42px 40px;align-self:start;min-height:410px}
.career-card h2{margin-bottom:20px}
.career-card ul{list-style:none;margin:0;padding:0;color:#555f73;font-size:20px;line-height:2;letter-spacing:-.035em}
.career-card>ul>li{position:relative;padding-left:15px;margin-bottom:7px}
.career-card>ul>li::before{content:"*";position:absolute;left:0;top:0}
.career-card ul ul{margin-top:2px}
.career-card ul ul li{padding-left:12px}
.career-card ul ul li::before{content:"-";position:absolute;margin-left:-12px}

/* Main footer is kept inside the 1300px panel and stays in normal document flow.
   As sub content grows, both the body footer and the split left-edge footer move together. */
.sub-page .sub-panel>footer{position:relative;width:100%;margin:0}

.sub-page .ribbon-wrap{top:214px}
.sub-page-tools{position:fixed;right:28px;top:52%;z-index:40;color:#6c7382;font-size:12px}
.sub-top{width:30px;height:30px;border:0;border-radius:50%;background:#b5bac4;color:#fff;font-size:18px;cursor:pointer;margin:0 0 14px 4px}
.sub-page-tools ol{list-style:none;padding:0;margin:0;position:relative}
.sub-page-tools ol::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:#9ba1ad}
.sub-page-tools li{position:relative;padding-left:15px;line-height:1.55}
.sub-page-tools li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border:1px solid #7f8795;border-radius:50%;background:#eef0f3;box-sizing:border-box}
.sub-page-tools li.is-current{color:#41495a;font-weight:700}
.sub-page-tools li.is-current::before{background:#41495a}

@media (min-width:1441px) and (max-width:1690px){
  .sub-global-nav{padding-left:0;padding-right:48px}
  .sub-brand{width:auto}
  .sub-bookmarks a{width:174px}
}
@media (max-width:1440px){
  .sub-page-tools{display:none}
}
@media (min-width:901px) and (max-width:1120px){
  .sub-global-nav{padding:0 34px 0 0}
  .sub-brand{width:auto;font-size:26px}
  .sub-bookmarks a{width:145px;font-size:22px}
  .sub-content{padding-left:62px;padding-right:62px}
  .profile-layout{grid-template-columns:1fr 390px;gap:42px}
}
@media (min-width:769px) and (max-width:900px){
  .sub-global-nav{height:68px;padding:0 26px 0 0}
  .sub-brand{width:auto;height:68px;font-size:23px}
  .sub-bookmarks{height:68px}
  .sub-bookmarks a{width:118px;height:48px;font-size:18px}
  .sub-hero{height:112px}
  .sub-content{padding-left:48px;padding-right:48px}
  .profile-layout{grid-template-columns:1fr;gap:34px}
  .career-card{max-width:none}
}

/* Variable-height sub page book edge
   Top and footer artwork are separated; the white middle expands with content. */
.sub-page .page-frame::before{
  content:"";
  position:absolute;
  left:0;
  top:850px;
  bottom:429px;
  width:calc(var(--spine) + var(--connector));
  background-color:#fff;
  background-image:url('assets/book-spine-middle.png');
  background-position:left top;
  background-size:40px 1px;
  background-repeat:repeat-y;
  z-index:1;
  pointer-events:none;
}
.sub-page .book-spine--top{
  top:0;
  width:var(--spine);
  height:850px;
  background:url('assets/book-spine-top.png') 0 0/40px 850px no-repeat;
}
.sub-page .left-connector--top{
  top:0;
  width:var(--connector);
  height:850px;
  background:url('assets/left-connector-top.png') 0 0/100% 850px no-repeat;
}
.sub-page .book-spine-footer,
.sub-page .left-connector-footer{
  position:absolute;
  bottom:0;
  height:429px;
  z-index:2;
  pointer-events:none;
}
.sub-page .book-spine-footer{
  left:0;
  width:var(--spine);
  background:url('assets/book-spine-footer.png') 0 0/40px 429px no-repeat;
}
.sub-page .left-connector-footer{
  left:var(--spine);
  width:var(--connector);
  background:url('assets/left-connector-footer.png') 0 0/100% 429px no-repeat;
}

@media (max-width:1440px){
  .sub-page .book-spine-footer,
  .sub-page .left-connector-footer{display:none}
  .sub-page .page-frame::before{display:none}
}

/* 2026-07-17 polish: career hierarchy + subtle dimensional bookmark tabs */
.career-card>ul>li{
  font-weight:600;
}
.career-card>ul>li::before{
  content:"";
  width:6px;
  height:6px;
  top:16px;
  border-radius:50%;
  background:currentColor;
}
.career-card ul ul li{
  position:relative;
  font-weight:400;
}
.career-card ul ul li::before{
  content:"-";
  position:absolute;
  left:0;
  margin-left:0;
  color:inherit;
  font-weight:400;
}

.sub-bookmarks a{
  border:1px solid rgba(151,22,18,.24);
  background:linear-gradient(180deg,#ef5449 0%,#e33d34 52%,#d8342c 100%);
  box-shadow:
    0 4px 8px rgba(35,45,62,.15),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(123,14,10,.12);
  text-shadow:0 1px 0 rgba(119,14,10,.14);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.sub-bookmarks a::after{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:38%;
  clip-path:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  pointer-events:none;
}
.sub-bookmarks a:hover{
  transform:translateY(-2px);
  filter:saturate(1.03) brightness(1.02);
  box-shadow:
    0 6px 12px rgba(35,45,62,.18),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -2px 0 rgba(123,14,10,.12);
}
.sub-bookmarks a.is-active{
  background:linear-gradient(180deg,#ec4b40 0%,#dd382f 54%,#cf3028 100%);
  box-shadow:
    0 5px 10px rgba(35,45,62,.17),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -3px 0 rgba(118,12,9,.16);
}
.sub-bookmarks a.is-pale{
  background:linear-gradient(180deg,#ffffff 0%,#f5f6f8 58%,#eaedf1 100%);
  color:#5b6271;
  border:1px solid #b8bec8;
  box-shadow:
    0 4px 8px rgba(35,45,62,.13),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(99,108,123,.08);
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}


/* 2026-07-17 alignment + career card refinement */
.sub-page .sub-panel>footer{
  padding-left:84px;
  padding-right:84px;
  grid-template-columns:285px 1fr;
  box-sizing:border-box;
}

.career-card{
  background:#fff;
  border:1px solid #929aa9;
  border-radius:0 42px 42px 42px;
  padding:44px 42px 42px;
  min-height:0;
  box-sizing:border-box;
}
.career-card h2{
  margin-bottom:18px;
}
.career-card>ul>li{
  padding-left:22px;
  margin-bottom:8px;
}
.career-card>ul>li::before{
  left:2px;
  top:17px;
}
.career-card ul ul{
  margin-top:2px;
}
.career-card ul ul li{
  padding-left:26px;
  line-height:1.9;
}
.career-card ul ul li::before{
  left:4px;
}

@media (min-width:901px) and (max-width:1120px){
  .sub-page .sub-panel>footer{padding-left:62px;padding-right:62px}
}
@media (min-width:769px) and (max-width:900px){
  .sub-page .sub-panel>footer{padding-left:48px;padding-right:48px}
}

/* 2026-07-17 nav/hero/career refinement */
.sub-bookmarks a{
  box-shadow:
    0 4px 5px rgba(35,45,62,.22),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(123,14,10,.12);
  overflow:hidden;
}

/* The clipped border does not draw the last diagonal edge reliably,
   so the pale "다음이야기" tab gets that edge as a separate hairline. */
.sub-bookmarks a.is-pale::before{
  content:"";
  position:absolute;
  top:-4px;
  right:10px;
  width:1px;
  height:31px;
  background:#b8bec8;
  transform:rotate(-45deg);
  transform-origin:50% 50%;
  z-index:3;
  pointer-events:none;
}

/* restrained light sweep on rollover */
.sub-bookmarks a::after{
  content:"";
  position:absolute;
  inset:0;
  height:auto;
  clip-path:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 42%),
    linear-gradient(108deg,transparent 26%,rgba(255,255,255,0) 39%,rgba(255,255,255,.50) 48%,rgba(255,255,255,0) 57%,transparent 70%);
  background-size:100% 100%,220% 100%;
  background-position:0 0,145% 0;
  pointer-events:none;
  z-index:2;
}
.sub-bookmarks a:hover::after{
  animation:subBookmarkShine .62s ease-out 1;
}
@keyframes subBookmarkShine{
  from{background-position:0 0,145% 0}
  to{background-position:0 0,-55% 0}
}

.sub-hero{
  overflow:hidden;
}
.sub-hero h1{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:baseline;
  text-align:center;
  position:relative;
  animation:subHeroTitleIn .72s cubic-bezier(.22,.7,.25,1) both;
}
.sub-hero h1::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  width:86px;
  height:1px;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:subHeroRuleIn .7s .34s ease-out forwards;
}
@keyframes subHeroTitleIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes subHeroRuleIn{
  to{transform:translateX(-50%) scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .sub-bookmarks a:hover::after,.sub-hero h1,.sub-hero h1::after{animation:none}
  .sub-hero h1::after{transform:translateX(-50%) scaleX(1)}
}

.profile-layout{
  grid-template-columns:minmax(0,1fr) 600px;
  gap:48px;
}
.career-card{
  padding-left:34px;
  padding-right:34px;
}
.career-card>ul>li:last-child{
  white-space:nowrap;
}
.career-card>ul>li:last-child ul{
  white-space:normal;
}

@media (min-width:901px) and (max-width:1120px){
  .profile-layout{grid-template-columns:1fr 430px;gap:38px}
  .career-card>ul>li:last-child{white-space:normal}
}
@media (min-width:769px) and (max-width:900px){
  .profile-layout{grid-template-columns:1fr}
  .career-card>ul>li:last-child{white-space:normal}
}

/* 2026-07-17 final nav micro-interactions + career width tune */
.sub-brand{
  transition:transform .26s ease,text-shadow .26s ease,color .26s ease;
  will-change:transform;
}
.sub-brand:hover,
.sub-brand:focus-visible{
  transform:translateY(-2px);
  text-shadow:0 4px 10px rgba(227,59,49,.16);
}

/* clip-path clips box-shadow, so use drop-shadow for a visible 3–5px lift */
.sub-bookmarks a{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(123,14,10,.10);
  filter:drop-shadow(0 4px 4px rgba(35,45,62,.23));
}
.sub-bookmarks a:hover{
  filter:drop-shadow(0 5px 5px rgba(35,45,62,.24)) saturate(1.015) brightness(1.015);
}
.sub-bookmarks a.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(118,12,9,.14);
}
.sub-bookmarks a.is-pale{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -2px 0 rgba(99,108,123,.07);
}

/* redraw the pale tab's clipped diagonal as one continuous hairline */
.sub-bookmarks a.is-pale::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:26px;
  height:22px;
  background:linear-gradient(131.5deg,
    transparent 0 48.5%,
    #b8bec8 49%,
    #b8bec8 51%,
    transparent 51.5% 100%);
  z-index:4;
  pointer-events:none;
}

/* quieter, wider and slower light sweep */
.sub-bookmarks a::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 46%),
    linear-gradient(108deg,
      transparent 20%,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.20) 46%,
      rgba(255,255,255,.08) 54%,
      rgba(255,255,255,0) 66%,
      transparent 80%);
  background-size:100% 100%,320% 100%;
  background-position:0 0,150% 0;
}
.sub-bookmarks a:hover::after{
  animation:subBookmarkShineSoft 1.25s cubic-bezier(.22,.55,.28,1) 1;
}
@keyframes subBookmarkShineSoft{
  from{background-position:0 0,150% 0}
  to{background-position:0 0,-65% 0}
}

/* keep the long founder line on one row, but trim the card by 10px */
.profile-layout{
  grid-template-columns:minmax(0,1fr) 590px;
}

@media (prefers-reduced-motion:reduce){
  .sub-brand{transition:none}
  .sub-brand:hover,.sub-brand:focus-visible{transform:none}
  .sub-bookmarks a:hover::after{animation:none}
}


/* 2026-07-17 calm navigation + hero waiting motion */
.sub-bookmarks a{
  transition:filter .34s ease,background-color .34s ease;
}
.sub-bookmarks a span{
  position:relative;
  z-index:3;
}

/* remove the sweep/highlight layer completely */
.sub-bookmarks a::after{
  content:none !important;
  animation:none !important;
}

/* simple one-tone lift on hover */
.sub-bookmarks a:hover,
.sub-bookmarks a:focus-visible{
  filter:drop-shadow(0 5px 5px rgba(35,45,62,.24)) brightness(1.07);
}

/* rebuild the pale tab as an outer clipped border + inner clipped face */
.sub-bookmarks a.is-pale{
  border:0;
  background:#b8bec8;
  isolation:isolate;
}
.sub-bookmarks a.is-pale::before{
  content:"";
  position:absolute;
  inset:1px;
  width:auto;
  height:auto;
  background:#fff;
  clip-path:polygon(0 0,88% 0,100% 38%,100% 100%,0 100%);
  transform:none;
  z-index:1;
  pointer-events:none;
}

/* remove the underline and let the title wait gently in place */
.sub-hero h1::after{
  content:none !important;
  animation:none !important;
}
.sub-hero h1{
  animation:subHeroTitleIn .72s cubic-bezier(.22,.7,.25,1) both,
            subHeroWaiting 5.2s 1.1s ease-in-out infinite;
  will-change:transform;
}
@keyframes subHeroWaiting{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* trim the career card by another 10px */
.profile-layout{
  grid-template-columns:minmax(0,1fr) 580px;
}

@media (prefers-reduced-motion:reduce){
  .sub-hero h1{animation:none}
}

/* 2026-07-17 requested tune: smaller top menu + local submenu 10px lower */
.sub-bookmarks a{
  font-size:21px;
}
.sub-content{
  padding-top:10px;
}

@media (min-width:901px) and (max-width:1120px){
  .sub-bookmarks a{font-size:19px;}
}
@media (min-width:769px) and (max-width:900px){
  .sub-bookmarks a{font-size:16px;}
}


/* 2026-07-17 career copy + Korean line-break refinement */
.profile-layout{
  grid-template-columns:minmax(0,1fr) 560px;
}
.profile-copy h2,
.profile-copy p{
  word-break:keep-all;
  overflow-wrap:break-word;
}

@media (min-width:901px) and (max-width:1120px){
  .profile-layout{grid-template-columns:1fr 430px;gap:38px}
}
@media (min-width:769px) and (max-width:900px){
  .profile-layout{grid-template-columns:1fr}
}

/* 2026-07-17 clean next-story outline + 5px menu shadow */
.sub-bookmarks a{
  filter:drop-shadow(0 5px 5px rgba(35,45,62,.23));
}
.sub-bookmarks a:hover,
.sub-bookmarks a:focus-visible{
  filter:drop-shadow(0 5px 5px rgba(35,45,62,.23)) brightness(1.07);
}

/* Use a single SVG face/stroke so the diagonal outline cannot split or double. */
.sub-bookmarks a.is-pale{
  border:0;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 194 54' preserveAspectRatio='none'%3E%3Cpath d='M1 1 H170.7 L193 20.5 V53 H1 Z' fill='%23ffffff' stroke='%23b8bec8' stroke-width='2' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  isolation:auto;
}
.sub-bookmarks a.is-pale::before,
.sub-bookmarks a.is-pale::after{
  content:none !important;
  display:none !important;
}

/* 2026-07-17 bottom-anchored bookmark lift + visible shadow fix */
.sub-global-nav,
.sub-bookmarks{
  overflow:visible;
}
.sub-bookmarks{
  position:relative;
  z-index:20;
}
.sub-bookmarks a{
  transform:none !important;
  transform-origin:center bottom;
  height:54px;
  overflow:visible;
  position:relative;
  z-index:1;
  transition:height .24s ease, filter .28s ease, background-color .28s ease;
  filter:drop-shadow(0 5px 6px rgba(35,45,62,.23));
}
.sub-bookmarks a:hover,
.sub-bookmarks a:focus-visible{
  transform:none !important;
  height:58px;
  z-index:5;
  filter:drop-shadow(0 5px 7px rgba(35,45,62,.25)) brightness(1.06);
}
.sub-hero{
  position:relative;
  z-index:1;
}

@media (min-width:769px) and (max-width:900px){
  .sub-bookmarks a{height:48px;}
  .sub-bookmarks a:hover,
  .sub-bookmarks a:focus-visible{height:52px;}
}

/* 2026-07-17 final bookmark behavior: bottom fixed, face and type rise together */
.sub-bookmarks a span{
  transition:transform .24s ease;
  transform:translateY(0);
}
.sub-bookmarks a:hover span,
.sub-bookmarks a:focus-visible span{
  transform:translateY(-2px);
}

/* Next-story tab: keep side/top/diagonal outline, remove the bottom rule. */
.sub-bookmarks a.is-pale{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 194 54' preserveAspectRatio='none'%3E%3Cpath d='M1 53 V1 H170.7 L193 20.5 V53 Z' fill='%23ffffff'/%3E%3Cpath d='M1 53 V1 H170.7 L193 20.5 V53' fill='none' stroke='%23b8bec8' stroke-width='2' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  .sub-bookmarks a span{transition:none}
  .sub-bookmarks a:hover span,
  .sub-bookmarks a:focus-visible span{transform:none}
}


/* 2026-07-17 typography density test */
.sub-local-nav{font-size:26px;}
.profile-copy p{font-size:19px;line-height:1.9;}

/* 2026-07-18 final sub-page detail tune */
/* Career density: balance with the 19px editorial body copy. */
.career-card ul{
  font-size:19px;
  line-height:1.85;
}
.career-card>ul>li{
  margin-bottom:6px;
}
.career-card ul ul{
  margin-top:1px;
}

/* Local navigation: no extra motion, only the selected-tone color on hover. */
.sub-local-nav a{
  transition:color .22s ease;
}
.sub-local-nav a:hover,
.sub-local-nav a:focus-visible{
  color:#414b60;
}

/* Keep the page tool fixed to the viewport bottom, in the Storybook ribbon column. */
.sub-page-tools{
  top:auto;
  right:auto;
  left:calc(var(--spine) + var(--connector) + var(--panel) + 24px);
  bottom:42px;
}

/* 2026-07-18 page tool alignment + responsive ribbon-column anchoring */
.sub-page-tools{
  --tool-axis:26px;
  width:max-content;
  top:auto;
  bottom:42px;
  color:#4f5870;
  font-size:18px;
  line-height:1.45;
}
.sub-top{
  width:52px;
  height:52px;
  margin:0 0 18px 0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:700;
}
.sub-page-tools ol{
  margin:0;
  padding:0;
}
.sub-page-tools ol::before{
  left:calc(var(--tool-axis) - .5px);
  top:9px;
  bottom:9px;
}
.sub-page-tools li{
  min-height:36px;
  padding-left:44px;
  line-height:36px;
  white-space:nowrap;
}
.sub-page-tools li::before{
  left:21px;
  top:13px;
  width:10px;
  height:10px;
}

/* Wide desktop: align under the Storybook ribbon column. */
@media (min-width:1691px){
  .sub-page-tools{
    left:calc(var(--spine) + var(--connector) + var(--panel) + 34px);
    right:auto;
  }
}

/* The whole book is scaled in this range, so anchor the tool to the viewport
   using the same visual ribbon column rather than the unscaled CSS width. */
@media (min-width:1441px) and (max-width:1690px){
  .sub-page-tools{
    display:block;
    left:auto;
    right:clamp(24px,4.7vw,80px);
  }
}

/* Laptop/tablet: keep it inside the dedicated ribbon gutter. */
@media (min-width:901px) and (max-width:1440px){
  .sub-page-tools{
    display:block;
    left:auto;
    right:18px;
    bottom:32px;
    transform:scale(.88);
    transform-origin:right bottom;
  }
}

/* Smaller tablet/mobile: remove it rather than letting it collide with content. */
@media (max-width:900px){
  .sub-page-tools{display:none;}
}


/* 2026-07-18 TOP-only tool: align to the Storybook ribbon axis at every width */
.sub-page-tools{
  display:block;
  position:fixed;
  left:auto;
  top:auto;
  right:79px;
  bottom:42px;
  width:52px;
  transform:none;
  z-index:40;
}
.sub-page-tools ol{display:none !important;}
.sub-top{margin:0;width:52px;height:52px;}

/* The 1680px book is uniformly scaled here; 4.7vw follows the ribbon center. */
@media (min-width:1441px) and (max-width:1690px){
  .sub-page-tools{right:4.7vw;bottom:42px;transform:none;}
}

/* Reflow layouts: use each ribbon gutter's real center, not a generic edge offset. */
@media (min-width:1121px) and (max-width:1440px){
  .sub-page-tools{right:60px;bottom:32px;transform:none;}
}
@media (min-width:901px) and (max-width:1120px){
  .sub-page-tools{right:51px;bottom:28px;transform:scale(.92);transform-origin:center bottom;}
}
@media (min-width:768px) and (max-width:900px){
  .sub-page-tools{right:44px;bottom:24px;transform:scale(.86);transform-origin:center bottom;}
}
@media (max-width:767px){
  .sub-page-tools{display:none;}
}

/* 2026-07-18 exact TOP axis fix
   Align the fixed 52px TOP button to the actual center of the responsive Storybook ribbon. */
.sub-page-tools{
  position:fixed !important;
  top:auto !important;
  width:52px !important;
  height:52px !important;
  margin:0 !important;
  transform:none !important;
}
.sub-top{
  width:52px !important;
  height:52px !important;
  margin:0 !important;
}

/* Wide desktop: ribbon center = spine + connector + panel + 62px. */
@media (min-width:1691px){
  .sub-page-tools{
    left:calc(var(--spine) + var(--connector) + var(--panel) + 36px) !important;
    right:auto !important;
    bottom:42px !important;
  }
}

/* 1441–1690: the full 1680px book is scaled by viewport/1680.
   Original ribbon center is x=1602px; subtract half of the 52px button. */
@media (min-width:1441px) and (max-width:1690px){
  .sub-page-tools{
    left:calc(95.3571429vw - 26px) !important;
    right:auto !important;
    bottom:42px !important;
  }
}

/* Reflow ranges: derive from the real gutter and ribbon widths.
   108px gutter / 96px ribbon => center 60px from viewport right.
   92px gutter / 82px ribbon  => center 51px from viewport right.
   78px gutter / 68px ribbon  => center 44px from viewport right. */
@media (min-width:1121px) and (max-width:1440px){
  .sub-page-tools{
    left:auto !important;
    right:34px !important;
    bottom:32px !important;
  }
}
@media (min-width:901px) and (max-width:1120px){
  .sub-page-tools{
    left:auto !important;
    right:25px !important;
    bottom:28px !important;
  }
}
@media (min-width:768px) and (max-width:900px){
  .sub-page-tools{
    display:block !important;
    left:auto !important;
    right:18px !important;
    bottom:24px !important;
  }
}
@media (max-width:767px){
  .sub-page-tools{display:none !important;}
}

/* 2026-07-18 final dummy-page finish -------------------------------------- */
/* 1) TOP: its horizontal axis is measured from the rendered ribbon in JS.
   This removes all breakpoint guesses and remains exact while the book scales. */
.sub-page-tools{
  position:fixed !important;
  right:auto !important;
  width:52px !important;
  height:52px !important;
  bottom:42px !important;
  transform:none !important;
}
@media (min-width:768px) and (max-width:1440px){
  .sub-page-tools{bottom:32px !important;}
}
@media (max-width:767px){
  .sub-page-tools{display:none !important;}
}

/* 2) Bookmark tabs: 2px side depth and a restrained 6px right-cast shadow. */
.sub-bookmarks a{
  filter:
    drop-shadow(2px 0 0 rgba(91,31,29,.22))
    drop-shadow(6px 0 5px rgba(35,45,62,.22)) !important;
  transition:height .24s ease,filter .22s ease,background-color .22s ease !important;
}
.sub-bookmarks a:hover,
.sub-bookmarks a:focus-visible{
  filter:
    drop-shadow(2px 0 0 rgba(91,31,29,.24))
    drop-shadow(6px 0 6px rgba(35,45,62,.25))
    brightness(1.045) !important;
}
.sub-bookmarks a.is-pale{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 194 54' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23fafbfc'/%3E%3Cstop offset='1' stop-color='%23eef0f3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 53 V1 H170.7 L193 20.5 V53 Z' fill='url(%23g)'/%3E%3Cpath d='M1 53 V1 H170.7 L193 20.5 V53' fill='none' stroke='%23b8bec8' stroke-width='2' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E") !important;
  filter:
    drop-shadow(2px 0 0 rgba(105,113,126,.20))
    drop-shadow(6px 0 5px rgba(35,45,62,.19)) !important;
}
.sub-bookmarks a.is-pale:hover,
.sub-bookmarks a.is-pale:focus-visible{
  filter:
    drop-shadow(2px 0 0 rgba(105,113,126,.23))
    drop-shadow(6px 0 6px rgba(35,45,62,.22))
    brightness(1.025) !important;
}

/* 3) Career column: fluid width and gap, with no sudden breakpoint jump. */
.profile-layout{
  grid-template-columns:minmax(0,1fr) clamp(390px,37vw,560px) !important;
  gap:clamp(38px,4vw,62px) !important;
}
@media (min-width:901px) and (max-width:1120px){
  .profile-layout{
    grid-template-columns:minmax(0,1fr) clamp(390px,37vw,430px) !important;
    gap:clamp(32px,3.4vw,38px) !important;
  }
}
@media (max-width:900px){
  .profile-layout{grid-template-columns:1fr !important;gap:34px !important;}
}

/* v19: keep v15 bookmark/menu styling exactly; only retain the corrected TOP structure. */
.sub-page-tools{
  position:fixed !important;
  top:auto !important;
  right:auto !important;
  bottom:42px !important;
  width:52px !important;
  height:52px !important;
  margin:0 !important;
  transform:none !important;
  z-index:80 !important;
}
.sub-top{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:52px !important;
  height:52px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
@media (min-width:768px){
  .sub-page-tools{display:block !important;}
}
@media (min-width:901px) and (max-width:1440px){
  .sub-page-tools{bottom:32px !important;}
}
@media (min-width:768px) and (max-width:900px){
  .sub-page-tools,
  .sub-top{
    width:46px !important;
    height:46px !important;
  }
  .sub-page-tools{bottom:24px !important;}
}
@media (max-width:767px){
  .sub-page-tools{display:none !important;}
}

/* v20 final dummy: TOP hover only — match the footer blue, no movement or extra effects. */
.sub-top{
  transition:background-color .28s ease !important;
}
.sub-top:hover,
.sub-top:focus-visible{
  background:var(--blue) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
}

/* Mins > Design philosophy */
.philosophy-layout{
  display:grid;
  grid-template-columns:minmax(380px,1.06fr) minmax(0,.94fr);
  align-items:start;
  gap:clamp(54px,4.8vw,78px);
  padding-top:42px;
}
.philosophy-visual{
  margin:0;
  overflow:hidden;
  border-radius:0 28px 28px 28px;
  aspect-ratio:891 / 1004;
  background:#d7d3ce;
}
.philosophy-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.philosophy-copy{
  font-family:"Gowun Batang",serif;
  text-align:center;
  color:#626b7d;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.philosophy-copy h2{
  margin:0 0 34px;
  color:#414b60;
  font-size:25px;
  line-height:1.65;
  font-weight:700;
  letter-spacing:-.04em;
}
.philosophy-copy p{
  margin:0 0 20px;
  font-size:19px;
  line-height:1.9;
  letter-spacing:-.035em;
}

@media (min-width:901px) and (max-width:1120px){
  .philosophy-layout{
    grid-template-columns:minmax(330px,1.02fr) minmax(0,.98fr);
    gap:40px;
    padding-top:38px;
  }
  .philosophy-copy h2{font-size:23px;margin-bottom:28px}
  .philosophy-copy p{font-size:18px;margin-bottom:16px}
}
@media (min-width:769px) and (max-width:900px){
  .philosophy-layout{
    grid-template-columns:minmax(292px,1fr) minmax(0,1fr);
    gap:30px;
    padding-top:34px;
  }
  .philosophy-visual{border-radius:0 22px 22px 22px}
  .philosophy-copy h2{font-size:21px;line-height:1.55;margin-bottom:22px}
  .philosophy-copy p{font-size:17px;line-height:1.8;margin-bottom:13px}
}
@media (max-width:768px){
  .philosophy-layout{
    grid-template-columns:1fr;
    gap:38px;
    padding-top:38px;
  }
  .philosophy-visual{width:min(100%,580px);justify-self:center;border-radius:0 22px 22px 22px}
  .philosophy-copy{max-width:620px;justify-self:center}
}

/* Mins > Design philosophy final: quiet separators between short text blocks. */
.philosophy-copy p:not(:last-child)::after{
  content:"";
  display:block;
  width:26px;
  height:1px;
  margin:15px auto 0;
  background:rgba(98,107,125,.24);
}
@media (min-width:769px) and (max-width:1120px){
  .philosophy-copy p:not(:last-child)::after{
    width:24px;
    margin-top:12px;
  }
}
@media (max-width:768px){
  .philosophy-copy p:not(:last-child)::after{
    width:22px;
    margin-top:11px;
  }
}

/* Design > Jirisan1915 — PDF-faithful build */
.design-faithful{padding-bottom:110px}.design-faithful-nav{white-space:nowrap}.df-project{padding-top:46px;color:#626b7d}.df-head{display:flex;justify-content:space-between;align-items:flex-start;gap:36px;margin-bottom:34px}.df-kicker{margin:0 0 8px;color:#43506a;font-size:17px;font-weight:700}.df-head h2{margin:0;color:#30394c;font-size:30px;line-height:1.3;letter-spacing:-.045em}.df-role{flex:0 0 300px;padding:16px 20px;border:1.5px solid #687286;border-radius:22px;color:#4e596d;font-size:14px;line-height:1.7;text-align:center}.df-two{display:grid;grid-template-columns:54% 46%;gap:48px;align-items:start}.df-two figure,.df-wide{margin:0}.df-two img,.df-wide img{display:block;width:100%;height:auto}.df-copy{font-family:"Gowun Batang",serif;color:#677083}.df-copy h3{margin:0 0 12px;color:#4a556a;font-family:inherit;font-size:19px}.df-copy h3:not(:first-child){margin-top:34px}.df-copy h3::before{content:"●";margin-right:8px;color:#949ca9;font-size:.58em;vertical-align:3px}.df-copy p{margin:0 0 14px;font-size:17px;line-height:1.9;letter-spacing:-.035em;word-break:keep-all}.df-story{grid-template-columns:53% 47%;margin-top:72px;gap:54px}.df-wide{margin-top:62px}.df-wide+ .df-wide{margin-top:54px}
@media(max-width:1120px){.df-head h2{font-size:27px}.df-role{flex-basis:270px}.df-two{gap:36px}.df-copy p{font-size:16px}.df-story{gap:40px}}
@media(max-width:900px){.design-faithful-nav{white-space:normal;flex-wrap:wrap}.df-head{gap:24px}.df-head h2{font-size:24px}.df-role{flex-basis:245px;padding:12px}.df-two{grid-template-columns:52% 48%;gap:26px}.df-copy p{font-size:15px;line-height:1.82}.df-story{margin-top:54px}}
@media(max-width:768px){.df-project{padding-top:34px}.df-head{display:block}.df-head h2{font-size:25px}.df-role{margin-top:20px;width:100%}.df-two{grid-template-columns:1fr;gap:30px}.df-story{margin-top:48px}.df-copy p{font-size:16px}.df-wide{margin-top:42px}.df-wide+ .df-wide{margin-top:36px}}

/* 2026-07-18 Jirisan layout correction: keep every section inside the local-nav rule */
.design-project-page .design-faithful,
.design-project-page .df-project,
.design-project-page .df-project *{
  box-sizing:border-box;
}
.design-project-page .df-project{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible;
}
.design-project-page .df-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:36px;
  width:100%;
  max-width:100%;
}
.design-project-page .df-head>div,
.design-project-page .df-two>*,
.design-project-page figure{
  min-width:0;
  max-width:100%;
}
.design-project-page .df-two{
  grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  width:100%;
  max-width:100%;
}
.design-project-page .df-story{
  grid-template-columns:minmax(0,53fr) minmax(0,47fr);
}
.design-project-page .df-two img,
.design-project-page .df-wide img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  overflow:visible;
}
.design-project-page .df-wide{
  width:100%;
  max-width:100%;
  overflow:visible;
}

/* requested type hierarchy */
.design-project-page .df-kicker{
  font-size:22px;
  font-weight:600;
  line-height:1.35;
}
.design-project-page .df-head h2{
  font-size:44px;
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.045em;
  word-break:keep-all;
}
.design-project-page .df-role{
  width:100%;
  min-width:0;
  padding:18px 22px;
  border-radius:0 22px 22px 22px;
  font-size:18px;
  font-weight:500;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.design-project-page .df-role b{
  font-size:18px;
  font-weight:700;
}
.design-project-page .df-copy h3{
  font-size:20px;
  font-weight:600;
  line-height:1.45;
}

@media (min-width:901px) and (max-width:1120px){
  .design-project-page .df-head{grid-template-columns:minmax(0,1fr) auto;gap:28px}
  .design-project-page .df-kicker{font-size:18px}
  .design-project-page .df-head h2{font-size:34px}
  .design-project-page .df-role,.design-project-page .df-role b{font-size:15px}
  .design-project-page .df-copy h3{font-size:18px}
}
@media (min-width:769px) and (max-width:900px){
  .design-project-page .df-head{grid-template-columns:1fr}
  .design-project-page .df-role{max-width:520px}
  .design-project-page .df-two,
  .design-project-page .df-story{grid-template-columns:1fr}
  .design-project-page .df-kicker{font-size:17px}
  .design-project-page .df-head h2{font-size:30px}
  .design-project-page .df-role,.design-project-page .df-role b{font-size:14px}
  .design-project-page .df-copy h3{font-size:17px}
}
@media (max-width:768px){
  .design-project-page .df-head{display:block}
  .design-project-page .df-kicker{font-size:15px}
  .design-project-page .df-head h2{font-size:25px}
  .design-project-page .df-role,.design-project-page .df-role b{font-size:12px}
  .design-project-page .df-copy h3{font-size:15px}
}


/* 2026-07-18 Jirisan typography + responsive local-nav correction */
.design-project-page .df-head h2{
  font-size:42px;
  font-weight:600;
  line-height:1.16;
}
.design-project-page .df-title-ko,
.design-project-page .df-title-en{
  display:inline-block;
}
.design-project-page .df-copy h3{
  font-family:"Pretendard","Noto Sans KR",Arial,sans-serif;
  font-size:20px;
  font-weight:600;
}
.design-project-page .df-copy h3::before{
  content:"➜";
  display:inline-block;
  margin-right:8px;
  color:#6f788a;
  font-size:.82em;
  vertical-align:1px;
}
.design-project-page .df-copy strong{
  font-weight:700;
  color:#4d576a;
}

/* Five project links become two tidy rows; the divider rule stays below both rows. */
@media (min-width:769px) and (max-width:1120px){
  .design-project-page .design-faithful-nav{
    display:grid;
    grid-template-columns:repeat(6,max-content);
    justify-content:center;
    align-content:center;
    column-gap:18px;
    row-gap:12px;
    height:auto;
    min-height:118px;
    padding:22px 0 20px;
    line-height:1.25;
    white-space:normal;
  }
  .design-project-page .design-faithful-nav i{display:none}
  .design-project-page .design-faithful-nav a{
    padding:0;
    line-height:1.25;
    text-align:center;
  }
  .design-project-page .design-faithful-nav a:nth-of-type(1){grid-column:1 / span 2}
  .design-project-page .design-faithful-nav a:nth-of-type(2){grid-column:3 / span 2}
  .design-project-page .design-faithful-nav a:nth-of-type(3){grid-column:5 / span 2}
  .design-project-page .design-faithful-nav a:nth-of-type(4){grid-column:2 / span 2}
  .design-project-page .design-faithful-nav a:nth-of-type(5){grid-column:4 / span 2}
}
@media (min-width:901px) and (max-width:1120px){
  .design-project-page .design-faithful-nav{font-size:21px}
  .design-project-page .df-head h2{font-size:36px}
}
@media (min-width:769px) and (max-width:900px){
  .design-project-page .design-faithful-nav{
    min-height:112px;
    padding:20px 0 18px;
    column-gap:14px;
    row-gap:10px;
    font-size:18px;
  }
  .design-project-page .df-head h2{font-size:32px}
}
@media (max-width:768px){
  .design-project-page .df-head h2{font-size:28px;line-height:1.2}
}


/* 2026-07-18 Jirisan exact emphasis, circle-down bullets, responsive dividers and split image rows */
.design-project-page .df-copy strong{
  font-weight:700;
  color:inherit;
}
.design-project-page .df-copy h3::before{
  content:"↓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  margin-right:9px;
  border:1.4px solid currentColor;
  border-radius:50%;
  color:#6f788a;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1;
  vertical-align:1px;
  box-sizing:border-box;
}
.design-project-page .df-image-pair{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:36px;
  width:100%;
  max-width:100%;
  margin-top:62px;
  align-items:start;
}
.design-project-page .df-image-pair + .df-image-pair{margin-top:54px}
.design-project-page .df-image-pair figure{margin:0;min-width:0;overflow:visible}
.design-project-page .df-image-pair img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  overflow:visible;
}
@media (min-width:769px) and (max-width:1120px){
  .design-project-page .design-faithful-nav a{position:relative}
  .design-project-page .design-faithful-nav a:nth-of-type(1)::after,
  .design-project-page .design-faithful-nav a:nth-of-type(2)::after,
  .design-project-page .design-faithful-nav a:nth-of-type(4)::after{
    content:"";
    position:absolute;
    right:-10px;
    top:50%;
    width:1px;
    height:17px;
    background:#a9afba;
    transform:translateY(-50%);
  }
}
@media (max-width:900px){
  .design-project-page .df-image-pair{
    grid-template-columns:1fr;
    gap:30px;
    margin-top:48px;
  }
  .design-project-page .df-image-pair + .df-image-pair{margin-top:42px}
}
@media (max-width:768px){
  .design-project-page .df-image-pair{gap:24px;margin-top:42px}
  .design-project-page .df-image-pair + .df-image-pair{margin-top:36px}
}

/* Shared wrapper behavior retained from the approved responsive submenu. */
.design-project-page .design-nav-row{display:contents}

/* v35 FINAL OVERRIDE — requested five fixes, no generated icon shapes */
.design-project-page .df-copy h3::before{
  content:"⏷" !important;
  display:inline !important;
  margin-right:8px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:#a8aeba !important;
  font-family:Pretendard,Arial,sans-serif !important;
  font-size:20px !important;
  font-weight:600 !important;
  line-height:1 !important;
  vertical-align:0 !important;
}
/* desktop keeps each source pair side by side */
.design-project-page .df-package-bottles{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:20px !important;
  width:100% !important;
}
.design-project-page .df-image-pair figure{
  min-width:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
.design-project-page .df-image-pair img{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
}

/* responsive submenu: exactly 3 items / 2 items; separators occupy equal center columns */
@media (max-width:1120px){
  .design-project-page .design-faithful-nav{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    min-height:auto !important;
    padding:22px 0 20px !important;
    white-space:normal !important;
  }
  .design-project-page .design-nav-row{
    display:grid !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:100% !important;
  }
  .design-project-page .design-nav-row a{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    position:static !important;
    justify-self:center !important;
    line-height:1.35 !important;
    text-align:center !important;
  }
  .design-project-page .design-nav-row i{
    display:block !important;
    width:1px !important;
    height:16px !important;
    margin:0 !important;
    justify-self:center !important;
    background:#a9afba !important;
  }
  .design-project-page .design-faithful-nav a::after{display:none !important}
}

/* every two-column image row becomes one full-width image per row */
@media (max-width:900px){
  .design-project-page .df-package-top,
  .design-project-page .df-package-bottles{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    gap:10px !important;
  }
  .design-project-page .df-package-bottles{margin-top:20px !important}
  .design-project-page .df-image-pair figure,
  .design-project-page .df-image-pair img{
    width:100% !important;
    max-width:none !important;
  }
}
@media (max-width:768px){
  .design-project-page .design-faithful-nav{gap:10px !important;padding:18px 0 17px !important}
  .design-project-page .df-package-top,
  .design-project-page .df-package-bottles{gap:8px !important}
}

/* v37 — user-supplied portfolio image pairs; do not crop or reinterpret */
.design-project-page .df-project > .df-image-pair{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  column-gap:18px;
  row-gap:0;
  margin:34px 0 0;
}
.design-project-page .df-project > .df-image-pair + .df-image-pair{
  margin-top:30px;
}
.design-project-page .df-project > .df-image-pair figure{
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  overflow:visible;
}
.design-project-page .df-project > .df-image-pair img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
  object-fit:contain;
}
.design-project-page .df-package-top{
  grid-template-columns:minmax(0,1.82fr) minmax(0,1fr) !important;
  column-gap:22px !important;
}
.design-project-page .df-package-bottles{
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr) !important;
  column-gap:18px !important;
}
.design-project-page .df-leaflet{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:18px !important;
}
.design-project-page .df-panels{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:18px !important;
}
@media (max-width:900px){
  .design-project-page .df-package-top,
  .design-project-page .df-package-bottles,
  .design-project-page .df-leaflet,
  .design-project-page .df-panels{
    grid-template-columns:minmax(0,1fr) !important;
    column-gap:0 !important;
    row-gap:12px !important;
  }
  .design-project-page .df-project > .df-image-pair{
    margin-top:26px !important;
  }
  .design-project-page .df-project > .df-image-pair + .df-image-pair{
    margin-top:22px !important;
  }
  .design-project-page .df-project > .df-image-pair figure,
  .design-project-page .df-project > .df-image-pair img{
    width:100% !important;
    max-width:none !important;
  }
}
@media (max-width:600px){
  .design-project-page .df-package-top,
  .design-project-page .df-package-bottles,
  .design-project-page .df-leaflet,
  .design-project-page .df-panels{
    row-gap:10px !important;
  }
  .design-project-page .df-project > .df-image-pair + .df-image-pair{
    margin-top:18px !important;
  }
}

/* v38 — user-supplied section bullet and wider two-column spacing */
.design-project-page .df-copy h3::before{
  content:"" !important;
  display:inline-block !important;
  width:18px !important;
  height:18px !important;
  margin-right:9px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent url("assets/section-bullet-down.png") center / contain no-repeat !important;
  vertical-align:-2px !important;
}
.design-project-page .df-project > .df-image-pair{
  column-gap:48px !important;
}
.design-project-page .df-package-top,
.design-project-page .df-package-bottles,
.design-project-page .df-leaflet,
.design-project-page .df-panels{
  column-gap:48px !important;
}
@media (max-width:900px){
  .design-project-page .df-package-top,
  .design-project-page .df-package-bottles,
  .design-project-page .df-leaflet,
  .design-project-page .df-panels{
    column-gap:0 !important;
  }
}

/* v39 — restore horizontal spacing, add vertical rhythm, separate captions */
.design-project-page .df-project > .df-image-pair{
  column-gap:18px !important;
  margin-top:48px !important;
}
.design-project-page .df-project > .df-image-pair + .df-image-pair{
  margin-top:48px !important;
}
.design-project-page .df-package-top{
  column-gap:22px !important;
}
.design-project-page .df-package-bottles,
.design-project-page .df-leaflet,
.design-project-page .df-panels{
  column-gap:18px !important;
}
@media (max-width:900px){
  .design-project-page .df-project > .df-image-pair,
  .design-project-page .df-project > .df-image-pair + .df-image-pair{
    margin-top:48px !important;
  }
  .design-project-page .df-package-top,
  .design-project-page .df-package-bottles,
  .design-project-page .df-leaflet,
  .design-project-page .df-panels{
    column-gap:0 !important;
    row-gap:42px !important;
  }
}


/* Shared design-project rhythm and caption hierarchy. */
.design-project-page{
  --df-caption-color:#515a6b;
  --df-caption-gap:6px;
  --df-caption-margin:9px;
  --df-caption-size:14px;
  --df-caption-icon-size:13px;
}
.design-project-page .df-story + .df-image-pair{margin-top:32px !important;}
.design-project-page .df-project > .df-image-pair + .df-image-pair{margin-top:48px !important;}
.design-project-page .df-project figcaption{
  display:flex !important;
  align-items:center !important;
  gap:var(--df-caption-gap) !important;
  width:100% !important;
  margin-top:var(--df-caption-margin) !important;
  color:var(--df-caption-color) !important;
  font-family:"Pretendard",sans-serif !important;
  font-size:var(--df-caption-size) !important;
  font-weight:500 !important;
  line-height:1.4 !important;
}
.design-project-page .df-project figcaption::before{
  content:"⌃" !important;
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  flex:0 0 auto !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--df-caption-color) !important;
  font-family:"Pretendard",sans-serif !important;
  font-size:var(--df-caption-icon-size) !important;
  font-weight:600 !important;
  line-height:1 !important;
  transform:translateY(1px);
}
@media (max-width:900px){
  .design-project-page{
    --df-caption-margin:8px;
    --df-caption-size:13px;
    --df-caption-icon-size:12px;
  }
  .design-project-page .df-story + .df-image-pair{margin-top:30px !important;}
  .design-project-page .df-project > .df-image-pair + .df-image-pair{margin-top:46px !important;}
  .design-project-page .df-package-top,
  .design-project-page .df-package-bottles,
  .design-project-page .df-leaflet,
  .design-project-page .df-panels{row-gap:26px !important;}
}


/* v41 final — add breathing room before exhibition panels */
.design-project-page .df-leaflet + .df-panels{
  margin-top:64px !important;
}
@media (max-width:900px){
  .design-project-page .df-leaflet + .df-panels{
    margin-top:58px !important;
  }
}

/* v42 Chickpeace first-pass layout */
.design-project-page .chickpeace-project .df-story{align-items:start}
.design-project-page .chickpeace-project .df-story figure{margin:0}
.design-project-page .chick-brand-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.design-project-page .chick-touchpoint-row{grid-template-columns:minmax(0,1.52fr) minmax(0,1fr)}
.design-project-page .chick-holder-row{grid-template-columns:1fr}
.design-project-page .chick-promo-row{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.design-project-page .chickpeace-project .df-image-pair + .df-image-pair{margin-top:54px !important}
.design-project-page .chick-holder-row + .chick-promo-row{margin-top:64px !important}
@media(max-width:900px){
 .design-project-page .chick-brand-row,.design-project-page .chick-touchpoint-row,.design-project-page .chick-holder-row,.design-project-page .chick-promo-row{grid-template-columns:1fr !important;row-gap:26px !important}
 .design-project-page .chickpeace-project .df-image-pair + .df-image-pair{margin-top:46px !important}
 .design-project-page .chick-holder-row + .chick-promo-row{margin-top:58px !important}
}

/* v43 Chickpeace — user-cropped final images and reference-based layout */
.design-project-page .chickpeace-project .df-intro figure img{
  aspect-ratio:auto !important;
  object-fit:contain !important;
}
.design-project-page .chickpeace-project .df-story figure img{
  display:block;
  width:100%;
  height:auto;
}
.design-project-page .chickpeace-project .df-story + .df-image-pair{
  margin-top:64px !important;
}
.design-project-page .chickpeace-project .df-image-pair{
  align-items:start;
  column-gap:58px !important;
}
.design-project-page .chickpeace-project .df-image-pair + .df-image-pair{
  margin-top:68px !important;
}
.design-project-page .chick-brand-row{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
}
.design-project-page .chick-touchpoint-row{
  grid-template-columns:minmax(0,1.52fr) minmax(0,1fr) !important;
}
.design-project-page .chick-holder-row{
  grid-template-columns:minmax(0,1fr) !important;
}
.design-project-page .chick-holder-row figure{
  width:100%;
}
.design-project-page .chick-promo-row{
  grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) !important;
}
.design-project-page .chick-print-row{
  grid-template-columns:minmax(0,1.28fr) minmax(0,1fr) !important;
}
.design-project-page .chick-pop-row{
  grid-template-columns:minmax(0,2.18fr) minmax(0,1fr) !important;
}
.design-project-page .chick-holder-row + .chick-promo-row,
.design-project-page .chick-promo-row + .chick-print-row,
.design-project-page .chick-print-row + .chick-pop-row{
  margin-top:72px !important;
}
@media(max-width:900px){
  .design-project-page .chickpeace-project .df-story + .df-image-pair{
    margin-top:44px !important;
  }
  .design-project-page .chickpeace-project .df-image-pair,
  .design-project-page .chick-brand-row,
  .design-project-page .chick-touchpoint-row,
  .design-project-page .chick-holder-row,
  .design-project-page .chick-promo-row,
  .design-project-page .chick-print-row,
  .design-project-page .chick-pop-row{
    grid-template-columns:minmax(0,1fr) !important;
    column-gap:0 !important;
    row-gap:30px !important;
  }
  .design-project-page .chickpeace-project .df-image-pair + .df-image-pair,
  .design-project-page .chick-holder-row + .chick-promo-row,
  .design-project-page .chick-promo-row + .chick-print-row,
  .design-project-page .chick-print-row + .chick-pop-row{
    margin-top:54px !important;
  }
}
\n\n/* v44 Chickpeace — title, emphasis, tighter columns, equal row heights */
.design-project-page .chickpeace-project .chick-title-line{
  white-space:nowrap;
}
.design-project-page .chickpeace-project .chick-title-dash{
  font-weight:600;
}
.design-project-page .chickpeace-project .df-image-pair{
  column-gap:29px !important;
  align-items:stretch !important;
}
@media (min-width:901px){
  .design-project-page .chickpeace-project .df-image-pair > figure{
    display:flex;
    min-width:0;
    flex-direction:column;
  }
  .design-project-page .chickpeace-project .df-image-pair > figure > img{
    flex:1 1 auto;
    width:100% !important;
    height:100% !important;
    min-height:0;
    object-fit:contain !important;
    object-position:center top;
  }
}
@media (max-width:900px){
  .design-project-page .chickpeace-project .chick-title-line{
    white-space:normal;
  }
  .design-project-page .chickpeace-project .df-image-pair{
    column-gap:0 !important;
  }
  .design-project-page .chickpeace-project .df-image-pair > figure > img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }
}


/* v45 Chickpeace — exact caption-row heights, intro rhythm, centered submenu */
@media (min-width:901px){
  .design-project-page .chickpeace-project .chick-print-row > figure,
  .design-project-page .chickpeace-project .chick-pop-row > figure{
    display:grid !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    align-self:stretch !important;
  }
  .design-project-page .chickpeace-project .chick-print-row > figure > img,
  .design-project-page .chickpeace-project .chick-pop-row > figure > img{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:contain !important;
    object-position:center top !important;
  }
}


/* v46 final Chickpeace — exact body rhythm and equal image heights */
.design-project-page .chickpeace-project .chick-approach-line{
  margin-bottom:14px !important;
}
.design-project-page .chickpeace-project .chick-approach-strong{
  margin-top:0 !important;
  margin-bottom:28px !important;
}
@media (min-width:901px){
  /* Ratios derived from the source images so paired images finish at the same height. */
  .design-project-page .chickpeace-project .chick-print-row{
    grid-template-columns:minmax(0,1.316fr) minmax(0,1fr) !important;
  }
  .design-project-page .chickpeace-project .chick-pop-row{
    grid-template-columns:minmax(0,2.385fr) minmax(0,1fr) !important;
  }
  .design-project-page .chickpeace-project .chick-print-row > figure,
  .design-project-page .chickpeace-project .chick-pop-row > figure{
    display:block !important;
  }
  .design-project-page .chickpeace-project .chick-print-row > figure > img,
  .design-project-page .chickpeace-project .chick-pop-row > figure > img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }
}
@media (max-width:900px){
  .design-project-page .chickpeace-project .chick-approach-line{
    margin-bottom:12px !important;
  }
  .design-project-page .chickpeace-project .chick-approach-strong{
    margin-bottom:24px !important;
  }
}

/* v52 — hero and submenu vertical-axis alignment, rebuilt cleanly */
.design-project-page .sub-hero{
  height:122px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.design-project-page .sub-hero h1{
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  width:auto !important;
  position:static !important;
  transform:none !important;
  white-space:nowrap !important;
  line-height:1 !important;
  text-align:center !important;
}
.design-project-page .sub-hero h1 strong,
.design-project-page .sub-hero h1 span{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  top:auto !important;
  transform:none !important;
  line-height:1 !important;
  vertical-align:middle !important;
}

.design-project-page .design-faithful-nav{
  width:100% !important;
  min-height:108px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 24px !important;
  display:grid !important;
  grid-template-columns:max-content 1px max-content 1px max-content 1px max-content 1px max-content !important;
  justify-content:center !important;
  align-items:center !important;
  column-gap:30px !important;
  row-gap:0 !important;
  position:static !important;
  left:auto !important;
  transform:none !important;
  text-align:center !important;
}
.design-project-page .design-faithful-nav > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
  justify-self:center !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  top:auto !important;
  transform:none !important;
  line-height:1 !important;
}
.design-project-page .design-faithful-nav > i{
  display:block !important;
  width:1px !important;
  height:18px !important;
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
  justify-self:center !important;
  position:static !important;
  top:auto !important;
  transform:none !important;
  background:#8f97a5 !important;
}

@media (max-width:1120px){
  .design-project-page .design-faithful-nav{
    min-height:112px !important;
    padding:18px 20px 17px !important;
    grid-template-columns:max-content 1px max-content 1px max-content !important;
    grid-template-rows:auto auto !important;
    column-gap:24px !important;
    row-gap:14px !important;
  }
  .design-project-page .design-faithful-nav > a:nth-of-type(1){grid-column:1;grid-row:1}
  .design-project-page .design-faithful-nav > i:nth-of-type(1){grid-column:2;grid-row:1}
  .design-project-page .design-faithful-nav > a:nth-of-type(2){grid-column:3;grid-row:1}
  .design-project-page .design-faithful-nav > i:nth-of-type(2){grid-column:4;grid-row:1}
  .design-project-page .design-faithful-nav > a:nth-of-type(3){grid-column:5;grid-row:1}
  .design-project-page .design-faithful-nav > i:nth-of-type(3){display:none !important}
  .design-project-page .design-faithful-nav > a:nth-of-type(4){grid-column:1 / span 2;grid-row:2;justify-self:end !important}
  .design-project-page .design-faithful-nav > i:nth-of-type(4){grid-column:3;grid-row:2}
  .design-project-page .design-faithful-nav > a:nth-of-type(5){grid-column:4 / span 2;grid-row:2;justify-self:start !important}
}
@media (max-width:600px){
  .design-project-page .sub-hero h1{
    gap:10px !important;
    white-space:normal !important;
    padding:0 20px !important;
  }
  .design-project-page .design-faithful-nav{
    column-gap:18px !important;
  }
}


/* v55 — only tighten the second row of the responsive design submenu */
.design-project-page .design-nav-bottom-row{
  display:contents;
}
.design-project-page .design-nav-bottom-row > a{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  line-height:1;
}
.design-project-page .design-nav-bottom-row > i{
  display:block;
  width:1px;
  height:18px;
  margin:0;
  padding:0;
  align-self:center;
  background:#8f97a5;
}
@media (max-width:1120px){
  .design-project-page .design-faithful-nav{
    grid-template-columns:max-content 1px max-content 1px max-content !important;
  }
  .design-project-page .design-nav-bottom-row{
    grid-column:1 / -1;
    grid-row:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    width:max-content;
    justify-self:center;
  }
  .design-project-page .design-nav-bottom-row > a,
  .design-project-page .design-nav-bottom-row > i{
    position:static !important;
    transform:none !important;
  }
}
@media (max-width:600px){
  .design-project-page .design-nav-bottom-row{
    gap:18px;
  }
}


/* ESTEC company profile — v03, scoped only */
.design-project-page .estec-project .df-title-en{white-space:nowrap}
.design-project-page .estec-project .df-copy strong{font-weight:700;color:inherit}
.design-project-page .estec-intro figure img{width:100%;height:auto;display:block;object-fit:contain}
.design-project-page .estec-story{align-items:start}
.design-project-page .estec-story figure{margin:0}
.design-project-page .estec-story figure img{width:100%;height:auto;display:block;object-fit:contain}
.design-project-page .estec-cover-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.design-project-page .estec-wide-row{grid-template-columns:1fr}
.design-project-page .estec-spread-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.design-project-page .estec-project .df-image-pair + .df-image-pair{margin-top:52px !important}
.design-project-page .estec-book-row figure img{width:100%;height:auto;display:block;object-fit:contain}
.design-project-page .estec-spread-pair figure img{width:100%;height:auto;display:block;object-fit:contain}
@media (max-width:900px){
 .design-project-page .estec-project .df-title-en{white-space:normal}
 .design-project-page .estec-cover-row,
 .design-project-page .estec-spread-pair{grid-template-columns:1fr !important;row-gap:26px !important}
 .design-project-page .estec-project .df-image-pair + .df-image-pair{margin-top:46px !important}
}

/* v04 — ESTEC one-column opened-book render: fill the full content width */
.design-project-page .estec-project > .estec-book-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  width:100% !important;
  max-width:100% !important;
  column-gap:0 !important;
}
.design-project-page .estec-project > .estec-book-row > figure,
.design-project-page .estec-project > .estec-book-row > figure > img{
  width:100% !important;
  max-width:100% !important;
}

/* v05 — ESTEC responsive text: use the full content width */
@media (max-width: 900px){
  .design-project-page .estec-project .df-two,
  .design-project-page .estec-project .df-story,
  .design-project-page .estec-project .df-copy{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .design-project-page .estec-project .df-copy p{
    width:100% !important;
    max-width:none !important;
  }

  .design-project-page .estec-project .df-copy br{
    display:none !important;
  }
}


/* v07 — Playbaduk basic project heading */
.design-project-page .playbaduk-project .playbaduk-head{
  grid-template-columns:minmax(0,1fr) !important;
}
.design-project-page .playbaduk-project .playbaduk-title-line{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.design-project-page .playbaduk-project .playbaduk-title-dash{
  margin:0 .18em;
}
@media (max-width: 700px){
  .design-project-page .playbaduk-project .playbaduk-title-line{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* v08 — Playbaduk full project */
.design-project-page .playbaduk-project .playbaduk-head{
  grid-template-columns:minmax(0,1fr) auto !important;
}
.design-project-page .playbaduk-project .playbaduk-title-line{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.design-project-page .playbaduk-project .playbaduk-title-dash{margin:0 .18em}

.design-project-page .playbaduk-project .playbaduk-intro{
  grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  align-items:start;
}
.design-project-page .playbaduk-project .playbaduk-intro figure,
.design-project-page .playbaduk-project .playbaduk-story figure,
.design-project-page .playbaduk-project .playbaduk-wide figure,
.design-project-page .playbaduk-project .playbaduk-certificate figure{
  margin:0;
}
.design-project-page .playbaduk-project .playbaduk-intro img,
.design-project-page .playbaduk-project .playbaduk-story img,
.design-project-page .playbaduk-project .playbaduk-wide img,
.design-project-page .playbaduk-project .playbaduk-certificate img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.design-project-page .playbaduk-project .playbaduk-wide{
  width:100%;
  margin-top:56px;
}
.design-project-page .playbaduk-project .playbaduk-story{
  margin-top:56px;
  grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  align-items:start;
}
.design-project-page .playbaduk-project .playbaduk-pair{
  column-gap:24px !important;
  align-items:start;
}
.design-project-page .playbaduk-project .playbaduk-certificate{
  width:min(58%,720px);
  margin:58px auto 0;
}
@media (max-width:900px){
  .design-project-page .playbaduk-project .playbaduk-head{
    grid-template-columns:1fr !important;
  }
  .design-project-page .playbaduk-project .playbaduk-title-line{
    flex-wrap:wrap;
    white-space:normal;
  }
  .design-project-page .playbaduk-project .playbaduk-intro,
  .design-project-page .playbaduk-project .playbaduk-story,
  .design-project-page .playbaduk-project .playbaduk-pair{
    grid-template-columns:1fr !important;
    row-gap:30px !important;
  }
  .design-project-page .playbaduk-project .df-copy,
  .design-project-page .playbaduk-project .df-copy p{
    width:100% !important;
    max-width:none !important;
  }
  .design-project-page .playbaduk-project .playbaduk-wide,
  .design-project-page .playbaduk-project .playbaduk-story{
    margin-top:44px;
  }
  .design-project-page .playbaduk-project .playbaduk-certificate{
    width:100%;
    max-width:none;
    margin-top:46px;
  }
}


/* v10 — Playbaduk quiz/dialogue row: keep image sizes, align to bottom */
.design-project-page .playbaduk-project .playbaduk-pair:first-of-type{
  align-items:end !important;
}
.design-project-page .playbaduk-project .playbaduk-pair:first-of-type > figure{
  align-self:end !important;
}


/* v11 — Playbaduk detail images: match right-column width and bottom-align */
.design-project-page .playbaduk-project .playbaduk-detail-row{
  grid-template-columns:minmax(0,52fr) minmax(0,48fr) !important;
  align-items:end !important;
}
.design-project-page .playbaduk-project .playbaduk-detail-row > figure{
  align-self:end !important;
}
.design-project-page .playbaduk-project .playbaduk-detail-row img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

@media (max-width:900px){
  .design-project-page .playbaduk-project .playbaduk-detail-row{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  .design-project-page .playbaduk-project .playbaduk-detail-row > figure{
    align-self:auto !important;
  }
}


/* v12 — Playbaduk upper right image: match the lower right image width */
.design-project-page .playbaduk-project .playbaduk-story > figure{
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
}
.design-project-page .playbaduk-project .playbaduk-story > figure > img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}


/* v13 — Playbaduk upper image width: use the same column gap as the lower image row */
.design-project-page .playbaduk-project .playbaduk-story{
  grid-template-columns:minmax(0,52fr) minmax(0,48fr) !important;
  column-gap:24px !important;
}


/* v15 — Playbaduk missing extension/brand images */
.design-project-page .playbaduk-project .playbaduk-extension-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.9fr) !important;
  gap:28px !important;
  align-items:stretch !important;
  width:100% !important;
  margin-top:60px !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-left,
.design-project-page .playbaduk-project .playbaduk-extension-right{
  min-width:0 !important;
  height:100% !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-left{
  display:flex !important;
  flex-direction:column !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-left > img{
  flex:1 1 auto !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center top !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-right{
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:22px !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-right figure{
  margin:0 !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-right img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

.design-project-page .playbaduk-project .playbaduk-brand-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.29fr) minmax(0,1fr) !important;
  gap:34px !important;
  align-items:stretch !important;
  width:100% !important;
  margin-top:64px !important;
}
.design-project-page .playbaduk-project .playbaduk-brand-grid figure{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  margin:0 !important;
}
.design-project-page .playbaduk-project .playbaduk-brand-grid img{
  flex:1 1 auto !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center top !important;
}

@media (max-width:900px){
  .design-project-page .playbaduk-project .playbaduk-extension-grid,
  .design-project-page .playbaduk-project .playbaduk-brand-grid{
    grid-template-columns:1fr !important;
    gap:38px !important;
    margin-top:48px !important;
  }
  .design-project-page .playbaduk-project .playbaduk-extension-left > img,
  .design-project-page .playbaduk-project .playbaduk-brand-grid img{
    height:auto !important;
  }
}


/* v16 — Playbaduk corrections
   1) story text/image stack in responsive layout
   2) duplicate wrong promo row removed; original X-banner image remains in extension grid */
@media (max-width:1120px){
  .design-project-page .playbaduk-project .playbaduk-story{
    grid-template-columns:1fr !important;
    column-gap:0 !important;
    row-gap:34px !important;
    align-items:start !important;
  }
  .design-project-page .playbaduk-project .playbaduk-story > .df-copy,
  .design-project-page .playbaduk-project .playbaduk-story > figure{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .design-project-page .playbaduk-project .playbaduk-story > figure{
    justify-self:stretch !important;
  }
}


/* v19 — Playbaduk promo layout matched to approved reference */
.design-project-page .playbaduk-project .playbaduk-promo-showcase{
  display:grid !important;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) !important;
  gap:28px !important;
  align-items:stretch !important;
  width:100% !important;
  margin-top:60px !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-showcase figure{
  margin:0 !important;
  min-width:0 !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-showcase img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
.design-project-page .playbaduk-project .playbaduk-growth-card{
  display:flex !important;
  flex-direction:column !important;
}
.design-project-page .playbaduk-project .playbaduk-growth-card img{
  flex:1 1 auto !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center top !important;
}

/* lower block: X-banner at left, vehicle banner + consulting sheets at right */
.design-project-page .playbaduk-project .playbaduk-extension-grid{
  display:grid !important;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr) !important;
  gap:32px !important;
  align-items:stretch !important;
  width:100% !important;
  margin-top:64px !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-left{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  margin:0 !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-left img{
  flex:1 1 auto !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center top !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-right{
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:24px !important;
  min-width:0 !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-right figure{
  margin:0 !important;
}
.design-project-page .playbaduk-project .playbaduk-extension-right img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

@media (max-width:900px){
  .design-project-page .playbaduk-project .playbaduk-promo-showcase,
  .design-project-page .playbaduk-project .playbaduk-extension-grid{
    grid-template-columns:1fr !important;
    gap:38px !important;
    margin-top:48px !important;
  }
  .design-project-page .playbaduk-project .playbaduk-growth-card img,
  .design-project-page .playbaduk-project .playbaduk-extension-left img{
    height:auto !important;
  }
}


/* v20 — Playbaduk promo showcase final alignment */
.design-project-page .playbaduk-project .playbaduk-promo-showcase{
  align-items:stretch !important;
}

.design-project-page .playbaduk-project .playbaduk-promo-square,
.design-project-page .playbaduk-project .playbaduk-promo-square > img{
  width:100% !important;
  max-width:100% !important;
}

.design-project-page .playbaduk-project .playbaduk-growth-card{
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:100% !important;
}

.design-project-page .playbaduk-project .playbaduk-growth-card > img{
  flex:1 1 auto !important;
  width:100% !important;
  max-width:100% !important;
  height:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

.design-project-page .playbaduk-project .playbaduk-growth-card > figcaption{
  flex:0 0 auto !important;
}

@media (max-width:900px){
  .design-project-page .playbaduk-project .playbaduk-growth-card > img{
    height:auto !important;
  }
}


/* v21 — Playbaduk promo showcase final structure */
.design-project-page .playbaduk-project .playbaduk-promo-showcase{
  display:block !important;
  width:100% !important;
  margin-top:60px !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-square{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-square > img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-bottom{
  display:grid !important;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) !important;
  gap:28px !important;
  align-items:stretch !important;
  width:100% !important;
  margin-top:28px !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-bottom figure{
  min-width:0 !important;
  margin:0 !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-bottom img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-bottom .playbaduk-growth-card{
  display:flex !important;
  flex-direction:column !important;
}
.design-project-page .playbaduk-project .playbaduk-promo-bottom .playbaduk-growth-card > img{
  flex:1 1 auto !important;
  height:100% !important;
  object-position:center bottom !important;
}

@media (max-width:900px){
  .design-project-page .playbaduk-project .playbaduk-promo-bottom{
    grid-template-columns:1fr !important;
    gap:38px !important;
  }
  .design-project-page .playbaduk-project .playbaduk-promo-bottom .playbaduk-growth-card > img{
    height:auto !important;
  }
}


/* v22 — OVE basic project page */
.design-project-page .ove-project .ove-head{
  grid-template-columns:minmax(0,1fr) auto !important;
}
.design-project-page .ove-project .ove-title-line{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  white-space:nowrap;
}
@media (max-width:900px){
  .design-project-page .ove-project .ove-head{
    grid-template-columns:1fr !important;
  }
  .design-project-page .ove-project .ove-title-line{
    white-space:normal;
  }
}


/* v27 — OVE opening rebuilt on Playbaduk's existing two-column system */
.design-project-page .ove-project .ove-title-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.design-project-page .ove-project .ove-title-stack .df-title-ko,
.design-project-page .ove-project .ove-title-stack .df-title-en{
  display:block;
  margin-left:0 !important;
}
.design-project-page .ove-project .ove-intro-right{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.design-project-page .ove-project .ove-map{
  margin:120px 0 0;
}
.design-project-page .ove-project .ove-cover,
.design-project-page .ove-project .ove-map,
.design-project-page .ove-project .ove-section-images figure{
  margin-left:0;
  margin-right:0;
  min-width:0;
}
.design-project-page .ove-project .ove-cover img,
.design-project-page .ove-project .ove-map img,
.design-project-page .ove-project .ove-section-images img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
.design-project-page .ove-project .ove-section-images{
  display:flex;
  flex-direction:column;
  gap:26px;
  min-width:0;
}
@media (max-width:900px){
  .design-project-page .ove-project .ove-map{
    margin-top:28px;
  }
  .design-project-page .ove-project .ove-section-images{
    gap:24px;
  }
}


/* v28 — OVE continuation */
.design-project-page .ove-project .ove-wide{
  width:100%;
  max-width:100%;
  margin-top:62px;
}
.design-project-page .ove-project .ove-wide figure,
.design-project-page .ove-project .ove-pair figure{
  margin-left:0;
  margin-right:0;
  min-width:0;
}
.design-project-page .ove-project .ove-wide img,
.design-project-page .ove-project .ove-pair img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
.design-project-page .ove-project .ove-cover-character-pair{
  align-items:start;
}
@media (max-width:900px){
  .design-project-page .ove-project .ove-wide{
    margin-top:48px;
  }
}




/* v34 — Alice section rebuilt from the approved reference */
.design-project-page .ove-project .ove-alice-top{
  display:grid !important;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr) !important;
  align-items:start !important;
}
.design-project-page .ove-project .ove-alice-left-stack{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:30px !important;
  min-width:0 !important;
}
.design-project-page .ove-project .ove-alice-left-stack figure,
.design-project-page .ove-project .ove-alice-cover-large,
.design-project-page .ove-project .ove-alice-bottom figure{
  margin:0 !important;
  min-width:0 !important;
}
.design-project-page .ove-project .ove-alice-left-stack img,
.design-project-page .ove-project .ove-alice-cover-large img,
.design-project-page .ove-project .ove-alice-bottom img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

.design-project-page .ove-project .ove-alice-bottom{
  display:grid !important;
  grid-template-columns:minmax(0,33.333fr) minmax(0,66.667fr) !important;
  align-items:start !important;
}

/* 오브의 2단 이미지는 태블릿 이하에서 반드시 한 줄씩 내려감 */
@media (max-width:1120px){
  .design-project-page .ove-project .df-image-pair,
  .design-project-page .ove-project .ove-alice-top,
  .design-project-page .ove-project .ove-alice-bottom{
    display:grid !important;
    grid-template-columns:1fr !important;
    column-gap:0 !important;
    row-gap:34px !important;
  }
  .design-project-page .ove-project .ove-alice-left-stack{
    gap:34px !important;
  }
}


/* v35 — OVE final goods section */
.design-project-page .ove-project .ove-goods-bookmarks figure,
.design-project-page .ove-project .ove-goods-bottom figure{
  margin-left:0;
  margin-right:0;
  min-width:0;
}
.design-project-page .ove-project .ove-goods-bookmarks img,
.design-project-page .ove-project .ove-goods-bottom img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.design-project-page .ove-project .ove-goods-bottom{
  grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  align-items:start;
}
@media (max-width:1120px){
  .design-project-page .ove-project .ove-goods-bottom{
    grid-template-columns:1fr !important;
    column-gap:0 !important;
    row-gap:34px !important;
  }
}


/* 실제 원본 비율 기준으로 두 이미지 높이 정렬 */
.design-project-page .ove-project .ove-goods-bottom{
  grid-template-columns:minmax(0,39.2fr) minmax(0,60.8fr) !important;
  align-items:start !important;
}
.design-project-page .ove-project .ove-goods-bottom img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
@media (max-width:1120px){
  .design-project-page .ove-project .ove-goods-bottom{
    grid-template-columns:1fr !important;
  }
}


/* OVE keeps its approved right-aligned caption exceptions. */
.design-project-page .ove-project figcaption.is-right{
  justify-content:flex-end !important;
  text-align:right !important;
}

/* 2026-07-18 — Next Story / People */
/* Next Story uses only the site's two approved families: Pretendard and Gowun Batang. */
.nextstory-page,
.nextstory-page button,
.nextstory-page input,
.nextstory-page textarea,
.nextstory-page select{font-family:Pretendard,Arial,sans-serif}
.nextstory-page .sub-brand,
.nextstory-page .sub-hero h1,
.nextstory-page .nextstory-section-head h2,
.nextstory-page .nextstory-negative h2,
.nextstory-page .nextstory-closing{font-family:"Gowun Batang",serif}

.nextstory-page .sub-bookmarks a.is-pale.is-active{
  background:linear-gradient(180deg,#ffffff 0%,#f5f6f8 58%,#eaedf1 100%);
  color:#50596b;
}
.nextstory-content{padding-bottom:110px}
.nextstory-local-nav{gap:30px}
.nextstory-people{padding-top:48px;color:#4f5a70}
.nextstory-section-head{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:22px;
  align-items:start;
  margin-bottom:18px;
}
.nextstory-section-head h2,
.nextstory-negative h2{
  margin:0;
  font-family:"Gowun Batang",serif;
  color:#465268;
  font-size:23px;
  line-height:1.55;
  font-weight:700;
  letter-spacing:-.04em;
  word-break:keep-all;
}
.nextstory-section-head h2{grid-column:1 / span 2;padding-top:5px}
.nextstory-page .nextstory-tag{
  grid-column:3 / span 2;
  justify-self:stretch;
  width:auto;
  min-width:0;
  box-sizing:border-box;
  padding:13px 16px;
  border:1.5px solid #687286;
  border-radius:0 22px 22px 22px;
  color:#4e596d;
  font-size:16px;
  font-weight:500;
  line-height:1.65;
  text-align:center;
}
.nextstory-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.nextstory-card{
  min-height:248px;
  padding:46px 18px 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  background:transparent;
  border:0;
  --card-fill:#fff;
  filter:drop-shadow(0 1px 3px rgba(36,45,61,.08));
  transition:transform .24s ease,filter .24s ease;
}
.nextstory-card::before,
.nextstory-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.nextstory-card::before{
  inset:0;
  z-index:0;
  background:#aeb4bf;
}
.nextstory-card::after{
  inset:1px;
  z-index:1;
  background:var(--card-fill);
}
.nextstory-card-grid--positive .nextstory-card:hover{
  --card-fill:#fff;
  transform:translateY(-4px);
  filter:drop-shadow(0 5px 4px rgba(36,45,61,.20));
}
.nextstory-card-grid--negative .nextstory-card{
  transition:none;
}
.nextstory-card-grid--negative .nextstory-card:hover{
  transform:none;
  filter:drop-shadow(0 1px 3px rgba(36,45,61,.08));
}

.nextstory-card-face{
  position:absolute;
  inset:1px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:38px 18px 30px;
  box-sizing:border-box;
  opacity:1;
  transition:opacity .22s ease;
}
.nextstory-card-face--front{
  transition-delay:.24s;
}
.nextstory-card-face--hover{
  opacity:0;
  pointer-events:none;
  transition-delay:0s;
  overflow:hidden;
}
.nextstory-card-face--hover::before{
  content:"";
  position:absolute;
  inset:12px;
  z-index:-1;
  background:#fff7f4;
}
.nextstory-card-grid--positive .nextstory-card:hover .nextstory-card-face--front{
  opacity:0;
  transition-delay:0s;
}
.nextstory-card-grid--positive .nextstory-card:hover .nextstory-card-face--hover{
  opacity:1;
  pointer-events:auto;
  transition-delay:.24s;
}
.nextstory-card-grid--positive .nextstory-card-face--hover p{
  color:#364055;
  font-family:"Gowun Batang",serif !important;
  font-size:19px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:-.035em;
}
.nextstory-card-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:22px;
  color:#ff715f;
  font-family:Pretendard,Arial,sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
}
.nextstory-card-arrow{
  display:inline-block;
  margin-left:1px;
  font-family:Pretendard,Arial,sans-serif;
  font-size:18px;
  line-height:1;
  transform:translateX(0);
  animation:storyMoreArrow .65s ease-in-out .2s infinite;
}
@media (prefers-reduced-motion:reduce){
  .nextstory-card-arrow{animation:none}
}
.nextstory-card > img,
.nextstory-card-face--front > img{
  position:relative;
  z-index:2;
  display:block;
  width:68px;
  height:68px;
  object-fit:contain;
  margin:0 0 18px;
}
.nextstory-card > p,
.nextstory-card-face p{
  position:relative;
  z-index:2;
  margin:0;
  color:#3d475c;
  font-family:Pretendard,Arial,sans-serif;
  font-size:20px;
  font-weight:600;
  line-height:1.75;
  letter-spacing:-.04em;
  text-align:center;
  word-break:keep-all;
}
.nextstory-negative{margin-top:72px}
.nextstory-negative h2{margin-bottom:20px}
.nextstory-card-grid--negative .nextstory-card{--card-fill:#eef0f3}
.nextstory-closing{
  margin:28px 0 0;
  font-family:"Gowun Batang",serif;
  color:#465268;
  font-size:22px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.04em;
}
@media (min-width:901px) and (max-width:1120px){
  .nextstory-section-head,.nextstory-card-grid{column-gap:16px}
  .nextstory-page .nextstory-tag{font-size:14px;padding:12px 12px}
  .nextstory-card{min-height:220px;padding:36px 12px 30px}
  .nextstory-card > img,.nextstory-card-face--front > img{width:58px;height:58px}
  .nextstory-card > p,.nextstory-card-face p{font-size:17px}
}
@media (min-width:769px) and (max-width:900px){
  .nextstory-section-head{grid-template-columns:1fr 1fr;row-gap:20px}
  .nextstory-section-head h2{grid-column:1}
  .nextstory-page .nextstory-tag{grid-column:2;font-size:13px}
  .nextstory-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .nextstory-card{min-height:210px}
  .nextstory-negative{margin-top:58px}
}
@media (max-width:768px){
  .nextstory-local-nav{height:auto;min-height:94px;gap:14px;font-size:18px;flex-wrap:wrap;padding:18px 0}
  .nextstory-local-nav a{padding:8px 0}
  .nextstory-people{padding-top:34px}
  .nextstory-section-head{display:block;margin-bottom:22px}
  .nextstory-section-head h2,.nextstory-negative h2{font-size:20px}
  .nextstory-page .nextstory-tag{margin-top:20px;width:100%;font-size:13px;padding:12px}
  .nextstory-card-grid{grid-template-columns:1fr;gap:18px}
  .nextstory-card{min-height:190px;padding:30px 18px}
  .nextstory-card > img,.nextstory-card-face--front > img{width:56px;height:56px;margin-bottom:14px}
  .nextstory-card > p,.nextstory-card-face p{font-size:18px}
  .nextstory-negative{margin-top:50px}
  .nextstory-closing{font-size:19px;margin-top:24px}
}


/* 2026-07-18 — Next Story / Method: approved first-step prototype */
.nextstory-method-page .nextstory-content{padding-bottom:120px}
.nextstory-method{
  width:min(760px,100%);
  margin:54px auto 0;
}
.method-step{
  position:relative;
  padding-bottom:44px;
}
.method-step-shell{
  position:relative;
  min-height:148px;
  box-sizing:border-box;
  overflow:hidden;
  background:#fff;
  border:1.5px solid #aeb4bf;
  border-radius:0 34px 34px 34px;
  filter:drop-shadow(0 1px 3px rgba(36,45,61,.08));
  transition:transform .24s ease,filter .24s ease,background-color .24s ease;
}
.method-step-number{
  position:absolute;
  left:0;
  top:17px;
  z-index:3;
  color:#d9dce2;
  font-family:Pretendard,Arial,sans-serif;
  font-size:38px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  transition:color .24s ease;
}
.method-step:hover .method-step-number{
  color:#d7c9cb;
}
.method-step-face{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:28px 72px 26px 96px;
  text-align:center;
  opacity:1;
  transition:opacity .22s ease;
}
.method-step-face--front{transition-delay:.24s}
.method-step-face--hover{
  opacity:0;
  pointer-events:none;
  transition-delay:0s;
}
.method-step-face h2{
  margin:0 0 12px;
  color:#364055;
  font-family:"Gowun Batang",serif;
  font-size:25px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.04em;
}
.method-step-face p{
  margin:0;
  color:#4a556a;
  font-family:"Gowun Batang",serif;
  font-size:17px;
  font-weight:400;
  line-height:1.8;
  letter-spacing:-.025em;
  word-break:keep-all;
}
.method-step-click{
  position:absolute;
  left:50%;
  bottom:6px;
  z-index:4;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  transition:opacity .22s ease .24s,transform .22s ease .24s;
}
.method-step-click img{
  display:block;
  width:70px;
  height:auto;
}
.method-step:hover .method-step-shell{
  background:#fff8f5;
  transform:translateY(-3px);
  filter:drop-shadow(0 5px 4px rgba(36,45,61,.16));
}
.method-step:hover .method-step-face--front{
  opacity:0;
  transition-delay:0s;
}
.method-step:hover .method-step-face--hover{
  opacity:1;
  pointer-events:auto;
  transition-delay:.24s;
}
.method-step:hover .method-step-click{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-1px);
}
@media (max-width:900px){
  .nextstory-method{width:min(680px,100%);margin-top:42px}
  .method-step-shell{min-height:142px;border-radius:0 28px 28px 28px}
  .method-step-number{font-size:34px;top:16px}
  .method-step-face{padding:26px 48px 24px 82px}
  .method-step-face h2{font-size:23px}
  .method-step-face p{font-size:16px}
}
@media (max-width:768px){
  .nextstory-method{margin-top:34px}
  .method-step{padding-bottom:38px}
  .method-step-shell{min-height:156px;border-radius:0 24px 24px 24px}
  .method-step-number{font-size:29px;top:14px}
  .method-step-face{padding:38px 24px 28px 54px}
  .method-step-face h2{font-size:21px;margin-bottom:10px}
  .method-step-face p{font-size:15px;line-height:1.7}
  .method-step-click img{width:64px}
}


/* 2026-07-18 — Next Story / Method: sequential reveal */
.method-step{
  max-height:240px;
  opacity:1;
  transform:translateY(0);
  overflow:visible;
  transition:max-height .42s ease,opacity .34s ease,transform .42s ease,padding-bottom .42s ease;
}
.method-step.is-hidden{
  max-height:0;
  opacity:0;
  transform:translateY(-10px);
  padding-bottom:0;
  overflow:hidden;
  pointer-events:none;
}
.method-step.is-visible{
  max-height:240px;
  opacity:1;
  transform:translateY(0);
  padding-bottom:44px;
  overflow:visible;
  pointer-events:auto;
}
.method-step.is-complete .method-step-click{
  width:30px;
  height:30px;
  overflow:hidden;
  opacity:1 !important;
  pointer-events:none !important;
  transform:translateX(-50%);
}
.method-step.is-complete .method-step-click img{
  width:64px;
  max-width:none;
  transform:translateX(-34px);
}
.method-final-note{
  margin:8px 0 0;
  color:#364055;
  font-family:"Gowun Batang",serif;
  font-size:21px;
  font-weight:700;
  line-height:1.6;
  text-align:center;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .34s ease,transform .34s ease;
}
.method-final-note.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (max-width:900px){
  .method-step.is-visible{padding-bottom:44px}
  .method-final-note{font-size:19px}
}
@media (max-width:768px){
  .method-step.is-visible{padding-bottom:38px}
  .method-final-note{font-size:17px}
}


/* 2026-07-18 — Next Story / Contact */
.nextstory-page #contact{
  align-items:start;
}
.nextstory-page #contact .profile-copy{
  padding-top:22px;
}
.nextstory-page #contact .profile-copy h2{
  margin-bottom:34px;
}
.nextstory-page #contact .profile-copy p{
  margin-bottom:10px;
}
.nextstory-page #contact .profile-copy p:last-child{
  margin-top:38px;
}
.contact-card{
  min-height:0;
}
.contact-card ul{
  line-height:2.35;
}
.contact-card > ul > li{
  padding-left:15px;
  margin-bottom:0;
}
.contact-card > ul > li::before{
  top:18px;
}
.contact-note{
  margin:8px 0 0;
  color:#555f73;
  font-family:"Gowun Batang",serif;
  font-size:16px;
  line-height:1.7;
  letter-spacing:-.025em;
  word-break:keep-all;
}
@media (max-width:768px){
  .nextstory-page #contact .profile-copy{
    padding-top:0;
  }
  .contact-note{
    font-size:14px;
  }
}


/* 2026-07-18 — Next Story / Contact final spacing */
.nextstory-page #contact{
  min-height:auto;
  align-items:stretch;
}
.nextstory-page #contact .profile-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:0;
  padding-bottom:0;
}
.nextstory-page #contact .career-card{
  min-height:320px;
}
.nextstory-page:has(#contact) .nextstory-content{
  padding-bottom:72px;
}
@media (max-width:768px){
  .nextstory-page #contact .profile-copy{
    display:block;
  }
  .nextstory-page:has(#contact) .nextstory-content{
    padding-bottom:56px;
  }
}


/* 2026-07-18 — Next Story / Contact final alignment */
.nextstory-page:has(#contact) .nextstory-content{
  padding-bottom:32px;
}
.nextstory-page #contact{
  min-height:auto;
  align-items:center;
}
.nextstory-page #contact .profile-copy{
  display:block;
  padding:0;
  text-align:center;
}
.nextstory-page #contact .profile-copy h2,
.nextstory-page #contact .profile-copy p{
  text-align:center;
}
.nextstory-page #contact .profile-copy h2{
  margin-bottom:30px;
}
.nextstory-page #contact .profile-copy p{
  margin-bottom:10px;
}
.nextstory-page #contact .profile-copy p:last-child{
  margin-top:34px;
}
.nextstory-page #contact .career-card{
  min-height:0;
}
@media (max-width:768px){
  .nextstory-page:has(#contact) .nextstory-content{
    padding-bottom:36px;
  }
}


/* 2026-07-18 — Common sub-page vertical alignment
   Design project pages already use their approved alignment rules. */
.sub-page:not(.design-project-page) .sub-hero h1{
  align-items:center;
}
.sub-page:not(.design-project-page) .sub-hero h1 strong,
.sub-page:not(.design-project-page) .sub-hero h1 span{
  display:block;
  line-height:1;
}
.sub-page:not(.design-project-page) .sub-local-nav > a{
  display:flex;
  align-items:center;
  height:108px;
  padding:0;
  line-height:1;
}
.sub-page:not(.design-project-page) .sub-local-nav > i{
  align-self:center;
  margin:0;
}

/* ---------- Story index ---------- */
.story-page,
.story-page button,
.story-page input,
.story-page textarea,
.story-page select{font-family:Pretendard,Arial,sans-serif}
.story-page .sub-brand,
.story-page .sub-hero h1{font-family:"Gowun Batang",serif}
.story-content{padding-bottom:110px}
.story-local-nav{gap:30px}

/* 카드의 구조·경계선·롤오버는 메인 .stories / .card 규칙을 그대로 사용한다. */
.story-list{margin-top:48px}

@media (max-width:1120px){
  .story-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
  .story-local-nav{height:auto;min-height:108px;flex-wrap:wrap;gap:0 18px;padding:20px 0}
  .story-local-nav a{padding:12px 0;font-size:22px}
  .story-local-nav i{height:16px}
  .story-list{grid-template-columns:1fr;margin-top:36px}
}

/* Story index: match the main page's effective card hover after reveal. */
.story-page .story-list .card:hover,
.story-page .story-list .card:focus-within{
  transform:none;
  box-shadow:none;
}

/* Story detail templates */
.story-detail-content{padding-bottom:100px}.story-article{padding-top:46px;color:#626b7d}.story-article-head{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:42px}.story-category{margin:0 0 8px;color:#43506a;font-size:17px;font-weight:700}.story-article-head h2{margin:0;font-family:"Gowun Batang",serif;font-size:30px;line-height:1.4;letter-spacing:-.045em;color:#30394c}.story-article-head time{padding-top:5px;font-size:14px;color:#9299a7}.story-text-column{width:54%;max-width:720px;margin:0 auto;font-family:"Gowun Batang",serif}.story-text-column h3,.story-split-copy h3{margin:0 0 14px;color:#4a556a;font-family:inherit;font-size:19px}.story-text-column h3:not(:first-child),.story-split-copy h3:not(:first-child){margin-top:38px}.story-text-column h3::before,.story-split-copy h3::before{content:"●";margin-right:8px;color:#949ca9;font-size:.58em;vertical-align:3px}.story-text-column p,.story-split-copy p{margin:0 0 16px;font-family:"Gowun Batang",serif;font-size:19px;line-height:1.9;letter-spacing:-.035em;word-break:keep-all}.story-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px;align-items:start}.story-split figure{margin:0}.story-split img{display:block;width:100%;height:auto}.story-split figcaption{margin-top:10px;font-size:14px;line-height:1.7;color:#9299a7}.story-post-nav{display:grid;grid-template-columns:1fr 110px 1fr;align-items:stretch;margin-top:72px;border-top:1px solid #c9ced6;border-bottom:1px solid #c9ced6;min-height:88px}.story-post-nav>a{display:flex;flex-direction:column;justify-content:center;padding:15px 20px;color:#626b7d;text-decoration:none;font-size:15px;line-height:1.55}.story-post-nav small{display:block;margin-bottom:3px;font-size:12px;color:#9aa1ad}.story-post-nav .next{text-align:right}.story-post-list{align-items:center;text-align:center;border-left:1px solid #d7dbe1;border-right:1px solid #d7dbe1;font-weight:700}.story-post-nav a:hover{color:#30394c}.story-post-nav a[href="#"]{pointer-events:none;color:#b8bdc5}.story-post-nav a[href="#"] small{color:#c1c5cb}@media(max-width:900px){.story-text-column{width:72%}.story-split{grid-template-columns:1fr;gap:34px}.story-post-nav{grid-template-columns:1fr 86px 1fr}.story-post-nav>a{padding:13px 12px}}@media(max-width:768px){.story-article{padding-top:34px}.story-article-head{display:block;margin-bottom:30px}.story-article-head h2{font-size:25px}.story-article-head time{display:block;margin-top:10px}.story-category{font-size:15px}.story-text-column{width:100%}.story-text-column p,.story-split-copy p{font-size:16px}.story-text-column h3,.story-split-copy h3{font-size:15px}.story-post-nav{grid-template-columns:1fr 68px 1fr;min-height:76px;margin-top:52px}.story-post-nav span{display:none}}

/* Story detail final typography alignment */
.story-detail-page .story-category{
  margin:0 0 8px;
  color:#43506a;
  font-family:Pretendard,Arial,sans-serif;
  font-size:22px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.02em;
}
.story-detail-page .story-text-column h3,
.story-detail-page .story-split-copy h3{
  font-family:Pretendard,Arial,sans-serif;
  font-weight:600;
}
.story-detail-page .story-article--text .story-text-column{
  margin-left:0;
  margin-right:auto;
  text-align:left;
}
@media(max-width:1120px){
  .story-detail-page .story-category{font-size:18px}
}
@media(max-width:768px){
  .story-detail-page .story-category{font-size:15px}
}

/* 2026-07-21 — mobile sub-page shell unified with the completed mobile home */
.sub-mobile-storybook{display:none}

@media (max-width:767px){
  /* Mobile uses the same simple white page shell as the completed home. */
  .sub-page{background:#fff}
  .sub-page .page-frame{
    min-height:0;
    --page-height:auto;
    overflow:clip;
  }
  .sub-page .stage,
  .sub-page .main-panel,
  .sub-page .sub-panel{
    width:100%;
    min-height:0;
    margin:0;
    transform:none;
  }
  .sub-page .book-spine,
  .sub-page .book-spine--top,
  .sub-page .left-connector,
  .sub-page .left-connector--top,
  .sub-page .book-spine-footer,
  .sub-page .left-connector-footer,
  .sub-page .ribbon-wrap:not(.sub-mobile-storybook){display:none!important}
  .sub-panel::after{display:none}

  /* Same Storybook strip as the mobile home. */
  .sub-mobile-storybook.mobile-storybook.ribbon-wrap{
    position:relative;
    left:auto;
    top:auto;
    display:flex!important;
    width:100%;
    height:52px;
    padding:0 20px;
    align-items:center;
    justify-content:flex-start;
    box-sizing:border-box;
    overflow:hidden;
    background:#242526;
    color:#fff;
    text-decoration:none;
    text-align:left;
    white-space:nowrap;
    z-index:30;
  }
  .sub-mobile-storybook strong{font:700 16px/1.2 'Gowun Batang',serif}
  .sub-mobile-storybook b{margin-left:0;font:500 14px/1.2 Pretendard,Arial,sans-serif}

  /* Existing brand becomes the same 83px / 28px mobile logo. */
  .sub-global-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    height:auto;
    padding:0;
    background:#fff;
    overflow:visible;
  }
  .sub-brand{
    order:1;
    flex:none;
    width:100%;
    height:83px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#e33b31;
    font-size:28px;
    font-weight:700;
    line-height:1;
    transform:none!important;
    text-shadow:none!important;
  }

  /* Keep the approved desktop bookmark form, simply fitted into one mobile row. */
  .sub-bookmarks{
    order:2;
    width:100%;
    height:46px;
    margin:0;
    gap:2px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:end;
    overflow:visible;
  }
  .sub-bookmarks a,
  .sub-bookmarks a.is-pale,
  .sub-bookmarks a.is-active{
    width:100%;
    height:46px!important;
    min-width:0;
    padding:0 4px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#e73b31;
    background-image:none;
    color:#fff;
    font-size:16px;
    font-weight:500;
    letter-spacing:-.04em;
    clip-path:polygon(0 0,86% 0,100% 34%,100% 100%,0 100%);
    filter:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(120,14,10,.10);
    transform:none!important;
    transition:none;
    overflow:hidden;
  }
  .sub-bookmarks a.is-active{background-color:#df392f;font-weight:600}
  .sub-bookmarks a:hover,
  .sub-bookmarks a:focus-visible{height:46px!important;filter:none;transform:none!important}
  .sub-bookmarks a span,
  .sub-bookmarks a:hover span,
  .sub-bookmarks a:focus-visible span{transform:none!important;transition:none}

  /* Supplied image: full-width, top-centered, without forced distortion. */
  .sub-hero{
    width:100%;
    height:178px;
    padding:0 20px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#8797aa url('assets/sub-hero-mobile.png') center center/cover no-repeat;
    color:#fff;
  }
  .sub-hero h1{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin:0;
    text-align:center;
    animation:none;
  }
  .sub-hero h1 strong{font-size:38px;line-height:1.15}
  .sub-hero h1 span{margin:0;font-size:24px;line-height:1.4}

  .sub-content{
    min-height:0;
    padding:0 28px 72px;
    background:#fff;
  }
  .sub-local-nav{
    width:100%;
    height:102px;
    gap:18px;
    padding:0;
    font-size:22px;
    box-sizing:border-box;
  }
  .sub-local-nav a{padding:34px 0 28px}

  /* Same one-column footer order and sizing as mobile home. */
  .sub-page footer{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:42px 28px 40px;
    box-sizing:border-box;
  }
  .sub-page .footer-copy,
  .sub-page .footer-info{width:100%;padding:0;grid-column:auto}
  .sub-page .footer-copy>p:first-child{font-size:14px}
  .sub-page .footer-info{margin-top:42px;font-size:13px}
  .sub-page .copyright{
    position:static;
    width:100%;
    margin:26px 0 0;
    font-size:11px;
    text-align:left;
    white-space:normal;
  }
}

@media (max-width:390px){
  .sub-bookmarks a,
  .sub-bookmarks a.is-pale,
  .sub-bookmarks a.is-active{font-size:15px;padding:0 2px}
  .sub-hero h1 strong{font-size:36px}
  .sub-hero h1 span{font-size:22px}
  .sub-local-nav{font-size:20px;gap:14px}
}


/* 2026-07-21 — mobile sub typography/layout refinement v12 */
@media (max-width:767px){
  /* Keep the pale desktop bookmark; restore its original dark lettering. */
  .sub-bookmarks a.is-pale{
    background-color:#fff;
    color:#4f586b;
    box-shadow:inset 0 0 0 1px #8f97a7;
  }
  .sub-bookmarks a.is-pale:hover,
  .sub-bookmarks a.is-pale:focus-visible{
    background-color:#fff;
    color:#4f586b;
  }

  /* Two-line sub hero: section title / sentence, with calmer scale and breathing room. */
  .sub-hero h1{gap:12px}
  .sub-hero h1 strong{font-size:36px;line-height:1.12}
  .sub-hero h1 span{font-size:22px;line-height:1.3}

  /* Local navigation: slightly smaller, with more vertical breathing room. */
  .sub-local-nav{
    min-height:112px;
    height:auto;
    padding:18px 0 12px;
    gap:14px;
    align-items:center;
    align-content:center;
    font-size:20px;
    line-height:1.2;
  }
  .sub-local-nav a{
    padding:18px 0 14px;
    line-height:1.2;
  }
  .sub-local-nav i{height:15px}

  /* Every desktop split becomes one vertical mobile flow. */
  .profile-layout,
  .philosophy-layout,
  .df-head,
  .df-two,
  .df-story,
  .df-image-pair,
  .story-split,
  .nextstory-card-grid,
  .nextstory-card-grid--positive,
  .nextstory-card-grid--negative,
  .playbaduk-brand-grid,
  .playbaduk-extension-grid,
  .playbaduk-detail-row,
  .chick-brand-row,
  .chick-holder-row,
  .chick-pop-row,
  .chick-print-row,
  .chick-promo-row,
  .chick-touchpoint-row,
  .estec-book-row,
  .estec-cover-row,
  .estec-wide-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  .profile-copy,
  .career-card,
  .philosophy-copy,
  .philosophy-visual,
  .df-head>div,
  .df-role,
  .df-two>* ,
  .df-story>* ,
  .story-split>*{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }

  /* Mobile content type system. */
  .design-project-page .df-role,
  .design-project-page .df-role b{font-size:14px;line-height:1.65}
  .design-project-page .df-kicker{
    font-family:Pretendard,Arial,sans-serif;
    font-size:22px;
    line-height:1.35;
  }
  .design-project-page .df-head h2,
  .design-project-page .df-title-ko,
  .design-project-page .df-title-en{
    font-family:Pretendard,Arial,sans-serif;
    font-size:22px;
    line-height:1.35;
  }
  .profile-copy h2,
  .career-card h2,
  .philosophy-copy h2{
    font-family:'Gowun Batang',serif;
    font-size:20px;
    font-weight:700;
    line-height:1.55;
  }
  .df-copy h3,
  .story-text-column h3,
  .story-split-copy h3{
    font-family:Pretendard,Arial,sans-serif;
    font-size:18px;
    line-height:1.5;
  }
  .profile-copy p,
  .philosophy-copy p,
  .df-copy p,
  .story-text-column p,
  .story-split-copy p,
  .nextstory-page p{
    font-size:16px;
    line-height:1.85;
  }
  .career-card,
  .career-card ul,
  .career-card li{font-size:16px;line-height:1.85}

  /* Same left inset as the completed mobile home footer. */
  .sub-page footer{padding-left:28px;padding-right:28px}
}

@media (max-width:390px){
  .sub-hero h1 strong{font-size:34px}
  .sub-hero h1 span{font-size:20px}
  .sub-local-nav{font-size:19px;gap:12px}
}

/* 2026-07-21 — mobile sub second refinement v13 */

/* Desktop/tablet sub hero keeps the original one-line dash separator. */
@media (min-width:768px){
  .sub-page .sub-hero h1 strong::after{
    content:"－";
    display:inline-block;
    margin-left:16px;
    font:inherit;
    color:inherit;
  }
}

@media (max-width:767px){
  /* Remove the doubled-looking edge on the pale Next Story bookmark. */
  .sub-bookmarks a.is-pale,
  .sub-bookmarks a.is-pale:hover,
  .sub-bookmarks a.is-pale:focus-visible{
    background:#fff;
    color:#4f586b;
    border:1px solid #8f97a7;
    box-shadow:none;
  }

  /* Design pages had an older !important 122px rule: match every other mobile hero. */
  .design-project-page .sub-hero{
    width:100%!important;
    height:178px!important;
    padding:0 20px!important;
    align-items:center!important;
    justify-content:center!important;
    background:#8797aa url('assets/sub-hero-mobile.png') center center/cover no-repeat!important;
  }
  .design-project-page .sub-hero h1{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    white-space:normal!important;
  }

  /* One fixed hero-to-rule rhythm, using the approved design-page spacing. */
  .sub-local-nav,
  .design-project-page .design-faithful-nav{
    width:100%!important;
    height:108px!important;
    min-height:108px!important;
    margin:0!important;
    padding:12px 0 8px!important;
    align-items:center!important;
    align-content:center!important;
    box-sizing:border-box!important;
  }
  .sub-local-nav a,
  .design-project-page .design-faithful-nav > a{
    padding:14px 0 10px!important;
    line-height:1.15!important;
  }

  /* Restore the approved project-title scale; keep the supporting line quieter. */
  .design-project-page .df-kicker{
    font-size:18px!important;
    line-height:1.35!important;
  }
  .design-project-page .df-head h2,
  .design-project-page .df-title-ko,
  .design-project-page .df-title-en{
    font-size:25px!important;
    line-height:1.35!important;
  }
  .design-project-page .df-role,
  .design-project-page .df-role b{
    font-size:16px!important;
    line-height:1.65!important;
  }

  /* Match the completed mobile-home footer exactly. */
  .sub-page footer{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:42px 28px 38px!important;
    box-sizing:border-box!important;
    font-size:13px!important;
  }
  .sub-page .footer-copy,
  .sub-page .footer-info{
    width:100%!important;
    padding:0!important;
    margin-left:0!important;
    margin-right:0!important;
    grid-column:auto!important;
  }
  .sub-page .footer-copy>p:first-child{font-size:14px!important}
  .sub-page .footer-info{margin-top:36px!important;font-size:13px!important}
  .sub-page .copyright{
    position:static!important;
    width:100%!important;
    margin:36px 0 0!important;
    font-size:11px!important;
    line-height:1.5!important;
    text-align:left!important;
    white-space:normal!important;
  }
}

/* 2026-07-21 — mobile sub third refinement v14 */
@media (max-width:767px){
  /* Pale Next Story bookmark: remove the extra diagonal/hairline that doubled the edge. */
  .sub-bookmarks a.is-pale::before,
  .sub-bookmarks a.is-pale::after{display:none!important}
  .sub-bookmarks a.is-pale,
  .sub-bookmarks a.is-pale:hover,
  .sub-bookmarks a.is-pale:focus-visible{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#4f586b!important;
  }

  /* All local menus sit optically centered between hero and the rule. */
  .sub-local-nav,
  .design-project-page .design-faithful-nav,
  .story-page .story-local-nav,
  .nextstory-page .nextstory-local-nav{
    height:108px!important;
    min-height:108px!important;
    padding:0!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    line-height:1.1!important;
  }
  .sub-local-nav > a,
  .design-project-page .design-faithful-nav > a,
  .story-page .story-local-nav > a,
  .nextstory-page .nextstory-local-nav > a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:30px!important;
    padding:0!important;
    line-height:1.1!important;
  }
  .sub-local-nav > i,
  .design-project-page .design-faithful-nav > i,
  .story-page .story-local-nav > i,
  .nextstory-page .nextstory-local-nav > i{
    align-self:center!important;
    margin:0!important;
  }

  /* Design five-item menu: keep two rows compact inside the fixed 108px band. */
  .design-project-page .design-faithful-nav{
    row-gap:5px!important;
    column-gap:8px!important;
    grid-auto-rows:31px!important;
  }
  .design-project-page .design-faithful-nav > a{
    line-height:1.05!important;
  }

  /* Supporting copy above project title gets a quieter hierarchy. */
  .design-project-page .df-kicker{
    color:#8a929f!important;
    font-weight:500!important;
    margin-bottom:9px!important;
  }

  /* Story index: horizontal rules only, and same local-nav type scale as other pages. */
  .story-page .story-local-nav{font-size:20px!important;gap:0 18px!important}
  .story-page .story-local-nav a{font-size:inherit!important}
  .story-page .story-list{
    border-top:1px solid var(--line)!important;
  }
  .story-page .story-list .card{
    border-left:0!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }

  /* Next Story section headlines share one size and rhythm. */
  .nextstory-page .nextstory-section-head h2,
  .nextstory-page .nextstory-negative h2,
  .nextstory-page .nextstory-closing{
    font-size:20px!important;
    font-weight:700!important;
    line-height:1.5!important;
    letter-spacing:-.035em!important;
  }

  /* Method: all five steps remain open; arrows are decorative only. */
  .nextstory-method-page .method-step,
  .nextstory-method-page .method-step.is-hidden,
  .nextstory-method-page .method-step.is-visible{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    max-height:none!important;
  }
  .nextstory-method-page .method-step-face--front{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .nextstory-method-page .method-step-face--hover{display:none!important}
  .nextstory-method-page .method-step-arrow{
    display:flex;
    width:100%;
    height:34px;
    align-items:center;
    justify-content:center;
    color:#8791a1;
    font-size:25px;
    line-height:1;
  }
}


/* 2026-07-21 — mobile sub fourth refinement v15 */
@media (max-width:767px){
  /* Next Story bookmark: one clean clipped outline, without doubled pseudo edges. */
  .sub-bookmarks a.is-pale,
  .sub-bookmarks a.is-pale:hover,
  .sub-bookmarks a.is-pale:focus-visible{
    border:0!important;
    outline:0!important;
    box-shadow:inset 0 0 0 1px #8f97a7!important;
  }

  /* Design local menu: row spacing is tighter than the outer breathing room. */
  .design-project-page .design-faithful-nav{
    row-gap:0!important;
    column-gap:8px!important;
    grid-auto-rows:27px!important;
    padding:17px 0 14px!important;
  }
  .design-project-page .design-faithful-nav > a{
    min-height:27px!important;
    line-height:1!important;
  }

  /* Story list: use more of each full-width row and tighten title/body/more rhythm. */
  .story-page .story-list .card{
    width:100%!important;
    min-height:0!important;
    padding:0 5% 13px!important;
    box-sizing:border-box!important;
  }
  .story-page .story-list .card h3,
  .story-page .story-list .card p{
    width:100%!important;
    max-width:none!important;
  }
  .story-page .story-list .card h3{
    height:auto!important;
    min-height:56px!important;
    max-height:none!important;
    margin-top:50px!important;
    padding-bottom:13px!important;
    line-height:27px!important;
    -webkit-line-clamp:2!important;
  }
  .story-page .story-list .card h3::after{bottom:3px!important}
  .story-page .story-list .card p{
    height:auto!important;
    min-height:54px!important;
    max-height:none!important;
    margin-top:5px!important;
    line-height:27px!important;
    -webkit-line-clamp:2!important;
  }
  .story-page .story-list .card .more{
    margin-top:4px!important;
    line-height:1.2!important;
  }

  /* People cards: expose the hover sentence beneath the front title on touch screens. */
  .nextstory-card-grid--positive .nextstory-card-face--front{
    padding:28px 15px 24px!important;
  }
  .nextstory-card-grid--positive .nextstory-card-face--front > img{
    margin-bottom:12px!important;
  }
  .nextstory-card-grid--positive .nextstory-card-title{
    width:100%!important;
    font-family:Pretendard,Arial,sans-serif!important;
    font-size:18px!important;
    font-weight:600!important;
    line-height:1.4!important;
    white-space:nowrap!important;
  }
  .nextstory-card-grid--positive .nextstory-card-subcopy{
    display:block!important;
    width:100%!important;
    margin-top:8px!important;
    color:#626b7d!important;
    font-family:"Gowun Batang",serif!important;
    font-size:15px!important;
    font-weight:400!important;
    line-height:1.55!important;
    white-space:nowrap!important;
  }

  /* Method: reduce only the air between each arrow and the following box. */
  .nextstory-method-page .method-step,
  .nextstory-method-page .method-step.is-visible{
    padding-bottom:18px!important;
  }
  .nextstory-method-page .method-step-arrow{
    height:24px!important;
    margin-top:2px!important;
    margin-bottom:-8px!important;
  }
}

@media (max-width:390px){
  .nextstory-card-grid--positive .nextstory-card-title{font-size:17px!important}
  .nextstory-card-grid--positive .nextstory-card-subcopy{font-size:14px!important}
}

/* 2026-07-21 — mobile sub small refinements v16 */
@media (max-width:767px){
  /* Next Story bookmark: restore one clean outline including the clipped corner. */
  .sub-bookmarks a.is-pale,
  .sub-bookmarks a.is-pale:hover,
  .sub-bookmarks a.is-pale:focus-visible{
    position:relative!important;
    isolation:isolate!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    overflow:hidden!important;
  }
  .sub-bookmarks a.is-pale::before,
  .sub-bookmarks a.is-pale::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    pointer-events:none!important;
    clip-path:polygon(0 0,86% 0,100% 34%,100% 100%,0 100%)!important;
  }
  .sub-bookmarks a.is-pale::before{
    inset:0!important;
    z-index:0!important;
    background:#8f97a7!important;
  }
  .sub-bookmarks a.is-pale::after{
    inset:1px!important;
    z-index:1!important;
    background:#fff!important;
  }
  .sub-bookmarks a.is-pale > span{
    position:relative!important;
    z-index:2!important;
    color:#4f586b!important;
  }

  /* Lower only the design local-menu group inside its fixed band. */
  .design-project-page .design-faithful-nav{
    transform:translateY(7px)!important;
  }

  /* People-page tag follows the same type system as the Role box. */
  .nextstory-page .nextstory-tag{
    font-family:Pretendard,Arial,sans-serif!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:1.65!important;
  }

  /* Allow natural wrapping only between words, never through a word. */
  .nextstory-card-grid--positive .nextstory-card-title{
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
}

/* 2026-07-21 mobile story final line/nav fixes */
@media (max-width:768px){
  /* Keep every story-list row divider visible, including the second item. */
  .story-page .story-list .card{
    border-bottom:0!important;
    box-shadow:inset 0 -1px 0 var(--line)!important;
  }

  /* Previous / next use the same size as 목록, with a lighter weight. */
  .story-detail-page .story-post-nav > a{
    font-size:15px!important;
  }
  .story-detail-page .story-post-nav small{
    margin-bottom:0!important;
    font-size:15px!important;
    font-weight:400!important;
    line-height:1.35!important;
  }
  .story-detail-page .story-post-list{
    font-size:15px!important;
  }
}

/* 2026-07-21 — mobile story row consistency and Korean word wrapping v18 */
@media (max-width:768px){
  /* Story index: match every row to the first card — no title/body divider,
     one clean horizontal rule only at the bottom of each row. */
  .story-page .story-list .card{
    border-left:0!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:none!important;
  }
  .story-page .story-list .card h3::after{
    content:none!important;
    display:none!important;
  }

  /* Next Story / People: wrap Korean copy only between words. */
  .nextstory-page .nextstory-negative h2,
  .nextstory-page .nextstory-closing{
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    white-space:normal!important;
  }
}

/* 2026-07-21 — mobile story divider and text rhythm v19 */
@media (max-width:768px){
  /* Draw every row divider as a background line so no nth-child/border rule can remove it. */
  .story-page .story-list .card{
    min-height:198px!important;
    border-bottom:0!important;
    box-shadow:none!important;
    background-image:linear-gradient(var(--line),var(--line))!important;
    background-repeat:no-repeat!important;
    background-position:left bottom!important;
    background-size:100% 1px!important;
    padding-bottom:38px!important;
  }

  /* Keep the actual title-to-body gap identical whether the title is one or two lines. */
  .story-page .story-list .card h3{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  .story-page .story-list .card p{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-top:12px!important;
  }
  .story-page .story-list .card .more{
    bottom:13px!important;
  }
}

/* 2026-07-21 — mobile story divider and text rhythm v19 */
@media (max-width:768px){
  .story-page .story-list .card{
    min-height:198px!important;
    border-bottom:0!important;
    box-shadow:none!important;
    background-image:linear-gradient(var(--line),var(--line))!important;
    background-repeat:no-repeat!important;
    background-position:left bottom!important;
    background-size:100% 1px!important;
    padding-bottom:38px!important;
  }
  .story-page .story-list .card h3{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  .story-page .story-list .card p{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-top:12px!important;
  }
  .story-page .story-list .card .more{
    bottom:13px!important;
  }
}

/* 2026-07-21 — final story divider, typography contrast and mobile rhythm */
:root{--body-ink:#414b60}

/* Body copy now uses the same deep blue-gray family as the major headings.
   Dates, role labels, kickers, captions and more links keep their lighter support colors. */
.sub-page .profile-copy p,
.sub-page .career-card ul,
.sub-page .career-card li,
.sub-page .df-project,
.sub-page .df-copy,
.sub-page .df-copy p,
.sub-page .story-article,
.sub-page .story-text-column p,
.sub-page .story-split-copy p,
.sub-page .nextstory-people,
.sub-page .nextstory-content p,
.sub-page .nextstory-method-page p,
.sub-page .nextstory-card-subcopy{
  color:var(--body-ink)!important;
}

@media (max-width:768px){
  /* Draw a real independent row rule on every story item. This is not affected by
     grid nth-child borders, card backgrounds or the title hover line. */
  .story-page .story-list .card{
    position:relative!important;
    background-image:none!important;
    border-bottom:0!important;
  }
  .story-page .story-list .card::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    display:block!important;
    width:100%!important;
    height:1px!important;
    background:var(--line)!important;
    pointer-events:none!important;
    z-index:5!important;
  }

  /* Keep the visual gap identical whether a title wraps to one or two lines. */
  .story-page .story-list .card h3{
    min-height:0!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  .story-page .story-list .card p{
    margin-top:12px!important;
  }
}


/* 2026-07-21 final finish: viewport TOP + guaranteed story row divider */
@media (min-width:768px){
  .sub-page-tools{
    display:block!important;
    position:fixed!important;
    left:auto!important;
    right:24px!important;
    top:auto!important;
    bottom:24px!important;
    width:52px!important;
    height:52px!important;
    transform:none!important;
    z-index:80!important;
  }
}
@media (max-width:767px){.sub-page-tools{display:none!important;}}





/* FINAL — mobile story list: no hover motion, one stable divider system */
@media (max-width:768px){
  .story-page .story-list{
    border-top:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
  }
  .story-page .story-list .card{
    position:relative!important;
    border:0!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
    transition:none!important;
  }
  .story-page .story-list .card + .card{
    box-shadow:inset 0 1px 0 var(--line)!important;
  }
  .story-page .story-list .card::before,
  .story-page .story-list .card::after{
    content:none!important;
    display:none!important;
  }
  .story-page .story-list .card:hover,
  .story-page .story-list .card:focus-within{
    transform:none!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .story-page .story-list .card + .card:hover,
  .story-page .story-list .card + .card:focus-within{
    box-shadow:inset 0 1px 0 var(--line)!important;
  }
  .story-page .story-list .card h3::after{
    content:none!important;
    display:none!important;
  }
}

/* FINAL v24 — story-detail submenu matches the shared mobile submenu scale */
@media (max-width:767px){
  .story-detail-page .story-local-nav{
    height:108px!important;
    min-height:108px!important;
    padding:0!important;
    gap:0 18px!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:center!important;
    font-size:20px!important;
    line-height:1.1!important;
  }
  .story-detail-page .story-local-nav > a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:30px!important;
    padding:0!important;
    font-size:inherit!important;
    line-height:1.1!important;
  }
  .story-detail-page .story-local-nav > i{
    align-self:center!important;
    height:15px!important;
    margin:0!important;
  }
}

/* FINAL v24 — vertically center each project-contact bullet against its text block */
.contact-card > ul > li::before{
  top:50%!important;
  transform:translateY(-50%)!important;
  line-height:1!important;
}


/* Story work-process: existing reading layout with alternating images */
.story-reading-flow .story-split + .story-split{margin-top:72px}
.story-reading-flow .story-split figure{align-self:start}
@media(max-width:900px){
  .story-reading-flow .story-split + .story-split{margin-top:54px}
}
@media(max-width:768px){
  .story-reading-flow .story-split{gap:24px}
  .story-reading-flow .story-split + .story-split{margin-top:44px}
  .story-reading-flow .story-split--image-right figure{order:2}
  .story-reading-flow .story-split--image-right .story-split-copy{order:1}
}

/* Story 01 final alignment — PC article stays inside the local-nav rule width */
@media (min-width:901px){
  .story-detail-page .story-article,
  .story-detail-page .story-reading-flow,
  .story-detail-page .story-reading-flow .story-split{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .story-detail-page .story-reading-flow .story-split{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .story-detail-page .story-reading-flow .story-split-copy,
  .story-detail-page .story-reading-flow figure,
  .story-detail-page .story-reading-flow img{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
}


/* FINAL STORY 02 — work-process category list and tablet-only footer alignment */
.work-process-list .story-empty-card{pointer-events:none;}
.work-process-list .story-empty-card:hover,
.work-process-list .story-empty-card:focus-within{transform:none!important;box-shadow:none!important;}
@media (min-width:901px){
  .work-process-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (min-width:768px) and (max-width:900px){
  .work-process-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (max-width:767px){
  .work-process-list .story-empty-card{display:none!important;}
}
@media (min-width:768px) and (max-width:1440px){
  .sub-page .sub-panel>footer .footer-copy,
  .sub-page .sub-panel>footer .footer-info{padding-left:0!important;padding-right:0!important;}
}

/* 2026-07-22 — tablet-only stabilization (768–900)
   Scope: tablet header/hero/local menus, work-process list, footer copyright,
   and Next Story people-card type. PC and mobile remain untouched. */
@media (min-width:768px) and (max-width:900px){
  /* Keep 768 inside the tablet system, not the mobile system. */
  .sub-mobile-storybook.mobile-storybook.ribbon-wrap{display:none!important;}
  .sub-page .ribbon-wrap:not(.sub-mobile-storybook){display:block!important;}

  .sub-global-nav{
    height:68px!important;
    padding:0 26px 0 0!important;
    display:flex!important;
    align-items:flex-end!important;
  }
  .sub-brand{
    flex:1!important;
    width:auto!important;
    height:68px!important;
    font-size:23px!important;
    writing-mode:horizontal-tb!important;
    white-space:nowrap!important;
  }
  .sub-bookmarks{
    display:flex!important;
    height:68px!important;
    margin-left:auto!important;
    align-items:flex-end!important;
  }
  .sub-bookmarks a{
    width:118px!important;
    height:48px!important;
    padding:0!important;
    font-size:18px!important;
  }

  /* One approved tablet hero scale across every sub page. */
  .sub-page .sub-hero,
  .design-project-page .sub-hero{
    width:100%!important;
    height:112px!important;
    min-height:112px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:transparent!important;
    overflow:hidden!important;
  }
  .sub-page .sub-hero h1,
  .design-project-page .sub-hero h1{
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:16px!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
    line-height:1!important;
  }
  .sub-page .sub-hero h1 strong,
  .design-project-page .sub-hero h1 strong{
    margin:0!important;
    font-size:42px!important;
    line-height:1!important;
  }
  .sub-page .sub-hero h1 span,
  .design-project-page .sub-hero h1 span{
    margin:0!important;
    font-size:24px!important;
    line-height:1!important;
  }
  .sub-page .sub-hero h1 strong::after{margin-left:14px!important;}

  /* Shared tablet local-menu band. */
  .sub-local-nav,
  .story-page .story-local-nav,
  .nextstory-page .nextstory-local-nav{
    width:100%!important;
    height:108px!important;
    min-height:108px!important;
    padding:0!important;
    gap:24px!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:center!important;
    font-size:22px!important;
    line-height:1.1!important;
  }
  .sub-local-nav > a,
  .story-page .story-local-nav > a,
  .nextstory-page .nextstory-local-nav > a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:108px!important;
    min-height:0!important;
    padding:0!important;
    font-size:inherit!important;
    line-height:1.1!important;
  }
  .sub-local-nav > i,
  .story-page .story-local-nav > i,
  .nextstory-page .nextstory-local-nav > i{
    display:block!important;
    height:17px!important;
    margin:0!important;
    align-self:center!important;
  }

  /* Five-item design menu: stable two-row tablet layout. */
  .design-project-page .design-faithful-nav{
    width:100%!important;
    height:112px!important;
    min-height:112px!important;
    margin:0!important;
    padding:16px 18px!important;
    display:grid!important;
    grid-template-columns:max-content 1px max-content 1px max-content!important;
    grid-template-rows:34px 34px!important;
    column-gap:22px!important;
    row-gap:10px!important;
    justify-content:center!important;
    align-content:center!important;
    align-items:center!important;
    font-size:20px!important;
    line-height:1.1!important;
  }
  .design-project-page .design-faithful-nav > a{
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    font-size:inherit!important;
    line-height:1.1!important;
  }
  .design-project-page .design-faithful-nav > i{
    display:block!important;
    width:1px!important;
    height:16px!important;
    margin:0!important;
  }
  .design-project-page .design-faithful-nav > a:nth-of-type(1){grid-column:1;grid-row:1}
  .design-project-page .design-faithful-nav > i:nth-of-type(1){grid-column:2;grid-row:1}
  .design-project-page .design-faithful-nav > a:nth-of-type(2){grid-column:3;grid-row:1}
  .design-project-page .design-faithful-nav > i:nth-of-type(2){grid-column:4;grid-row:1}
  .design-project-page .design-faithful-nav > a:nth-of-type(3){grid-column:5;grid-row:1}
  .design-project-page .design-faithful-nav > i:nth-of-type(3){display:none!important}
  .design-project-page .design-faithful-nav > a:nth-of-type(4){grid-column:1 / span 2;grid-row:2;justify-self:end!important}
  .design-project-page .design-faithful-nav > i:nth-of-type(4){grid-column:3;grid-row:2}
  .design-project-page .design-faithful-nav > a:nth-of-type(5){grid-column:4 / span 2;grid-row:2;justify-self:start!important}

  /* Work-process category follows the approved two-column tablet list. */
  .work-process-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  /* Next Story / People: slightly calmer tablet copy. */
  .nextstory-page:has(#people) .nextstory-card-title{
    font-size:16px!important;
  }
  .nextstory-page:has(#people) .nextstory-card-subcopy{
    font-size:14px!important;
    line-height:1.65!important;
  }

  /* Prevent the copyright from inheriting competing absolute positions. */
  .sub-page .sub-panel > footer{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    align-items:start!important;
  }
  .sub-page .sub-panel > footer .footer-copy{
    grid-column:1!important;
    width:auto!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }
  .sub-page .sub-panel > footer .footer-info{
    grid-column:2!important;
    width:auto!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }
  .sub-page .sub-panel > footer .copyright,
  .sub-page .sub-panel > footer > .copyright{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:auto!important;
    margin:24px 0 0!important;
    padding:0!important;
    transform:none!important;
    text-align:left!important;
    white-space:normal!important;
    font-size:11px!important;
    line-height:1.5!important;
  }
  .sub-page .sub-panel > footer > .copyright{
    grid-column:1!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }
}

/* 2026-07-22 — requested tablet refinements v02
   Only the 768px tablet edge, 768–900 tablet details, and <=1440 copyright wrap. */
.copyright-break{display:none;}
@media (max-width:1440px){
  .copyright-break{display:block;}
}

/* 900px People page: reduce card copy by about 1–2px without affecting Method/Contact. */
@media (min-width:768px) and (max-width:900px){
  .nextstory-people-page .nextstory-card-title{
    font-size:16px!important;
  }
  .nextstory-people-page .nextstory-card-subcopy{
    font-size:14px!important;
    line-height:1.6!important;
  }

  /* Design project submenu: preserve the two-row layout, with a slightly tighter row gap. */
  .design-project-page .design-faithful-nav{
    row-gap:5px!important;
  }
}

/* Exactly 768px keeps the tablet layout, but uses the mobile Storybook strip. */
@media (width:768px){
  .sub-page .ribbon-wrap:not(.sub-mobile-storybook){display:none!important;}
  .sub-mobile-storybook.mobile-storybook.ribbon-wrap{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:flex!important;
    width:100%!important;
    height:52px!important;
    margin:0!important;
    padding:0 20px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background:#242526!important;
    color:#fff!important;
    text-decoration:none!important;
    text-align:left!important;
    white-space:nowrap!important;
    transform:none!important;
    z-index:30!important;
  }
  .sub-mobile-storybook strong{font:700 16px/1.2 'Gowun Batang',serif!important;}
  .sub-mobile-storybook b{margin-left:0!important;font:500 14px/1.2 Pretendard,Arial,sans-serif!important;}

  /* Story lists use a clean 2×2 tablet grid at the 768px boundary. */
  .story-page .story-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:48px!important;
    border-top:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
  }
  .story-page .story-list .card{
    width:auto!important;
    min-width:0!important;
    height:310px!important;
    min-height:310px!important;
    padding:0 18px 24px!important;
    border:0!important;
    border-right:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:none!important;
    background:#fff!important;
    background-image:none!important;
    transform:none!important;
  }
  .story-page .story-list .card:nth-child(2n){border-right:0!important;}
  .story-page .story-list .card:nth-last-child(-n+2){border-bottom:0!important;}
  .story-page .story-list .card + .card{box-shadow:none!important;}
  .story-page .story-list .card::before,
  .story-page .story-list .card::after{content:none!important;display:none!important;}
  .story-page .story-list .card h3{
    height:auto!important;
    min-height:84px!important;
    max-height:none!important;
    margin:62px auto 0!important;
    padding:0!important;
    font-size:17px!important;
    line-height:27px!important;
    -webkit-line-clamp:3!important;
  }
  .story-page .story-list .card p{
    height:auto!important;
    min-height:72px!important;
    max-height:none!important;
    margin:12px auto 0!important;
    font-size:15px!important;
    line-height:25px!important;
    -webkit-line-clamp:3!important;
  }
  .story-page .story-list .card .more{bottom:22px!important;}
}

/* 2026-07-22 — People tablet typography correction v03 */
@media (min-width:768px) and (max-width:900px){
  /* Restore the approved card scale. Only the supporting sentence uses the serif face. */
  .nextstory-people-page .nextstory-card-title{
    font-size:18px!important;
  }
  .nextstory-people-page .nextstory-card-subcopy{
    font-family:"Gowun Batang",serif!important;
    font-size:15px!important;
    font-weight:400!important;
    line-height:1.65!important;
  }

  /* The audience/tag box is core information, so give it one more pixel of presence. */
  .nextstory-people-page .nextstory-tag{
    font-size:17px!important;
    line-height:1.65!important;
  }
}


/* 2026-07-22 — natural wrapping for People and Design role boxes v04 */
@media (min-width:768px) and (max-width:900px){
  .nextstory-people-page .nextstory-tag,
  .design-project-page .df-role,
  .design-project-page .df-role b{
    font-size:17px!important;
  }
  .nextstory-people-page .nextstory-tag,
  .design-project-page .df-role{
    height:auto!important;
    min-height:0!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    line-height:1.65!important;
  }
}

/* 2026-07-22 — 768–900 touch tablet: Method is fully visible without hover/click. */
@media (min-width:768px) and (max-width:900px){
  .nextstory-method-page .method-step,
  .nextstory-method-page .method-step.is-hidden,
  .nextstory-method-page .method-step.is-visible{
    display:block!important;
    max-height:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    overflow:visible!important;
    pointer-events:auto!important;
    padding-bottom:28px!important;
  }
  .nextstory-method-page .method-step-shell{
    transform:none!important;
  }
  .nextstory-method-page .method-step-face--front{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .nextstory-method-page .method-step-face--hover,
  .nextstory-method-page .method-step-click{
    display:none!important;
  }
  .nextstory-method-page .method-final-note{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
}


/* 2026-07-22 — small-mobile final pass (360–412px) */
.design-nav-estec-mobile{display:none;}
.mobile-career-break{display:none;}

@media (max-width:412px){
  /* About: keep the approved type size, but break the studio-role line cleanly. */
  .career-card .career-brand-line,
  .career-card .career-since-line{
    display:inline;
  }
  .career-card .mobile-career-break{
    display:block!important;
  }

  /* Design project nav: shorten only the mobile label. */
  .design-project-page .design-nav-estec-full{display:none!important;}
  .design-project-page .design-nav-estec-mobile{display:inline!important;}

  /* Story and Next Story local menus use the same compact rhythm as Design. */
  .story-page .story-local-nav,
  .nextstory-page .nextstory-local-nav{
    width:100%!important;
    height:108px!important;
    min-height:108px!important;
    padding:0 10px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:center!important;
    column-gap:8px!important;
    row-gap:5px!important;
    font-size:19px!important;
    line-height:1.05!important;
    box-sizing:border-box!important;
  }
  .story-page .story-local-nav > a,
  .nextstory-page .nextstory-local-nav > a{
    min-height:31px!important;
    height:31px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1.05!important;
  }
  .story-page .story-local-nav > i,
  .nextstory-page .nextstory-local-nav > i{
    height:15px!important;
    margin:0!important;
    align-self:center!important;
  }
}

/* 2026-07-22 — small-mobile subpage spacing pass (360–412px only) */
.mobile-footer-break{display:none;}

@media (min-width:360px) and (max-width:412px){
  /* About career: wrap only at word boundaries, never inside a word. */
  .career-card,
  .career-card ul,
  .career-card li,
  .career-card .career-brand-line,
  .career-card .career-since-line{
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    white-space:normal!important;
  }

  /* Story / Next Story submenu: restored to the existing shared mobile flex layout. */

  /* Footer sentence: exactly two lines on small mobile. */
  .sub-page .footer-copy > p:first-child{
    white-space:nowrap!important;
  }
  .mobile-footer-break{display:inline!important;}
}


/* 2026-07-22 — mobile14 requested corrections (360–412px only) */
@media (min-width:360px) and (max-width:412px){
  /* Design submenu: remove only the divider to the right of Playbaduk. */
  .design-project-page .design-nav-bottom-row > i{
    display:none!important;
  }

  /* Story detail submenu: exactly match the story list submenu rhythm. */
  .story-detail-page .story-local-nav{
    width:100%!important;
    height:108px!important;
    min-height:108px!important;
    padding:0 10px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:center!important;
    column-gap:8px!important;
    row-gap:5px!important;
    font-size:19px!important;
    line-height:1.05!important;
    box-sizing:border-box!important;
  }
  .story-detail-page .story-local-nav > a{
    min-height:31px!important;
    height:31px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:inherit!important;
    line-height:1.05!important;
  }
  .story-detail-page .story-local-nav > i{
    display:block!important;
    width:1px!important;
    height:15px!important;
    margin:0!important;
    align-self:center!important;
  }

  /* Story detail title: one pixel smaller on small mobile. */
  .story-detail-page .story-article-head h2{
    font-size:24px!important;
  }
}

/* 2026-07-22 — mobile16 precise title fixes only */
@media (min-width:360px) and (max-width:412px){
  /* Restore the design submenu divider; the requested removal is in the title, not the submenu. */
  .design-project-page .design-nav-bottom-row > i{
    display:block!important;
  }

  /* Story detail title size approved for small mobile. */
  .story-detail-page .story-article-head h2{
    font-size:22px!important;
  }
}

/* At 360px only, the Playbaduk title wraps; hide only its dash separator. */
@media (min-width:360px) and (max-width:374px){
  .design-project-page .playbaduk-title-dash{
    display:none!important;
  }
}

/* 2026-07-22 — mobile17 final requested refinements on top of mobile16 */
@media (min-width:360px) and (max-width:412px){
  /* People-page audience tag: wrap only between Korean words. */
  .nextstory-people-page .nextstory-tag{
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  /* Story detail title follows the approved Mins content-title typography. */
  .story-detail-page .story-article-head h2{
    font-family:"Gowun Batang",serif!important;
    font-size:20px!important;
    font-weight:700!important;
    line-height:1.55!important;
  }
}

/* At 360px only, reduce local-menu text size; layout, spacing and row structure stay unchanged. */
@media (min-width:360px) and (max-width:374px){
  .sub-page .sub-local-nav,
  .sub-page .story-local-nav,
  .sub-page .nextstory-local-nav,
  .design-project-page .design-faithful-nav{
    font-size:16px!important;
  }
  .sub-page .sub-local-nav > a,
  .sub-page .story-local-nav > a,
  .sub-page .nextstory-local-nav > a,
  .design-project-page .design-faithful-nav a{
    font-size:inherit!important;
  }
}


/* 2026-07-22 — mobile18 final two-line career and readable 360 submenu */
.career-mobile-two-lines{display:none;}

@media (min-width:360px) and (max-width:412px){
  .career-card .career-desktop-line{display:none!important;}
  .career-card .career-mobile-two-lines{display:block!important;}
  .career-card .career-mobile-two-lines > span{
    display:block!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
}

@media (min-width:360px) and (max-width:374px){
  .sub-page .sub-local-nav,
  .sub-page .story-local-nav,
  .sub-page .nextstory-local-nav,
  .design-project-page .design-faithful-nav{
    font-size:17px!important;
    column-gap:5px!important;
  }
  .sub-page .sub-local-nav > a,
  .sub-page .story-local-nav > a,
  .sub-page .nextstory-local-nav > a,
  .design-project-page .design-faithful-nav a{
    font-size:inherit!important;
  }
}

/* 2026-07-22 — mobile19: 360px local-menu text/divider breathing room */
@media (min-width:360px) and (max-width:374px){
  .sub-page .sub-local-nav,
  .sub-page .story-local-nav,
  .sub-page .nextstory-local-nav,
  .design-project-page .design-faithful-nav{
    column-gap:7px!important;
  }
}

/* 2026-07-22 — mobile Storybook strip with VIEW icon */
@media (max-width:767px){
  .sub-mobile-storybook.mobile-storybook.ribbon-wrap{
    justify-content:space-between!important;
    gap:10px!important;
    padding:0 16px 0 18px!important;
  }
  .sub-mobile-storybook.mobile-storybook.ribbon-wrap > span{
    display:flex!important;
    min-width:0!important;
    align-items:center!important;
    white-space:nowrap!important;
  }
  .sub-mobile-storybook strong{
    flex:0 0 auto!important;
    font-size:15px!important;
  }
  .sub-mobile-storybook b{
    min-width:0!important;
    margin-left:3px!important;
    font-size:12px!important;
    letter-spacing:-.02em!important;
  }
  .sub-mobile-storybook.mobile-storybook.ribbon-wrap::after{
    content:"VIEW"!important;
    flex:0 0 auto!important;
    display:flex!important;
    width:64px!important;
    height:28px!important;
    padding-right:30px!important;
    box-sizing:border-box!important;
    align-items:center!important;
    justify-content:flex-end!important;
    background:url('assets/storybook-view-icon.png') right center / 28px auto no-repeat!important;
    color:#ef3b35!important;
    font:700 12px/1 Pretendard,Arial,sans-serif!important;
    letter-spacing:.01em!important;
  }
}

/* mobile logo font refinement v21: logo only */
@media (max-width:767px){
  .sub-brand{
    font-family:'학교안심 산뜻바탕','Hakgyoansim Santteutbatang','Gowun Batang',serif!important;
    font-weight:500;
    font-synthesis:none;
  }
}

/* 2026-07-23 — brand logo: Santteut Batang, unified on all sub pages */
.sub-brand{
  font-family:'학교안심 산뜻바탕','Hakgyoansim Santteutbatang','Gowun Batang',serif!important;
  font-weight:600!important;
  font-synthesis:weight;
}

/* 2026-07-23 — 360px Method cards: separate Step label from title/body */
@media (max-width:360px){
  .nextstory-method-page .method-step-shell{
    min-height:180px!important;
  }
  .nextstory-method-page .method-step-face--front{
    justify-content:flex-start!important;
    padding-top:58px!important;
    padding-bottom:24px!important;
  }
}

/* 2026-07-23 — 1536px scaled desktop seam cleanup
   Extend each solid panel 1px into the connector edge so the nav, body,
   and footer meet the artwork without a hairline gap. */
@media (min-width:1441px){
  .sub-page .sub-global-nav,
  .sub-page .sub-content,
  .sub-page .sub-panel > footer{
    position:relative;
    left:-1px;
    width:calc(100% + 1px);
    box-sizing:border-box;
  }
}

/* 2026-07-26 — mobile static cards for Next Story */
@media (max-width:767px){
  /* 함께할 사람: 터치 환경에서는 앞면만 유지하고 모든 hover/link 반응을 제거한다. */
  .nextstory-people-page .nextstory-card-grid--positive .nextstory-card,
  .nextstory-people-page .nextstory-card-grid--positive .nextstory-card:hover{
    --card-fill:#fff;
    transform:none!important;
    filter:drop-shadow(0 1px 3px rgba(36,45,61,.08))!important;
    transition:none!important;
  }
  .nextstory-people-page .nextstory-card-grid--positive .nextstory-card-face--front,
  .nextstory-people-page .nextstory-card-grid--positive .nextstory-card:hover .nextstory-card-face--front{
    opacity:1!important;
    transition:none!important;
  }
  .nextstory-people-page .nextstory-card-grid--positive .nextstory-card-face--hover,
  .nextstory-people-page .nextstory-card-grid--positive .nextstory-card:hover .nextstory-card-face--hover,
  .nextstory-people-page .nextstory-card-link,
  .nextstory-people-page .nextstory-card-arrow{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
    animation:none!important;
  }

  /* 함께하는 방식: 모바일에서는 모든 단계를 정적으로 펼쳐 보여준다. */
  .nextstory-method-page .method-step,
  .nextstory-method-page .method-step.is-hidden,
  .nextstory-method-page .method-step.is-visible{
    max-height:none!important;
    opacity:1!important;
    transform:none!important;
    overflow:visible!important;
    pointer-events:auto!important;
    padding-bottom:38px!important;
    transition:none!important;
  }
  .nextstory-method-page .method-step-shell,
  .nextstory-method-page .method-step:hover .method-step-shell{
    background:#fff!important;
    transform:none!important;
    filter:drop-shadow(0 1px 3px rgba(36,45,61,.08))!important;
    transition:none!important;
  }
  .nextstory-method-page .method-step-number,
  .nextstory-method-page .method-step:hover .method-step-number{
    color:#d9dce2!important;
    transition:none!important;
  }
  .nextstory-method-page .method-step-face--front,
  .nextstory-method-page .method-step:hover .method-step-face--front{
    opacity:1!important;
    transition:none!important;
  }
  .nextstory-method-page .method-step-face--hover,
  .nextstory-method-page .method-step:hover .method-step-face--hover,
  .nextstory-method-page .method-step-click{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  .nextstory-method-page .method-final-note{
    display:none!important;
  }
}

/* 2026-07-26 — v30 mobile subpage vertical-density test */
@media (max-width:767px){
  /* Shorten the sub hero without changing its typography or artwork. */
  .sub-page .sub-hero,
  .design-project-page .sub-hero{
    height:148px!important;
    min-height:148px!important;
  }

  /* Shorten the local-menu band by 20px while preserving type size and touch targets. */
  .sub-page .sub-local-nav,
  .sub-page .story-local-nav,
  .sub-page .nextstory-local-nav,
  .design-project-page .design-faithful-nav{
    height:88px!important;
    min-height:88px!important;
  }

  /* Keep two-row menus visually compact. */
  .design-project-page .design-faithful-nav{
    row-gap:0!important;
    padding:7px 0 4px!important;
  }
  .story-page .story-local-nav,
  .story-detail-page .story-local-nav,
  .nextstory-page .nextstory-local-nav{
    row-gap:0!important;
  }
}

/* 2026-07-26 — v31 mobile Design submenu: true two-row tightening */
@media (max-width:767px){
  .design-project-page .design-faithful-nav{
    grid-template-rows:27px 27px!important;
    grid-auto-rows:27px!important;
    row-gap:0!important;
  }
  .design-project-page .design-faithful-nav > a,
  .design-project-page .design-nav-bottom-row{
    height:27px!important;
    min-height:27px!important;
  }
  .design-project-page .design-nav-bottom-row{
    align-items:center!important;
  }
}


/* 2026-07-27 — Majungmul final alignment: image order, role fit, Aube text rhythm */
@media (min-width:1121px){
  .design-project-page .estec-project .df-head{
    grid-template-columns:minmax(0,1fr) auto;
    gap:48px;
  }
  .design-project-page .estec-project .df-role{
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:keep-all;
  }
}
@media (min-width:901px) and (max-width:1120px){
  .design-project-page .estec-project .df-role{
    white-space:normal;
    overflow-wrap:normal;
    word-break:keep-all;
  }
}
.design-project-page .estec-project .df-copy p{
  margin:0 0 14px;
  line-height:1.9;
}
@media (max-width:900px){
  .design-project-page .estec-project .df-copy p{
    line-height:1.82;
  }
}
@media (max-width:768px){
  .design-project-page .estec-project .df-copy p{
    font-size:16px;
    line-height:1.85;
  }
}


/* 2026-07-27 — Design Role box alignment final: Chickpeace dimensions, fixed label, left-aligned two-line tags */
.design-project-page .design-faithful-nav > a.is-active,
.design-project-page .design-nav-bottom-row > a.is-active{
  color:#414b60!important;
  font-weight:700!important;
}

.design-project-page .df-role{
  flex:0 0 372px;
  width:372px;
  height:96px;
  min-height:96px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:12px;
  align-content:start;
  align-items:start;
  padding:16px 20px;
  text-align:left;
  white-space:normal;
  word-break:keep-all;
  overflow:visible;
}
.design-project-page .df-role > b{
  display:block;
  white-space:nowrap;
  line-height:1.7;
}
.design-project-page .df-role-tags{
  display:block;
  min-width:0;
  text-align:left;
  line-height:1.7;
}
.design-project-page .df-role-tags > span{
  display:block;
  white-space:nowrap;
}

@media (min-width:901px) and (max-width:1120px){
  .design-project-page .df-role{
    flex-basis:294px;
    width:294px;
    height:88px;
    min-height:88px;
    padding:12px 16px;
    column-gap:10px;
  }
  .design-project-page .df-role-tags > span{
    white-space:normal;
  }
}

@media (min-width:769px) and (max-width:900px){
  .design-project-page .df-role{
    flex-basis:269px;
    width:269px;
    height:88px;
    min-height:88px;
    padding:12px;
    column-gap:8px;
  }
  .design-project-page .df-role-tags > span{
    white-space:normal;
  }
}

@media (max-width:768px){
  .design-project-page .df-role{
    width:100%;
    height:78px;
    min-height:78px;
    margin-top:20px;
    padding:8px 16px;
    column-gap:10px;
    align-content:center;
  }
  .design-project-page .df-role,
  .design-project-page .df-role > b,
  .design-project-page .df-role-tags{
    font-size:15px!important;
    line-height:1.45!important;
  }
  .design-project-page .df-role-tags > span{
    white-space:normal;
  }
}

.design-project-page footer .footer-copy .mobile-footer-break{
  display:block!important;
}

/* 2026-07-27 — Design project heading final: one shared title system + Role aligned to opening copy */
.design-project-page .df-head h2{
  font-family:"Pretendard","Noto Sans KR",Arial,sans-serif;
  font-size:41px;
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.045em;
  word-break:keep-all;
}
.design-project-page .df-head h2 .df-title-ko,
.design-project-page .df-head h2 .df-title-en{
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

@media (min-width:1121px){
  .design-project-page .df-head,
  .design-project-page .playbaduk-project .playbaduk-head,
  .design-project-page .ove-project .ove-head{
    display:grid!important;
    grid-template-columns:minmax(0,54fr) minmax(0,46fr)!important;
    gap:48px!important;
    align-items:start!important;
  }
  .design-project-page .df-role{
    justify-self:start;
  }
}

@media (min-width:901px) and (max-width:1120px){
  .design-project-page .df-head,
  .design-project-page .playbaduk-project .playbaduk-head,
  .design-project-page .ove-project .ove-head{
    display:grid!important;
    grid-template-columns:minmax(0,54fr) minmax(0,46fr)!important;
    gap:36px!important;
    align-items:start!important;
  }
  .design-project-page .df-head h2{
    font-size:35px;
  }
  .design-project-page .df-role{
    justify-self:start;
  }
}

@media (min-width:769px) and (max-width:900px){
  .design-project-page .df-head,
  .design-project-page .playbaduk-project .playbaduk-head,
  .design-project-page .ove-project .ove-head{
    display:grid!important;
    grid-template-columns:minmax(0,52fr) minmax(0,48fr)!important;
    gap:26px!important;
    align-items:start!important;
  }
  .design-project-page .df-head h2{
    font-size:31px;
  }
  .design-project-page .df-role{
    justify-self:start;
  }
}

@media (max-width:768px){
  .design-project-page .df-head,
  .design-project-page .playbaduk-project .playbaduk-head,
  .design-project-page .ove-project .ove-head{
    display:block!important;
  }
  .design-project-page .df-head h2,
  .design-project-page .df-title-ko,
  .design-project-page .df-title-en{
    font-size:24px!important;
    line-height:1.35!important;
  }
}
.design-project-page .ove-project .ove-title-stack{
  gap:0!important;
}