* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  user-select: none;
  width: 100%;
  height: 100dvh;

  overflow-x: hidden;
  overflow-y: scroll;

  background: #ffffff;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

.install-area {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Pretendard",
    sans-serif;

  animation: pageFadeIn 2.4s ease;
}

/* 페이지 첫 등장 */
@keyframes pageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================
   화면 상단
========================= */

.top-bar {

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: 60px;

  background: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 12px;

  z-index: 9999;

}

.top-logo {

  width: 35px;

  filter:
    drop-shadow(0 0 0.2px #000)
    drop-shadow(0 0 0.2px #000);

  display: block;

}
.top-tabs {

  display: flex;

  gap: 20px;

}

.top-tab {
  border: none;
  background: transparent;

  padding: 0;

  width: 24px;
  height: 24px;

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

  color: #a7a7a7;

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;

      cursor:pointer;
}

.top-tab:hover {
  color: #111;
    transform:scale(1.08);
}

.top-tab:active {
  transform: scale(0.95);
}

.top-tab.active{
  color:#111;
}

/* =========================
   메인 화면
========================= */

/* 가운데 로고 높이 조정 height  */

.main-screen {
  width: 100%;
  min-height: 10dvh;
  display: flex;
  justify-content: center;


  padding: 10px;
  padding-top: 70px;
  padding-bottom: 50px;

}

/* 등장 상태 */
.main-screen.show {
  opacity: 1;
  transform: translateY(0);
}

.main-content {

  position: relative;

  z-index: 5;

  text-align: center;
  width: calc(100% - 1px);
  padding-bottom: 70px;
}

.main-logo {
  position: relative;
  top:-30px;
  width: 60px;

  margin-bottom: 20px;

  user-select: none;
  -webkit-user-drag: none;
/* 움직임 속도 */
  animation: floating 4s ease-in-out infinite;
}

/* 로고 효과*/
@keyframes floating {

  0% {
    transform: translateY(0px);
  }
/* 움직임 높이 폭 */
  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0px);
  }
}

.main-content p {
  font-size: 12px;
  line-height: 1.6;

  color: #777777;

  margin-bottom: 10px;
}

/* 시트 컨테이너 */

.sheet-container iframe {
  width: 100%;
  height: 200px;
  border: none;
}

/* 서비스 목록 */

.service-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.service-list iframe {

  width: 100%;

  max-width: 1000px;

  height: 75vh;

  border: none;

}


/* 버튼 */
.main-button {

  display: block;

  width: 220px;

  border: none;

  background: #111111;

  color: white;


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

  cursor: pointer;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

}

.main-button:active {
  transform: scale(0.96);
}

.main-button:hover {

  transform: translateY(-5px);




}

.button-group {

  width: 100%;

  display: flex !important;

  flex-direction: column !important;

  align-items: center;

  justify-content: center;

  gap: 14px;

}


/* 모바일 최적화 */
@media (max-width: 480px) {

  .logo {
    width: 62vw;
    max-width: 220px;
  }

  .main-content h1 {
    font-size: 42px;
  }

  .main-content p {
    font-size: 15px;
  }


}

/* =========================
    화면 하단
========================= */

.bottom-text {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  height: 45px;

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

  background: #ffffff;

  z-index: 9999;
}

.bottom-text span {
  font-size: 12px;
  color: #aaaaaa;
  letter-spacing: 0.3px;
}

/* 탭 본문 전체 여백 */
.main-content{
  padding:0 23px;
}

.memo-container,
#favoritePage,
#memoList,
#phraseList,
#logList,
#searchResults{
  padding:0;
}

/* =========================
    메모
========================= */

.sheet-container {
  max-width: 777px;
  margin: 0 auto;
}

.memo-input-row {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
}

.memo-single-row{
  display:grid;
  grid-template-columns:1fr auto;
}



.memo-input-row input {
  
  border: none;

  border-bottom:
    1px solid #f2f2f2;

  padding: 8px 4px;

  font-size: 12px;

  outline: none;

}

.memo-input-row input::placeholder {
  transition: opacity 0.15s ease;
}

.memo-input-row input:focus::placeholder {
  opacity: 0;
}

.memo-favorite {
  margin-left: 0px;
  vertical-align: middle;
  position: relative;
  top: 1px;
  border: none;
  background: transparent;

  color: #d8d8d8;

  cursor: pointer;

  padding: 0;


}


.memo-favorite:active {
  transform: scale(1.2);
}

.memo-favorite.active {
  color: #ffd43b;
  transform: none;
}


.memo-item {

  border-bottom:
    1px solid #f2f2f2;

  padding:
    8px 0;

  text-align: left;

}


.memo-main{
  font-size: 12px;
  line-height:1.5;
  color:#111;

  white-space:normal;
  word-break:break-word;
  gap:4px;

  margin-bottom:4px;
}

.memo-title{

  cursor:pointer;
}

.memo-title-input{

  width:100%;

  border:none;

  outline:none;

  background:transparent;

  font:inherit;

  color:inherit;

  padding:0;

}


.memo-content{
  color:#333;
}

.memo-dot{
  color:#999;
}

.memo-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;

  font-size:12px;
  color:#999;
}

.memo-date{
  margin-left:2px;
  font-size: 9px;
  color:#999;
}

.memo-favorite{
  margin:0;
}

.link-line{
  display:flex;
  align-items:center;
  gap:8px;
}

.link-line .memo-main{
  flex:1;
  margin-bottom:0;

  overflow:hidden;
  white-space:nowrap;
}

.link-line .memo-content{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.link-line .memo-meta{
  flex-shrink:0;
}

.link-copy{
  cursor:pointer;
}

.link-copy:hover{
  color:#111;
}


#memoPage {
  display: none;
}


#linkPage {
  display: none;
}

#logPage {
  display: none;
}

#phrasePage {
  display: none;
}


.phrase-box {

  width: 100%;
  border: none;

  border: none;

resize: none;
overflow: hidden;
  outline: none;

  padding: 8px 0;

  font-size: 12px;

  font-family:
    Pretendard,
    sans-serif;

  background: transparent;

}

.phrase-item {

  border-bottom:
    1px solid #f2f2f2;

  padding-bottom: 6px;

  margin-bottom: 0px;

}

.phrase-actions {

  display: flex;

  justify-content:flex-end;

  gap: 10px;

  margin-top: 0;

}

.phrase-actions button {

  border: none;

  background: transparent;

  cursor: pointer;

  font-size: 12px;

  padding: 0;

}


.icon-btn {

  border: none;
  background: transparent;

  cursor: pointer;

  color: #888;

  padding: 0;

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

  transition:
    transform 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;

}

.icon-btn:hover {

  color: #2f00ff;

}

.icon-btn:active {

  transform: scale(1.1);

}

#addMemoBtn,
#addLinkBtn,
#addPhraseBtn,
#addLogBtn {

  border:none;
  background:transparent;

  font-size:20px;
  font-weight:300;

  cursor:pointer;

  color:#555;
}

#toast {

  position: fixed;

  left: 50%;
  bottom: 80px;

  transform:
    translateX(-50%)
    translateY(20px);

  background: #111;

  color: #fff;

  font-size: 12px;

  padding: 8px 14px;

  border-radius: 999px;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

  z-index: 99999;

}

#toast.show {

  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);

}


.search-wrap {

  display:flex;

  align-items:center;

  gap:8px;

  margin-left:8px;

}

.search-divider {

  color:#d0d0d0;

  font-size:12px;

}

#searchInput {

  border:none;

  outline:none;

  background:transparent;

  width:130px;

  font-size:12px;

  font-family: Pretendard, sans-serif;

}

#searchInput::placeholder {

  color:#999;

}

#searchInput:focus::placeholder {

  opacity:0;

}


.search-group {

  margin-bottom:18px;

  text-align:left;

}

.search-title {

  font-size: 12px;

  margin-bottom:8px;

}

.search-item {

  border-bottom:1px solid #f2f2f2;

  padding:8px 0;

  font-size: 12px;

}

.search-sub {
  font-size: 12px;
  color: #777;
  margin-top: 3px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2줄만 표시 */
  overflow: hidden;
}

.search-item {

  cursor: pointer;

}

.search-item:hover,
.memo-item:hover,
.phrase-item:hover {

  background: #f5f5f5;

}

.log-title{

  flex:1;

  border:none;
  outline:none;
  padding:6px 0;

  font-size:12px;

  font-family:Pretendard,sans-serif;

  font-weight:450;
    background: transparent; /* 이 줄 추가 */

}

.log-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  
}

.log-header .log-title{
  flex:1;
}

.log-header .phrase-actions{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0;
  flex-shrink:0;
}


.memo-item,
.phrase-item {
  cursor: grab;
  transition:
    opacity .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.memo-item.dragging,
.phrase-item.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  cursor: grabbing;
}

.memo-item.drag-over,
.phrase-item.drag-over {
  box-shadow: inset 0 3px 0 #4f8cff;
}

.delete-confirm {
  color: #e53935 !important;
  font-size: 11px;
  font-weight: 600;
}

.search-highlight{
  color:#2563eb;
  font-weight:600;
}

.search-target {
  animation: searchFlash 1.5s ease;
}

@keyframes searchFlash {
  0%   { background: #fff3a0; }
  50%  { background: #ffe066; }
  100% { background: transparent; }
}