:root{
  --bg:#0b0b0e;
  --panel:#0f0f14;
  --text:#f0f0f5;
  --muted:#a7a7b2;
  --border:rgba(255,255,255,.10);
  --blue:#1d4ed8;
  --bubble:#1b1b22;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
a{ color: inherit; text-decoration: none; }

.topbar{
  position: sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 10px;
  background: rgba(11,11,14,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.title{ font-weight:700; letter-spacing:.02em; }
.topbar__right{ display:flex; gap: 8px; }

.iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 18px;
}
.resetMenu__icon{
  width: 22px;
  height: 22px;
  color: rgba(240,240,245,.7);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page{
  max-width: 1120px; /* PC: ゆったりした横幅にして列数が増える余地を確保 */
  margin: 0 auto;
  padding: 18px 18px 36px; /* PC: 余白多め */
}

.profile{ padding: 8px 2px 14px; }
.profile__row{ display:flex; gap: 14px; align-items:center; }

.avatar{
  width: 76px; height: 76px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,108,0,.55), rgba(187,0,255,.55));
  border: 1px solid rgba(255,255,255,.15);
}
.miniavatar{
  width: 34px; height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,108,0,.55), rgba(187,0,255,.55));
  border: 1px solid rgba(255,255,255,.15);
}

.stats{
  flex:1;
  display:flex;
  justify-content: space-around;
  gap: 10px;
}
.stat{ text-align:center; }
.stat .n{ font-weight:800; font-size: 18px; }
.stat .k{ color: var(--muted); font-size: 12px; margin-top:2px; }

.profile__name{ margin-top: 10px; font-weight:800; }
.profile__bio{ color: var(--muted); font-size: 13px; margin-top: 4px; }

.actions{ display:flex; gap: 12px; margin-top: 12px; }
.btn{
  flex:1;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 650;
  text-align:center;
  cursor: pointer;
}
.btn.primary{
  background: rgba(29,78,216,.85);
  border-color: rgba(29,78,216,.9);
}
.btn.icon{ max-width: 54px; flex:0 0 54px; }

/* follow state */
.btn.is-following{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

.tabs{
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 10px;
  justify-content: center;
  gap: 0;
}
.tab{
  flex: 0 0 auto;
  min-width: 80px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  color: rgba(240,240,245,.4);
  cursor: pointer;
  font-size: 16px;
  position: relative;
  transition: color 0.2s;
}
.tab svg{
  display: block;
  margin: 0 auto;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.tab:hover{
  color: rgba(240,240,245,.6);
}
.tab:hover svg{
  opacity: 0.7;
}
.tab.is-active{
  color: var(--text);
}
.tab.is-active svg{
  opacity: 1;
}
.tab.is-active::after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--text);
}

.notice{
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 10px;
  padding: 8px 10px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notice__link{
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  transition: background 0.2s;
}

.notice__link:hover{
  background: rgba(255,255,255,.10);
}

/* new post toast */
.newPostToast{
  position: fixed;
  right: 12px;
  top: 58px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(15,15,20,.97);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(240,240,245,.9);
  font-size: 13px;
  z-index: 30;
  animation: toastSlideIn .35s ease-out;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.newPostToast__avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}
.newPostToast__text{
  white-space: nowrap;
  font-weight: 600;
}

/* LINE notification toast */
.lineToast{
  position: fixed;
  right: 12px;
  top: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(15,15,20,.97);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(240,240,245,.9);
  font-size: 13px;
  z-index: 30;
  animation: toastSlideIn .35s ease-out;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .3s, transform .3s;
}
.lineToast__icon{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.lineToast__icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lineToast__body{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lineToast__app{
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.lineToast__msg{
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.grid{
  display:grid;
  /* PC: 画面幅に応じて列数を自動調整、最小幅の設定を入れる */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  padding: 0;
  max-width: 1120px;
  margin: 0 auto;
}
.tile{ padding:0; border:0; background: #000; cursor:pointer; position: relative; }
.tile img{ width:100%; aspect-ratio: 4 / 5; object-fit: cover; display:block; }
.tile.hidden{ display:none; } /* hidden 忘れない */

/* NEW badge */
.tile.is-new::after{
  content: "NEW";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(240,240,245,.15);
  color: rgba(240,240,245,.8);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  pointer-events: none;
}

/* viewer */
.modal{ position: fixed; inset:0; display:none; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.72); }
.viewer{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(800px, 94vw);
  border-radius: 18px;
  overflow:hidden;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 70px rgba(0,0,0,.7);
}
.viewer__top{
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.viewer__user{ display:flex; align-items:center; gap: 10px; }
.uname{ font-weight: 800; }
.sub{ font-size: 12px; color: var(--muted); margin-top:2px; }
.uname.inline{ margin-right: 8px; }
.viewer__img{ width:100%; max-height: 75vh; object-fit: contain; display:block; background: #000; }
.viewer__body{ padding: 12px 14px 16px; }
.captionline{ line-height: 1.7; font-size: 14px; }
.meta{ margin-top: 10px; font-size: 12px; color: var(--muted); }

/* search */
.searchbox{
  display:flex;
  gap: 10px;
  margin-top: 6px;
}
.searchbox__input{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
}
.searchbox__btn{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(29,78,216,.65);
  background: rgba(29,78,216,.85);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.chips{ display:flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  font-weight: 650;
}
.h2{ margin: 14px 0 10px; font-size: 14px; color: var(--muted); font-weight: 800; letter-spacing:.06em; }
.hint{ color: rgba(240,240,245,.55); font-size: 12px; margin-top: 12px; }

/* DM screen like screenshot */
body.dmPage{ min-height: 100svh; padding-bottom: 86px; }

.dmMain{
  min-height: calc(100svh - 58px - 86px);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  padding: 18px 12px;
}

.dmMain.has-messages{
  justify-content: flex-start;
  padding: 0;
}

.dmCard{
  text-align:center;
  max-width: 520px;
  width: 100%;
}

.dmMain.has-messages .dmCard{
  max-width: 760px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dmCard__avatar{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  margin: 10px auto 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,108,0,.55), rgba(187,0,255,.55));
  border: 1px solid rgba(255,255,255,.15);
}
.dmCard__name{ font-size: 22px; font-weight: 900; }
.dmCard__id{ margin-top: 6px; color: rgba(240,240,245,.75); font-weight: 700; margin-bottom: 16px; }
.dmCard__meta{ margin-top: 10px; color: rgba(240,240,245,.6); font-size: 13px; }
.dmCard__btn{
  display: inline-block;
  margin-top: 12px;
  width: min(320px, 86%);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(240,240,245,.8);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.dmCard__btn:hover{
  background: rgba(255,255,255,.09);
}

.dmInvite{
  position: fixed;
  left: 0; right: 0;
  bottom: 72px;
  margin: 0 auto;
  max-width: 760px;
  padding: 12px 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  color: rgba(240,240,245,.85);
}
.dmInvite__icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.dmInvite__title{ font-weight: 900; font-size: 13px; }
.dmInvite__sub{ margin-top: 4px; color: rgba(240,240,245,.6); font-size: 12px; line-height: 1.4; }

.dmThread{
  max-width: 760px;
  width: 100%;
  padding: 16px 12px 80px;
  display: none;
  flex-direction: column;
  gap: 12px;
}

.dmMain.has-messages .dmThread{
  display: flex;
}

.dmMsg{
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.dmMsg--sent{
  align-self: flex-end;
  align-items: flex-end;
}

.dmMsg__bubble{
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(29,78,216,.85);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.dmMsg__time{
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  padding: 0 4px;
}

.dmComposer{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom:0;
  max-width: 760px;
  width: 100%;
  display:flex;
  gap: 10px;
  padding: 12px 12px;
  background: rgba(11,11,14,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.dmComposer__input{
  flex:1;
  padding: 12px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
}
.dmComposer__send{
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.65);
  background: rgba(29,78,216,.85);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.dmComposer__send:disabled,
.dmComposer__input:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* tags in viewer */
.tagrow{ margin-top: 10px; display:flex; flex-wrap: wrap; gap: 8px; }
.tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(240,240,245,.92);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.tag:before{ content:"#"; opacity:.7; margin-right: 2px; }
.tag:hover{ background: rgba(255,255,255,.06); }

/* locked tiles in search results */
.tile.is-locked{
  cursor: not-allowed;
  filter: grayscale(1) brightness(.55);
  position: relative;
}
.tile.is-locked::after{
  content: "🔒";
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 18px;
  opacity: .9;
}

/* ===== IG-like search results ===== */
.page.is-search{
  max-width: none;
  padding: 12px 0 24px;
}
.searchTop{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(11,11,14,.85);
  backdrop-filter: blur(10px);
}
.searchTop__back{
  flex: 0 0 auto;
}
.searchTop__bar{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.searchTop__bar span{
  color: rgba(240,240,245,.92);
  font-weight: 800;
}
.searchTop__bar small{
  color: rgba(240,240,245,.55);
  font-weight: 700;
}
.searchTop__menu{
  flex: 0 0 auto;
}

.catTabs{
  display:flex;
  gap: 16px;
  padding: 10px 12px 0;
  overflow:auto;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.catTab{
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(240,240,245,.55);
  font-weight: 800;
  padding: 10px 2px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.catTab.is-active{
  color: rgba(240,240,245,.92);
  box-shadow: inset 0 -2px 0 rgba(240,240,245,.75);
}

.searchMeta{
  padding: 10px 12px 10px;
  color: rgba(240,240,245,.6);
  font-size: 12px;
}
.grid.fullbleed{
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

/* reset menu */
.resetMenu{
  position: relative;
}
.resetMenu__btn{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.resetMenu__panel{
  position: absolute;
  right: 0;
  top: 46px;
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(15,15,20,.98);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: none;
}
.resetMenu.is-open .resetMenu__panel{
  display: block;
}
.resetMenu__item{
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(240,240,245,.9);
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.resetMenu__item:hover{
  background: rgba(255,255,255,.06);
}

/* floating message icon */
.msgfab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  color: var(--text);
  text-decoration: none;
  z-index: 20;
  overflow: hidden;
}
.msgfab img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msgfab.has-update{
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.24);
}
.msgfab__icon{
  color: rgba(240,240,245,.7);
}

/* tabler icons webfont baseline (avoid overrides if already defined elsewhere) */
.ti{
  font-size: 28px;
  line-height: 1;
  display: inline-block;
}

/* ===== Mobile (<=768px) ===== */
@media (max-width: 768px){
  .page{
    max-width: 100%; /* Mobile: 全幅 */
    padding: 12px 10px 24px; /* Mobile: タップ前提の余白 */
  }

  .grid{
    /* Mobile: 3列固定（本家Instagramに合わせる） */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    padding: 0;
    max-width: 100%;
  }

  .profile__row{ gap: 12px; }
  .avatar{ width: 64px; height: 64px; }
  .stats{ gap: 6px; }
  .stats{ display:flex; gap: 10px; } /* Mobile: 1行に収める */
  .stat .n{ font-size: 12px; }
  .stat .k{
    display:block;
    font-size: 9px;
    opacity: .55;
  } /* Mobile: 控えめなラベル */
  .profile__bio{ display:none; } /* Mobile: 画像中心 */

  .actions{ gap: 8px; }
  .btn{ padding: 14px 12px; } /* Mobile: タップしやすく */

  /* Mobile: hover前提の表現を弱める */
  .tab:hover{ color: rgba(240,240,245,.4); }
  .tab:hover svg{ opacity: 0.5; }
  .notice__link:hover{ background: rgba(255,255,255,.06); }
  .dmCard__btn:hover{ background: rgba(255,255,255,.05); }
  .tag:hover{ background: rgba(255,255,255,.03); }
}

/* ===== Responsive Columns (段階的レスポンシブ) ===== */
/* PCはauto-fillで可変式にしたため、ここでのPC向け固定列幅設定は削除します。スマホ向けの2列固定は上の @media (max-width: 768px) で維持されています。 */

/* reset confirm modal */
.resetConfirm{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(340px, 88vw);
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 70px rgba(0,0,0,.7);
  text-align: center;
  padding: 28px 24px 20px;
}
.resetConfirm__msg{
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.resetConfirm__msg small{
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}
.resetConfirm__actions{
  display: flex;
  gap: 10px;
}
.resetConfirm__btn{
  flex: 1;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.resetConfirm__btn--cancel{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.resetConfirm__btn--cancel:hover{
  background: rgba(255,255,255,.10);
}
.resetConfirm__btn--ok{
  background: rgba(220,38,38,.75);
  border-color: rgba(220,38,38,.85);
  color: #fff;
}
.resetConfirm__btn--ok:hover{
  background: rgba(220,38,38,.9);
}