:root{
      --bg: #0b0f17;
      --bg2:#0f1626;
      --card:#121a2d;
      --card2:#0f182c;
      --line: rgba(255,255,255,.10);
      --text:#e9eef9;
      --muted: rgba(233,238,249,.70);
      --muted2: rgba(233,238,249,.52);
      --brand:#6ea8ff;
      --brand2:#8a7dff;
      --accent:#2dd4bf;
      --shadow: 0 18px 55px rgba(0,0,0,.35);
      --radius: 14px;
      --radius2: 18px;
      --container: 1240px;
      --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--font);
      background:
        radial-gradient(1200px 600px at 15% 5%, rgba(110,168,255,.16), transparent 60%),
        radial-gradient(900px 520px at 80% 12%, rgba(138,125,255,.14), transparent 62%),
        radial-gradient(900px 520px at 45% 95%, rgba(45,212,191,.10), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, #0a0e16 100%);
      color:var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a{color:inherit; text-decoration:none}
    button{font-family:inherit}
    .container{max-width:var(--container); margin:0 auto; padding:0 18px}

    /* ====== PC / MOBILE wrapper ====== */
    #pc{display:block}
    #mobile{display:none}

    /* ====== PC Header ====== */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(11,15,23,.86), rgba(11,15,23,.55));
      border-bottom:1px solid var(--line);
    }
    .topbar-inner{
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .logo{
      display:flex; align-items:center; gap:10px;
      font-weight:800; letter-spacing:.2px;
    }
    .logo-badge{
      width:38px; height:38px;
      border-radius:12px;
      background: linear-gradient(135deg, rgba(110,168,255,1), rgba(138,125,255,1));
      box-shadow: 0 14px 40px rgba(110,168,255,.18);
      position:relative;
      overflow:hidden;
    }
	.logo-badge:before{
	  content:"";
	  position:absolute;
	  inset:-70%; /* 면적 크게 */
	  
	  background: linear-gradient(
		90deg,
		transparent 30%,
		rgba(255,255,255,.85) 48%,  /* 밝기 크게 */
		rgba(255,255,255,1) 50%,   /* 중심 강조 */
		rgba(255,255,255,.85) 52%,
		transparent 70%
	  );

	  transform: rotate(25deg);
	  animation: sheen 2.2s linear infinite; /* 빠르게 */
	  filter: blur(4px); /* 퍼지는 광택 */
	}

	@keyframes sheen{
	  0%   { transform: translateX(-120%) rotate(25deg); }
	  100% { transform: translateX(120%) rotate(25deg); }
	}

    .nav{
      display:flex; align-items:center; gap:8px;
      padding:10px;
      border:1px solid var(--line);
      background: rgba(18,26,45,.55);
      border-radius:999px;
    }
    .nav a{
      padding:10px 12px;
      border-radius:999px;
      color:var(--muted);
      font-size:14px;
      transition:.18s ease;
    }
    .nav a:hover{
      color:var(--text);
      background: rgba(255,255,255,.06);
    }
    .nav a.active{
      color:var(--text);
      background: linear-gradient(135deg, rgba(110,168,255,.22), rgba(138,125,255,.18));
      border: 1px solid rgba(110,168,255,.22);
    }
    .auth{
      display:flex; align-items:center; gap:10px;
    }
    .btn{
      padding:10px 14px;
      border-radius:12px;
      border:1px solid var(--line);
      background: rgba(18,26,45,.55);
      color:var(--text);
      font-weight:650;
      font-size:14px;
      cursor:pointer;
      transition:.18s ease;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(18,26,45,.72)}
    .btn.primary{
      border:none;
      background: linear-gradient(135deg, rgba(110,168,255,1), rgba(138,125,255,1));
      box-shadow: 0 18px 45px rgba(110,168,255,.18);
    }
    .btn.primary:hover{filter: brightness(1.04)}

    /* ====== Title ====== */
    .page-head{
      padding:26px 0 10px;
    }
    .page-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:14px;
    }
    .page-title h1{
      margin:0;
      font-size:26px;
      letter-spacing:-.2px;
    }
    .page-title p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }
    .title-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(18,26,45,.50);
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }
    .title-dot{
      width:8px; height:8px; border-radius:999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(45,212,191,.10);
    }

    /* ====== Gallery Board ====== */
    .board-wrap{
      padding:14px 0 40px;
    }
    .board-card{
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(18,26,45,.62), rgba(18,26,45,.36));
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .board-toolbar{
      padding:16px 16px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-bottom:1px solid var(--line);
      background: rgba(15,22,38,.55);
    }
    .search{
      display:flex; gap:10px; align-items:center;
      width:min(520px, 100%);
    }
    .search input{
      width:100%;
      height:40px;
      padding:0 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,14,22,.55);
      color:var(--text);
      outline:none;
    }
    .search input:focus{
      border-color: rgba(110,168,255,.45);
      box-shadow: 0 0 0 4px rgba(110,168,255,.10);
    }
    .toolbar-right{
      display:flex; gap:10px; align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .btn.light{
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      color:var(--text);
    }

    .gallery{
      padding:16px;
      display:grid;
      grid-template-columns: repeat(5, 1fr); /* PC 기준 한줄 5개 */
      gap:14px;
    }

    .item{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(15,24,44,.35);
      border-radius: 14px;
      overflow:hidden;
      transition:.18s ease;
      min-height: 240px;
      display:flex;
      flex-direction:column;
    }
    .item:hover{
      transform: translateY(-3px);
      border-color: rgba(110,168,255,.30);
      box-shadow: 0 20px 55px rgba(0,0,0,.32);
    }
    .thumb{
      aspect-ratio: 4/3;
      width:100%;
      background:
        radial-gradient(220px 140px at 20% 20%, rgba(110,168,255,.22), transparent 65%),
        radial-gradient(240px 160px at 80% 25%, rgba(138,125,255,.20), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      position:relative;
      border-bottom:1px solid rgba(255,255,255,.10);
	  aspect-ratio: 4/3;   /* 원하는 고정 비율 (4:3, 1:1, 16:9 등 변경 가능) */
	  width:100%;
	  overflow:hidden;
	  position:relative;	  
    }
    .thumb:after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.35) 100%);
      opacity:.85;
    }
	.thumb img{
	  width:100%;
	  height:100%;
	  object-fit: cover;
	  display:block;
	}	
    .thumb .tag{
      position:absolute;
      left:10px; top:10px;
      z-index:1;
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.28);
      color: rgba(233,238,249,.86);
      backdrop-filter: blur(6px);
    }
    .thumb .num{
      position:absolute;
      right:10px; bottom:10px;
      z-index:1;
      font-weight:800;
      letter-spacing:.3px;
      color: rgba(233,238,249,.92);
    }

    .meta{
      padding:12px 12px 14px;
      display:flex;
      flex-direction:column;
      gap:8px;
      flex:1;
    }
    .meta .title{
      font-size:14px;
      font-weight:750;
      letter-spacing:-.2px;
      line-height:1.35;
      color: rgba(233,238,249,.95);
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
      min-height: 38px;
    }
    .meta .desc{
      font-size:12px;
      color: var(--muted2);
      line-height:1.45;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .meta .row{
      margin-top:auto;
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      font-size:12px;
      color: var(--muted);
    }

    .board-actions{
      padding:14px 16px 16px;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      border-top:1px solid var(--line);
      background: rgba(15,22,38,.55);
    }

    /* ====== Footer ====== */
    footer{
      border-top:1px solid var(--line);
      background: linear-gradient(180deg, rgba(15,22,38,.60), rgba(11,15,23,.82));
      padding:26px 0 16px;
    }
    .foot-top{
      display:grid;
      grid-template-columns: 1.2fr 1.6fr 1fr;
      gap:18px;
      align-items:start;
    }
    .foot-menu{
      display:flex; gap:14px; flex-wrap:wrap;
      color: var(--muted);
      font-size:13px;
    }
    .foot-menu a:hover{color:var(--text)}
    .foot-info{
      color: var(--muted);
      font-size:13px;
      line-height:1.7;
    }
    .kakao-cta{
      display:flex;
      justify-content:flex-end;
    }
    .kakao-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      transition:.18s ease;
      user-select:none;
      white-space:nowrap;
    }
    .kakao-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09)}
    .kakao-icon{
      width:34px; height:34px;
      border-radius: 12px;
      background: linear-gradient(135deg, #FEE500, #ffd34e);
      color:#1f1f1f;
      display:grid; place-items:center;
      font-weight:900;
    }
    .kakao-txt b{display:block; color:var(--text); font-size:13px}
    .kakao-txt span{display:block; color:var(--muted); font-size:12px; margin-top:2px}
    .copyright{
      margin-top:18px;
      padding-top:14px;
      border-top:1px solid var(--line);
      color: rgba(233,238,249,.55);
      font-size:12px;
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }

    /* ====== Mobile Header / Drawer ====== */
    .m-topbar{
      position:sticky;
      top:0;
      z-index:60;
      height:64px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:0 16px;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(11,15,23,.88), rgba(11,15,23,.62));
      border-bottom:1px solid var(--line);
    }
    .m-left{display:flex; align-items:center; gap:12px}
    .hamburger{
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      display:grid; place-items:center;
      transition:.18s ease;
    }
    .hamburger:hover{background: rgba(255,255,255,.09)}
    .hamburger .bars{
      width:18px; height:12px; position:relative;
    }
    .hamburger .bars:before,
    .hamburger .bars:after,
    .hamburger .bars span{
      content:"";
      position:absolute;
      left:0; right:0;
      height:2px;
      background: rgba(233,238,249,.92);
      border-radius:99px;
    }
    .hamburger .bars:before{top:0}
    .hamburger .bars span{top:5px}
    .hamburger .bars:after{bottom:0}

    .m-title{
      font-weight:850;
      letter-spacing:-.2px;
    }
    .m-actions{display:flex; gap:10px; align-items:center}
    .m-actions .mini{
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-weight:700;
      cursor:pointer;
    }

    .drawer-overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      opacity:0;
      pointer-events:none;
      transition: .22s ease;
      z-index:80;
    }
    .drawer{
      position:fixed;
      top:0; left:0;
      height:100%;
      width:min(86vw, 320px);
      background: linear-gradient(180deg, rgba(15,22,38,.98), rgba(11,15,23,.98));
      border-right:1px solid rgba(255,255,255,.10);
      transform: translateX(-102%);
      transition: .24s ease;
      z-index:90;
      padding:18px 16px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .drawer.open{transform: translateX(0)}
    .drawer-overlay.open{
      opacity:1;
      pointer-events:auto;
    }
    .drawer-head{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
    }
    .drawer-close{
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      color: var(--text);
      font-size:18px;
      line-height:1;
    }
    .drawer-nav{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .drawer-nav a{
      padding:12px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(233,238,249,.86);
      font-weight:700;
    }
    .drawer-nav a:hover{
      background: rgba(255,255,255,.07);
      border-color: rgba(110,168,255,.26);
    }
    .drawer-auth{
      margin-top:auto;
      display:flex;
      gap:10px;
    }
    .drawer-auth .btn{flex:1}

    /* ====== Responsive rules ====== */
    @media all and (max-width: 1100px){
      .nav{display:none} /* PC에서는 1100 이하부터 메뉴 줄어들 수 있어 숨김 (원하면 제거 가능) */
    }

    @media all and (max-width: 980px){
      /* 핵심 요구사항: 브라우저 가로 사이즈로 #pc/#mobile 전환 */
      #pc{display:none}
      #mobile{display:block}

      .page-title{
        flex-direction:column;
        align-items:flex-start;
      }
      .title-chip{margin-top:8px}
      .gallery{
        grid-template-columns: repeat(2, 1fr);
      }
      .foot-top{
        grid-template-columns: 1fr;
      }
      .kakao-cta{justify-content:flex-start}
    }

    @media all and (max-width: 420px){
      .gallery{
        grid-template-columns: 1fr;
      }
    }