*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#f7f8fc;
  color:#17191e;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans KR",
    Arial,
    sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}


/* =========================
   HEADER
========================= */

header{
  position:sticky;
  top:0;
  z-index:1000;

  height:62px;
  padding:0 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;

  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border-bottom:1px solid #e5e7ed;
}

.logo{
  display:flex;
  align-items:center;
  gap:6px;

  font-size:19px;
  font-weight:900;
  letter-spacing:-1px;

  white-space:nowrap;
}

.logoForm{
  color:#2867e8;
}

.logoWheel{
  color:#333;
}

.logoIcon{
  width:26px;
  height:26px;

  border:4px solid #2867e8;
  border-radius:50%;

  position:relative;
}

.logoIcon::before{
  content:"";

  position:absolute;

  width:5px;
  height:5px;

  background:#2867e8;
  border-radius:50%;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);
}

.logoIcon::after{
  content:"";

  position:absolute;

  width:12px;
  height:3px;

  background:#2867e8;
  border-radius:5px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%) rotate(45deg);
}


/* NAV */

nav{
  display:flex;
  align-items:center;
  gap:3px;
}

nav a,
.navButton{
  border:0;
  background:transparent;

  padding:8px 10px;

  border-radius:8px;

  color:#676b74;

  font-size:11px;
  font-weight:800;

  cursor:pointer;
}

nav a:hover,
.navButton:hover{
  background:#f0f2f6;
  color:#111;
}


/* =========================
   MAIN
========================= */

main{
  width:min(1180px,calc(100% - 30px));
  margin:0 auto;

  padding:38px 0 60px;
}


/* =========================
   HERO
========================= */

.hero{
  text-align:center;

  padding:10px 0 30px;
}

.heroBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 10px;

  background:#eaf1ff;
  color:#2867e8;

  border-radius:999px;

  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
}

.heroDot{
  width:5px;
  height:5px;

  background:#2867e8;
  border-radius:50%;
}

.hero h1{
  margin:14px 0 8px;

  font-size:clamp(44px,7vw,70px);
  line-height:1;

  letter-spacing:-4px;
  font-weight:950;

  background:
    linear-gradient(
      120deg,
      #2867e8,
      #17191e 50%,
      #7c3aed
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.hero h2{
  margin:0;

  font-size:clamp(21px,3vw,31px);
  line-height:1.3;

  letter-spacing:-1.5px;
}

.hero p{
  max-width:580px;

  margin:12px auto 0;

  color:#777b84;

  font-size:12px;
  line-height:1.7;
}

.heroButtons{
  display:flex;
  justify-content:center;
  gap:7px;

  margin-top:17px;
}

.heroButton{
  height:38px;

  padding:0 15px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:9px;

  font-size:10px;
  font-weight:850;
}

.heroButton.primary{
  background:#15171c;
  color:#fff;
}

.heroButton.secondary{
  background:#fff;

  border:1px solid #dfe2e9;

  color:#2867e8;
}


/* =========================
   TOOLBAR
========================= */

.toolbar{
  display:flex;
  align-items:center;
  gap:7px;

  margin-bottom:9px;
}

.searchBox{
  flex:1;

  height:37px;

  padding:0 12px;

  border:1px solid #dfe2e8;
  border-radius:9px;

  background:#fff;

  outline:none;

  font-size:11px;
}

.searchBox:focus{
  border-color:#9eb8ed;
}

.categoryButtons{
  display:flex;
  gap:4px;
}

.filterButton{
  height:35px;

  padding:0 10px;

  border:1px solid #dfe2e8;
  border-radius:8px;

  background:#fff;

  color:#70747c;

  font-size:12px;
  font-weight:800;

  cursor:pointer;
}

.filterButton:hover{
  background:#f0f2f6;
}

.filterButton.active{
  background:#15171c;
  border-color:#15171c;
  color:#fff;
}


/* =========================
   SUB TOOLBAR
========================= */

.subToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin:0 2px 9px;
}

.resultText{
  color:#858992;
  font-size:12px;
}

.resultText strong{
  color:#333;
}

.sortSelect{
  height:28px;

  padding:0 7px;

  border:1px solid #dfe2e8;
  border-radius:7px;

  background:#fff;

  color:#666;

  font-size:12px;
}


/* =========================
   CARDS
========================= */

.cards{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:8px;
}

.card{
  min-width:0;

  position:relative;

  padding:12px;

  background:#fff;

  border:1px solid #e4e6ec;
  border-radius:11px;

  transition:
    transform .15s,
    box-shadow .15s,
    border-color .15s;
}

.card:hover{
  transform:translateY(-2px);

  border-color:#d3d7df;

  box-shadow:
    0 8px 20px rgba(20,25,40,.07);
}


/* NEW */

.newBadge{
  position:absolute;

  right:9px;
  top:9px;

  padding:3px 5px;

  border-radius:5px;

  background:#eaf1ff;
  color:#2867e8;

  font-size:12px;
  font-weight:900;
}


/* CARD TOP */

.cardTop{
  display:flex;
  align-items:center;

  gap:8px;

  min-width:0;
}

.icon{
  width:33px;
  height:33px;

  flex:0 0 33px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:8px;

  background:var(--soft);

  font-size:16px;
}

.cardTitle{
  min-width:0;
}

.cardTitle h3{
  margin:0;

  font-size:13px;
  font-weight:900;

  letter-spacing:-.3px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cardCategory{
  margin-top:2px;

  color:#92969e;

  font-size:12px;
  font-weight:800;
}


/* DESCRIPTION */

.description{
  height:28px;

  margin:8px 0 8px;

  color:#777b84;

  font-size:12px;
  line-height:1.45;

  overflow:hidden;
}


/* INFO */

.info{
  display:flex;
  flex-wrap:wrap;
  gap:4px;

  margin-bottom:8px;
}

.tag{
  padding:3px 5px;

  border-radius:5px;

  background:#f3f4f7;

  color:#737780;

  font-size:12px;
  font-weight:800;
}

.tag.online{
  background:#eef9f2;
  color:#20864a;
}

.tag.offline{
  background:#f1f2f4;
  color:#737780;
}

.tag.difficulty{
  background:#fff7e8;
  color:#a66a00;
}


/* BUTTON */

.cardBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:5px;
}

.openButton{
  height:25px;

  padding:0 8px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:6px;

  background:#15171c;
  color:#fff;

  font-size:12px;
  font-weight:850;
}

.openButton:hover{
  background:#2867e8;
}

.linkWarning{
  color:#b1b4bb;
  font-size:12px;
}


/* COLORS */

.blue{
  --soft:#eaf1ff;
}

.purple{
  --soft:#f1ebff;
}

.orange{
  --soft:#fff1e7;
}

.red{
  --soft:#ffeded;
}

.green{
  --soft:#eaf8ef;
}

.cyan{
  --soft:#e9f8fb;
}

.pink{
  --soft:#fff0f6;
}

.gray{
  --soft:#f0f1f4;
}

.indigo{
  --soft:#efefff;
}


/* EMPTY */

.empty{
  display:none;

  padding:40px 15px;

  text-align:center;

  color:#999da5;

  font-size:11px;
}

.empty.show{
  display:block;
}


/* =========================
   FEATURES
========================= */

.features{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:8px;

  margin-top:28px;
}

.feature{
  padding:12px;

  background:#fff;

  border:1px solid #e6e8ed;
  border-radius:10px;
}

.featureIcon{
  font-size:15px;
  margin-bottom:5px;
}

.feature strong{
  display:block;

  margin-bottom:3px;

  font-size:10px;
}

.feature span{
  color:#858991;

  font-size:12px;
  line-height:1.5;
}


/* =========================
   FOOTER
========================= */

footer{
  border-top:1px solid #e6e8ed;

  padding:22px 15px 30px;

  text-align:center;

  color:#a0a3aa;

  font-size:12px;
}

.footerLogo{
  margin-bottom:3px;

  color:#777b83;

  font-size:10px;
  font-weight:900;
}


/* =========================
   MOBILE
========================= */

@media(max-width:950px){

  .cards{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media(max-width:700px){

  header{
    min-height:58px;

    padding:8px 12px;
  }

  .logo{
    font-size:16px;
  }

  .logoIcon{
    width:22px;
    height:22px;

    border-width:3px;
  }

  nav{
    overflow-x:auto;

    scrollbar-width:none;
  }

  nav::-webkit-scrollbar{
    display:none;
  }

  nav a{
    padding:6px 6px;

    font-size:12px;

    white-space:nowrap;
  }

  main{
    width:min(100% - 20px,600px);

    padding-top:27px;
  }

  .heroButtons{
    flex-direction:column;
  }

  .heroButton{
    width:100%;
  }

  .toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .categoryButtons{
    width:100%;
  }

  .filterButton{
    flex:1;
  }

  .cards{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:6px;
  }

  .card{
    padding:10px;
  }

  .description{
    font-size:12px;
  }

  .features{
    grid-template-columns:1fr;
  }

}


@media(max-width:430px){

  .cards{
    grid-template-columns:1fr;
  }

  .card{
    min-height:0;
  }

  .description{
    height:auto;
    max-height:28px;
  }

}


/* =========================
   REDUCED MOTION
========================= */

@media(prefers-reduced-motion:reduce){

  *{
    scroll-behavior:auto !important;
    transition:none !important;
  }

}
@media(max-width:600px){
 .project-card p,.project-desc,.description{font-size:13px!important;line-height:1.6!important}
 .tag,.badge,.project-tag,.project-meta span{font-size:12px!important}
 button,a.open-btn,.open-button,.card-open{min-height:44px;font-size:13px!important}
}

.detailFilters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.detailFilters label{display:flex;align-items:center;gap:6px;font-size:12px;color:#676b74;font-weight:700}
.detailFilters select{font:inherit;height:36px;max-width:100%;padding:0 8px;border:1px solid #dfe2e8;border-radius:8px;background:#fff;color:#333}
.categoryButtons{flex-wrap:wrap}
.thumbnailFallback{display:flex;align-items:center;justify-content:center;aspect-ratio:1200/630;background:var(--soft);border-radius:12px;margin-bottom:14px;font-size:26px;font-weight:850}
@media(max-width:700px){.detailFilters label{flex:1 1 140px}.detailFilters select{flex:1;min-width:0}.detailFilters button{flex:1 1 100%}.searchBox{flex:auto;width:100%;min-height:44px}}

/* Image and description have separate rows: no text obscures the artwork. */
.fw-card-thumbnail{display:flex;flex-direction:column;overflow:hidden;border-radius:12px;margin-bottom:10px;background:#24375c;aspect-ratio:auto}
.fw-card-thumbnail img{position:static;display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;flex:none}
.fw-thumbnail-description{position:static;display:block;-webkit-line-clamp:unset;-webkit-box-orient:initial;overflow:visible;overflow-wrap:anywhere;box-sizing:border-box;padding:9px 11px;background:#24375c;color:#fff;font-size:13px;font-weight:700;line-height:1.45;text-shadow:none;min-height:57px;height:auto;max-height:none}
@media(max-width:600px){.fw-thumbnail-description{font-size:12px;padding:8px 9px;min-height:52px}}

/* Compact estimated development maturity meter */
.fw-maturity{margin:8px 0 9px;min-width:0}.fw-maturity-caption{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:4px;font-size:10px;line-height:1.3;color:inherit}.fw-maturity-caption small{font-size:9px;opacity:.8}.fw-maturity-caption strong{font-size:10px;font-variant-numeric:tabular-nums}.fw-maturity-track{height:5px;border-radius:99px;background:rgba(123,133,156,.27);overflow:hidden}.fw-maturity-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#468ddd,#24b8a4);transition:width .25s ease}body[data-fw-global-theme] .fw-maturity-caption{color:var(--fw-theme-text)!important}body[data-fw-global-theme] .fw-maturity-fill{background:var(--fw-theme-accent,#69d6ce)}

/* Sort direction toggle: touch friendly and compact */
.subToolbar .sortDirectionButton{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;padding:0 8px;border:1px solid #dfe2e8;border-radius:7px;background:#fff;color:#253251;font-size:17px;font-weight:800;cursor:pointer;flex-shrink:0}.subToolbar .sortDirectionButton:hover{background:#f1f4fc}.subToolbar .sortDirectionButton:focus-visible{outline:3px solid #6086df;outline-offset:2px}body[data-fw-global-theme] .subToolbar .sortDirectionButton{background:var(--fw-theme-surface,#fff);color:var(--fw-theme-text,#253251);border-color:var(--fw-theme-accent,#6086df)}