body {
        margin: 0;
        font-family: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        background: #000;
        color: #fff;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .intro {
        text-align: center;
        width: 100%;
        max-width: 720px;
        padding: 20px;
    }

    .typing-text {
        font-size: 36px;
        font-weight: 600;
        line-height: 1.4;
        white-space: pre-line;
        min-height: 100px;
    }

    /* gradient animation */
    .gradient {
        background: linear-gradient(90deg, #6EE7F9, #A78BFA, #F472B6, #6EE7F9);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientMove 6s linear infinite;
    }

    @keyframes gradientMove {
        0% { background-position: 0% 50%; }
        100% { background-position: 100% 50%; }
    }

    .search-bar {
        margin-top: 40px;
        position: relative;
    }

    input {
        width: 100%;
        padding: 18px 26px;
        padding-right: 60px;
        border-radius: 30px;
        border: none;
        background: #111;
        color: #fff;
        font-size: 18px;
        box-sizing: border-box;
        outline: none;
    }

    input::placeholder {
        color: #777;
    }

    .search-bar button {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: #222;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-bar button:hover {
        background: #2c2c2c;
    }

    /* 결과 영역 */
    .results {
        display: none;
        margin-top: 50px;
        text-align: left;
        animation: fadeIn 0.35s ease forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .section-title {
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #9aa0a6;
        margin: 18px 0 10px;
    }

    /* 카드 프레임(기존 프레임 유지) */
    .card {
        background: #111;
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: inherit;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .card:hover {
        background: #141414;
        transform: translateY(-1px);
    }

    /* 이니셜 네모 → 앱 아이콘 이미지 */
    .app-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #1b1b1b;
        object-fit: cover;
        flex: 0 0 40px;
    }

    .card-info h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.1;
    }

    .card-info p {
        margin: 4px 0 0;
        font-size: 12px;
        color: #9aa0a6;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    }

    /* 카드 우측 버튼 영역 */
    .card-actions {
        margin-left: auto;
        display: flex;
        gap: 8px;
        flex: 0 0 auto;
        justify-content: flex-end;
        align-items: center;
    }

    .action-btn {
        position: static;
        transform: none;

        background: #1b1b1b;
        min-height: 34px;
        border: 1px solid #2a2a2a;
        color: #fff;
        font-size: 12px;
        padding: 7px 10px;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        user-select: none;
    }

    .action-btn:hover { background: #242424; }

    .action-btn svg {
        width: 14px;
        height: 14px;
        display: block;
    }

    /* 미리보기 모달 */
    .modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.62);
        padding: 20px;
        z-index: 9999;
    }
    .modal.open { display: flex; }

    .modal-panel {
        width: min(560px, 92vw);
        background: #0f0f0f;
        border: 1px solid #2a2a2a;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.55);
        display: flex;
        flex-direction: column;
        max-height: min(86vh, 860px);
    
    }
    .modal-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid #232323;
        background: #111;
    }
    .modal-head .mh-title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.15;
    }
    .modal-head .mh-sub {
        margin: 2px 0 0;
        font-size: 12px;
        color: #9aa0a6;
    }
    .modal-body {
        padding: 0;
        color: #e9eaee;
        font-size: 13px;
        line-height: 1.6;
        height: min(70vh, 760px);
        overflow: auto;
        background: #000;
    
    }

    .modal-iframe {
        width: 100%;
        height: 100%;
        border: 0;
        background: #000;
    }

    .modal-fallback {
        padding: 16px;
        color: #e9eaee;
        font-size: 13px;
        line-height: 1.6;
        white-space: pre-wrap;
    }
    .modal-foot {
        padding: 12px 16px;
        border-top: 1px solid #232323;
        background: #111;
        display: flex;
        justify-content: flex-end;
    }
    .modal-close {
        background: #1b1b1b;
        border: 1px solid #2a2a2a;
        color: #fff;
        font-size: 12px;
        padding: 8px 12px;
        border-radius: 10px;
        cursor: pointer;
    }
    .modal-close:hover { background: #242424; }


@media (max-width: 480px) {
  /* Mobile must be identical to PC row layout */
  .card{
    display:flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }
  /* left group (logo + title) keeps its PC spacing */
  .card-info{
    display:flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* right group (buttons) stays at the far right, on one row */
  .card-actions{
    margin-left: auto !important;
    display:flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .action-btn{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* prevent any mobile-only stacking rules */
  .portal-list, .section{
    overflow-x: hidden;
  }

}

.preview-shot{
        width:100%;
        height:100%;
        object-fit: contain;
        display:block;
        margin:0 auto;
        background:#000;
    }
    .preview-wrap{
        padding:0;
    }

.no-preview [data-action="preview"]{display:none;}

    /* 미리보기 로딩 오버레이 */
    .loading-overlay{
        position:absolute;
        inset:0;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(0,0,0,0.35);
        backdrop-filter: blur(2px);
    }
    .spinner{
        width:34px;
        height:34px;
        border-radius:50%;
        border:3px solid rgba(255,255,255,0.25);
        border-top-color: rgba(255,255,255,0.9);
        animation: spin 0.9s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .modal-body.preview-wrap{
        position:relative;
        min-height: 220px;
        background:#000;
    }
    

@media (max-width: 520px) {
  /* Mobile must be identical to PC row layout */
  .card{
    display:flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }
  .card-info{
    display:flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .card-actions{
    margin-left: auto !important;
    display:flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .action-btn{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: center;
  }
  .portal-list, .section{
    overflow-x: hidden;
  }
}


@media (min-width: 521px) {
  .card { flex-wrap: nowrap; }
  .card-info { flex: 1 1 auto; width: auto; }
  .card-actions { width: auto; margin-left: auto; }
  .action-btn { flex: 0 0 auto; justify-content: center; }
}


/* hide sub text */
#mhSub{display:none !important;}

/* === 결과 갱신 로딩 오버레이(검색어 변경 시) === */
.results{ position: relative; }
.results-loading{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 50;
  border-radius: 12px;
}
.results-loading.show{ display:flex; }
.rl-inner{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:10px;
}
.rl-text{
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2px;
}


/* 검색 키워드 표시 */
.brand-subtitle{
  margin-top: 1px;
  font-size: 13pt;
  color: #9aa0a6;
}


  .card-subtitle{font-size:13px;color:#9aa0a6;margin-top:4px;line-height:1.2;}

/* === 첫화면 바로가기 아이콘 === */
.quick-shortcuts{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:18px;
  flex-wrap:wrap;
}
.quick-shortcuts button{
  width:44px;
  height:44px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.quick-shortcuts button:hover{
  background: rgba(255,255,255,0.07);
}
.quick-shortcuts img{
  width:22px;
  height:22px;
}


/* 상단 텍스트 클릭: 처음으로 돌아가기 */
#typing{ cursor: pointer; }

/* === 편집 버튼 (우측 상단) === */
#editBtn{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 450;
  background: rgba(27,27,27,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
#editBtn:hover{ background: rgba(36,36,36,0.92); }

/* === 편집 모달 === */
#editorModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.62);
  padding: 20px;
  z-index: 100000;
}
#editorModal.open{ display:flex; }
.editor-panel{
  width: min(860px, 96vw);
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  max-height: min(86vh, 900px);
  display:flex;
  flex-direction: column;
}
.editor-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid #232323;
  background: #111;
}
.editor-title{
  font-size: 18px;
  font-weight: 700;
  margin:0;
}
.editor-tabs{
  margin-left: auto;
  display:flex;
  gap:0;
  padding: 3px;
  background:#0b0b0b;
  border:1px solid #2a2a2a;
  border-radius: 999px;
}
.editor-tab{
  background: transparent;
  border: 0;
  color:#cfcfd6;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor:pointer;
}
.editor-tab.active{
  background:#1b1b1b;
  color:#fff;
}
.editor-body{
  padding: 12px 14px 16px;
  overflow:auto;
}
.editor-section-title{
  font-size: 12px;
  color:#9aa0a6;
  margin: 10px 0 8px;
  letter-spacing: 0.2px;
}
.editor-list{
  display:flex;
  flex-direction: column;
  gap:10px;
}
.editor-item{
  display:grid;
  grid-template-columns: 160px 1fr 1fr 110px;
  gap: 10px;
  background:#111;
  border: 1px solid #232323;
  border-radius: 12px;
  padding: 10px;
  align-items:center;
}
.editor-item .ei-label{
  font-size: 12px;
  color:#e9eaee;
  font-weight: 600;
}
.ei-input{
  width: 100%;
  background:#0b0b0b;
  border:1px solid #2a2a2a;
  color:#fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  outline:none;
  box-sizing:border-box;
}
.ei-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.ei-btn{
  background:#1b1b1b;
  border:1px solid #2a2a2a;
  color:#fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
}
.ei-btn:hover{ background:#242424; }

/* editor icon preview */
.ei-icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background:#1b1b1b;
  border: 1px solid rgba(255,255,255,0.08);
  object-fit: cover;
  flex: 0 0 32px;
}
.ei-label-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
/* purple gradient save button */
#saveConfig{
  border: 0;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color:#fff;
  font-weight: 700;
}
#saveConfig:hover{
  filter: brightness(1.05);
}

.editor-foot{
  padding: 12px 14px;
  border-top: 1px solid #232323;
  background:#111;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
}
.editor-note{
  font-size: 12px;
  color:#9aa0a6;
}
.editor-foot .right{
  display:flex;
  gap:8px;
  align-items:center;
}
@media (max-width: 680px){
  .editor-item{ grid-template-columns: 1fr; }
}

.copyright {
            position: fixed;
            bottom: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            z-index: 300; /* 최상단 유지 */
            letter-spacing: 0.5px;
        }
        .copyright a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-weight: 600;
            pointer-events: auto; /* 클릭 가능하게 설정 */
        }
        .copyright a:hover {
            text-decoration: underline;
        }
.search-bar button svg{
  width: 18px;
  height: 18px;
  color: #ffffff; /* 단색 아이콘 */
}

/* ===== Idle Clock Screen ===== */
#idleScreen{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
}
#idleScreen.show{ display: flex; }
#idleScreen .idle-wrap{
  width: min(920px, 92vw);
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#idleScreen .idle-date{
  color: rgba(255,255,255,0.72);
  font-size: 24px;
  letter-spacing: 0.02em;
}
#idleScreen .idle-time{
  color: rgba(255,255,255,0.92);
  font-size: clamp(64px, 15vw, 200px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-family: "Space Grotesk", "Roboto", "Noto Sans KR", system-ui, -apple-system, Segoe UI, sans-serif;
}
#idleScreen .idle-hint{
  margin-top: 10px;
  color: #9aa0a6;
  font-size: 16px; /* 12pt */
}