:root { --portfolio-max: 1140px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.portfolio-page { background:#020911; }
.portfolio-shell { background-size: 128px 128px; }
.portfolio-container { width:min(var(--portfolio-max), calc(100% - 48px)); margin:0 auto; }
.portfolio-header { max-width:var(--portfolio-max); grid-template-columns:auto 1fr auto auto auto; padding-left:0; padding-right:0; }
.portfolio-header .brand-logo { width:190px; }
.portfolio-nav { gap:34px; }
.portfolio-nav .is-active { color:#22cfff; position:relative; }
.portfolio-nav .is-active::after { content:""; position:absolute; left:0; right:0; bottom:-16px; height:3px; background:#18c7ff; }
.lang-switch { display:flex; gap:7px; align-items:center; color:#fff; font-size:.78rem; font-weight:700; }
.lang-switch button { appearance:none; border:0; background:transparent; padding:0; color:rgba(255,255,255,.65); font:inherit; cursor:pointer; }
.lang-switch button.active { color:#fff; }
.portfolio-menu-toggle { display:flex; }

.portfolio-main { min-height:calc(100vh - 190px); background: radial-gradient(circle at 88% 4%, rgba(0,112,196,.14), transparent 32%), linear-gradient(180deg,#03101b 0%,#020a12 42%,#02080e 100%); }
.portfolio-intro { position:relative; overflow:hidden; padding:46px 0 28px; }
.portfolio-orbit { position:absolute; width:760px; height:760px; right:-260px; top:-510px; border:1px solid rgba(65,162,255,.16); border-radius:50%; box-shadow:inset 0 0 90px rgba(21,94,181,.11), 0 0 70px rgba(0,122,255,.06); }
.portfolio-orbit::after { content:""; position:absolute; inset:20px; border-top:2px solid rgba(74,177,255,.5); border-radius:50%; transform:rotate(-14deg); filter:drop-shadow(0 0 8px rgba(0,145,255,.55)); }
.portfolio-kicker { margin:0 0 8px 8px; font-size:.78rem; letter-spacing:.42em; font-weight:700; color:#22cfff; }
.portfolio-intro h1 { margin:0; font-size:clamp(3.5rem,7.2vw,5rem); line-height:.98; letter-spacing:-.04em; font-weight:800; }
.portfolio-title-line { display:block; width:430px; max-width:44vw; height:5px; margin-top:12px; border-radius:999px; background:linear-gradient(90deg,#21cfff,#0b8dff); box-shadow:0 0 15px rgba(25,195,255,.22); }

.portfolio-browser { padding:0 0 30px; }
.category-tabs { display:grid; grid-template-columns:repeat(6,1fr); border-bottom:1px solid rgba(133,186,220,.3); }
.category-tab { position:relative; height:58px; border:0; background:transparent; color:#fff; font-weight:600; letter-spacing:.03em; cursor:pointer; }
.category-tab::after { content:""; position:absolute; left:18%; right:18%; bottom:-1px; height:3px; transform:scaleX(0); transition:.2s ease; background:#22cfff; }
.category-tab.active { color:#27d2ff; }
.category-tab.active::after { transform:scaleX(1); }
.portfolio-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:18px 0; }
.genre-filters { display:flex; flex-wrap:wrap; gap:8px; }
.genre-chip { border:1px solid rgba(89,160,204,.4); background:rgba(4,17,29,.78); color:#f4f8fb; padding:8px 14px; border-radius:4px; font-size:.77rem; cursor:pointer; }
.genre-chip:hover,.genre-chip.active { color:#fff; background:#079fe1; border-color:#20cfff; }
.portfolio-tools { display:flex; gap:12px; }
.portfolio-search { width:250px; height:38px; display:flex; align-items:center; gap:10px; padding:0 12px; border:1px solid rgba(49,115,158,.28); border-radius:4px; background:rgba(8,25,38,.86); }
.search-icon { width:15px; height:15px; border:2px solid #d6edf9; border-radius:50%; position:relative; flex:0 0 auto; }
.search-icon::after { content:""; position:absolute; width:7px; height:2px; right:-6px; bottom:-3px; background:#d6edf9; transform:rotate(45deg); transform-origin:left center; }
.portfolio-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#fff; font:inherit; font-size:.72rem; }
.portfolio-search input::placeholder { color:rgba(207,229,241,.54); }
.portfolio-sort select { height:38px; min-width:90px; border:1px solid rgba(64,126,168,.35); border-radius:4px; padding:0 30px 0 12px; background:#061522; color:#fff; font:inherit; font-size:.76rem; }

.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.portfolio-card { position:relative; height:226px; overflow:hidden; border:1px solid rgba(48,113,153,.43); border-radius:5px; background:#071522; isolation:isolate; }
.portfolio-card[hidden] { display:none; }
.portfolio-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease, filter .45s ease; }
.portfolio-card:hover img { transform:scale(1.035); filter:brightness(1.05); }
.portfolio-card-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(2,8,14,.14) 48%,rgba(1,7,12,.95) 100%); z-index:1; }
.portfolio-card-content { position:absolute; z-index:2; left:16px; right:64px; bottom:12px; }
.portfolio-card h2 { margin:0 0 10px; font-size:1.45rem; letter-spacing:-.035em; }
.card-tags { display:flex; flex-wrap:wrap; gap:8px; }
.card-tags span { min-width:54px; text-align:center; padding:6px 10px; border:1px solid rgba(130,187,220,.45); border-radius:4px; background:rgba(2,9,15,.54); color:#eaf7ff; font-size:.68rem; }
.card-arrow { position:absolute; z-index:3; right:14px; bottom:12px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.92); background:rgba(2,10,18,.28); color:#fff; font-size:1.4rem; cursor:pointer; transition:.2s ease; }
.card-arrow:hover { background:#13bfff; border-color:#13bfff; transform:translateX(2px); }
.portfolio-empty { text-align:center; margin:80px 0; color:rgba(225,239,248,.7); }
.pagination { display:flex; justify-content:center; align-items:center; gap:7px; padding:28px 0 0; }
.pagination button { width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:#fff; font-weight:600; cursor:pointer; }
.pagination button:first-child,.pagination button:last-child { border:1px solid rgba(222,182,157,.8); }
.pagination button.active { background:#09aeea; }
.pagination span { padding:0 6px; }

.portfolio-footer { background:#030b12; }
.portfolio-footer-inner { min-height:138px; display:grid; grid-template-columns:230px 1fr auto; grid-template-rows:auto auto; gap:10px 38px; align-items:center; padding-top:20px; padding-bottom:18px; }
.portfolio-footer .footer-logo { width:190px; }
.portfolio-footer-nav { justify-self:center; gap:50px; }
.portfolio-footer-nav a { font-size:.8rem; font-weight:600; }
.portfolio-social { justify-self:end; font-size:1.1rem; }
.portfolio-copyright { grid-column:1 / 3; color:rgba(219,234,243,.7); font-size:.61rem; }
.portfolio-footer-slogan { grid-column:3; margin:0; text-align:right; color:rgba(232,244,250,.82); font-size:.62rem; }

@media (max-width:1100px){
  .portfolio-header { width:calc(100% - 40px); grid-template-columns:auto 1fr auto auto; }
  .portfolio-header .header-cta { display:none; }
  .portfolio-nav { gap:20px; }
  .portfolio-controls { grid-template-columns:1fr; }
  .portfolio-tools { justify-content:flex-end; }
  .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .portfolio-container { width:min(100% - 36px,var(--portfolio-max)); }
  .portfolio-header { width:auto; padding:0 20px; grid-template-columns:auto 1fr auto auto; }
  .portfolio-nav { display:none; }
  .portfolio-nav.open { display:flex; }
  .lang-switch { justify-self:end; }
  .portfolio-menu-toggle { display:block; }
  .portfolio-intro { padding-top:34px; }
  .portfolio-kicker { font-size:.68rem; }
  .portfolio-title-line { width:54vw; }
  .category-tabs { overflow-x:auto; grid-template-columns:repeat(6,minmax(130px,1fr)); scrollbar-width:none; }
  .category-tabs::-webkit-scrollbar { display:none; }
  .portfolio-controls { gap:14px; }
  .genre-filters { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none; }
  .genre-filters::-webkit-scrollbar { display:none; }
  .genre-chip { flex:0 0 auto; }
  .portfolio-tools { display:grid; grid-template-columns:1fr 98px; }
  .portfolio-search { width:100%; }
  .portfolio-footer-inner { grid-template-columns:1fr auto; grid-template-rows:auto auto auto; }
  .portfolio-footer-nav { grid-column:1 / -1; justify-self:start; gap:24px; }
  .portfolio-copyright { grid-column:1; }
  .portfolio-footer-slogan { grid-column:2; }
}
@media (max-width:640px){
  .portfolio-header .brand-logo { width:160px; }
  .lang-switch { font-size:.66rem; }
  .portfolio-intro h1 { font-size:3rem; }
  .portfolio-kicker { letter-spacing:.25em; }
  .portfolio-title-line { width:72vw; height:4px; }
  .portfolio-grid { grid-template-columns:1fr; }
  .portfolio-card { height:215px; }
  .portfolio-tools { grid-template-columns:1fr; }
  .portfolio-sort select { width:100%; }
  .pagination { gap:2px; }
  .pagination button { width:31px; height:31px; font-size:.78rem; }
  .portfolio-footer-inner { grid-template-columns:1fr; gap:16px; }
  .portfolio-footer-nav { flex-wrap:wrap; gap:14px 24px; }
  .portfolio-social { justify-self:start; }
  .portfolio-copyright,.portfolio-footer-slogan { grid-column:1; text-align:left; }
}


/* 2026-10-01: support external-link arrow cards */
.card-arrow { display:grid; place-items:center; text-decoration:none; line-height:1; }


/* 2026-10-02: sync real portfolio project to mobile */
.portfolio-card--linked {
  cursor: pointer;
}

.portfolio-card--linked:focus-within {
  border-color: rgba(34, 207, 255, .8);
}

@media (max-width: 640px) {
  .portfolio-grid {
    gap: 14px;
  }

  .portfolio-card {
    height: 205px;
  }

  .portfolio-card--linked {
    min-height: 205px;
  }

  .portfolio-card--linked img {
    object-fit: cover;
    object-position: center center;
  }

  .portfolio-card-content {
    left: 14px;
    right: 58px;
    bottom: 12px;
  }

  .portfolio-card h2 {
    margin-bottom: 8px;
    font-size: 1.22rem;
    line-height: 1.25;
  }

  .card-tags {
    gap: 6px;
  }

  .card-tags span {
    min-width: 0;
    padding: 5px 9px;
    font-size: .65rem;
  }

  .card-arrow {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
  }
}

/* Make touch interaction clearer without changing desktop design. */
@media (hover: none) and (pointer: coarse) {
  .portfolio-card--linked:active {
    transform: scale(.995);
  }

  .portfolio-card--linked .card-arrow {
    background: rgba(19, 191, 255, .14);
    border-color: rgba(255,255,255,.96);
  }
}


/* 2026-10-02: short-form drama thumbnail replacement */
img[src*="portfolio-recipe-revenge-20261002.png"] {
  object-fit: cover;
  object-position: center center;
}


/* 2026-10-02: only two published portfolio items */
@media (min-width: 901px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
}

.pagination {
  padding-top: 24px;
}

.pagination button.active {
  cursor: default;
}


/* 2026-10-02: mobile sync for the 2-item portfolio */
@media (max-width: 900px) {
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 16px !important;
  }

  .pagination {
    justify-content: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 640px) {
  .portfolio-grid {
    gap: 14px !important;
  }

  .portfolio-card {
    height: 215px !important;
    min-height: 215px !important;
  }

  .portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .portfolio-card-content {
    left: 14px !important;
    right: 58px !important;
    bottom: 12px !important;
  }

  .portfolio-card h2 {
    font-size: 1.22rem !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
    word-break: keep-all;
  }

  .card-tags {
    gap: 6px !important;
    flex-wrap: wrap;
  }

  .card-tags span {
    padding: 5px 9px !important;
    font-size: .66rem !important;
  }

  .card-arrow {
    right: 12px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .pagination button {
    min-width: 38px;
    height: 38px;
  }
}

@media (max-width: 420px) {
  .portfolio-card {
    height: 200px !important;
    min-height: 200px !important;
  }

  .portfolio-card h2 {
    font-size: 1.1rem !important;
  }
}


/* 2026-10-13 v15: 3 x 3 portfolio layout, 9 works per page */
@media (min-width: 1101px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: none !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
  }

  .portfolio-card {
    height: 210px !important;
    min-height: 210px !important;
  }

  .portfolio-card h2 {
    font-size: 1.28rem !important;
  }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.portfolio-card.is-page-hidden {
  display: none !important;
}

.pagination[hidden] {
  display: none !important;
}


/* 2026-10-13 v36: PORTFOLIO side label */
.portfolio-title-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.portfolio-participation-label {
  display: inline-block;
  margin-bottom: .48rem;
  color: rgba(233, 246, 255, .7);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .portfolio-title-row {
    gap: 9px;
  }

  .portfolio-participation-label {
    margin-bottom: .3rem;
    font-size: .62rem;
    letter-spacing: .08em;
  }
}