/* 자동 생성: src/styles/의 파일을 수정하세요. */

/* ===== src/styles/01.css ===== */
/* 디자인 원본 1. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */

  :root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    --phone-w: 393px;
    --phone-h: 852px;
    --ios-blue: #0a84ff;
  }
  * { box-sizing: border-box; }
  html, body { width:100%; height:100%; margin:0; overflow:hidden; }
  body {
    display:grid;
    place-items:center;
    background:#0b0c0f;
    user-select:none;
    -webkit-user-select:none;
    overscroll-behavior:none;
    -webkit-tap-highlight-color:transparent;
  }
  button { font:inherit; border:0; padding:0; color:inherit; background:none; -webkit-tap-highlight-color:transparent; }

  .device-shell {
    width:411px;
    height:870px;
    padding:9px;
    border-radius:58px;
    background:linear-gradient(145deg,#3d4044,#111215 44%,#292b2f);
    box-shadow:0 30px 100px rgba(0,0,0,.64), inset 0 0 0 1px rgba(255,255,255,.15);
    position:relative;
    transform-origin:center;
  }
  .device {
    position:relative;
    width:var(--phone-w);
    height:var(--phone-h);
    overflow:hidden;
    border-radius:50px;
    background:#050609;
    isolation:isolate;
  }
  @media (max-width:520px) {
    html, body {
      width:100%;
      height:100%;
      min-height:100%;
      overflow:hidden;
      background:#050609;
    }
    body {
      display:block;
      min-height:100dvh;
    }
    .device-shell {
      position:fixed;
      left:0;
      top:0;
      width:var(--phone-w);
      height:var(--mobile-ui-h, var(--phone-h));
      padding:0;
      border-radius:0;
      background:none;
      box-shadow:none;
      transform:scale(var(--mobile-scale,1));
      transform-origin:top left;
      will-change:transform;
    }
    .device {
      width:var(--phone-w);
      height:100%;
      min-height:0;
      border-radius:0;
    }
  }

  .home {
    position:absolute;
    inset:0;
    overflow:hidden;
    background-image:url("assets/editable/other/media-147.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transform:scale(1);
    filter:none;
    transition:transform .42s cubic-bezier(.2,.75,.18,1), filter .42s ease;
    z-index:1;
  }
  .home-art {
    position:absolute;
    left:0;
    right:0;
    z-index:1;
    pointer-events:none;
    background-repeat:no-repeat;
    background-size:100% 100%;
  }
  .home-art-top {
    top:0;
    height:304px;
    background-image:url("assets/editable/other/media-148.webp");
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%);
  }
  .home-art-bottom {
    bottom:0;
    height:222px;
    background-image:url("assets/editable/other/media-149.webp");
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 21%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 21%,#000 100%);
  }
  .home.is-behind { transform:scale(.93); filter:blur(5px) brightness(.72); }
  .hotspot {
    position:absolute;
    z-index:3;
    cursor:pointer;
    border-radius:18px;
    touch-action:manipulation;
  }
  .hotspot:active { background:rgba(0,0,0,.12); }
  .hotspot[data-app="photos"] { left:27.4%; top:68px; width:21.2%; height:95px; }
  .hotspot[data-app="notes"] { left:4.4%; top:170px; width:21.6%; height:95px; }
  .hotspot[data-app="translate"] { left:50.4%; top:170px; width:21.6%; height:95px; }
  .hotspot[data-app="phone"] { left:4.2%; top:auto; bottom:15px; width:22.4%; height:97px; }
  .hotspot[data-app="safari"] { left:27.1%; top:auto; bottom:15px; width:22.5%; height:97px; }
  .hotspot[data-app="messages"] { left:50.3%; top:auto; bottom:15px; width:22.3%; height:97px; }
  .hotspot[data-app="kakao"] { left:73.6%; top:auto; bottom:15px; width:22.2%; height:97px; }

  .app-layer {
    position:absolute;
    inset:0;
    z-index:10;
    opacity:0;
    transform:scale(.16);
    transform-origin:var(--origin-x,50%) var(--origin-y,50%);
    border-radius:46px;
    overflow:hidden;
    pointer-events:none;
    transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .18s ease, border-radius .42s ease;
    background:#fff;
  }
  .app-layer.is-open { opacity:1; transform:scale(1); border-radius:0; pointer-events:auto; }
  .app-screen { position:absolute; inset:0; overflow:hidden; }

  .ios-status {
    position:absolute;
    z-index:40;
    top:0;
    left:0;
    right:0;
    height:44px;
    pointer-events:none;
  }
  .ios-status .right-icons {
    position:absolute;
    top:16px;
    right:50px;
    display:flex;
    align-items:center;
    gap:9px;
    color:#111;
  }
  .ios-status svg { display:block; }

  /* Photos — iOS 26-inspired aspect-ratio library */
  .photos {
    background:#f7f7f9;
    color:#050505;
  }
  .photos-scroll {
    position:absolute;
    inset:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 0 112px;
    background:#f7f7f9;
    scrollbar-width:none;
    overscroll-behavior:contain;
  }
  .photos-scroll::-webkit-scrollbar { display:none; }
  .photos-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-flow:row;
    gap:1px;
    width:100%;
    min-height:610px;
    background:#fff;
  }
  .photo-slot {
    position:relative;
    width:100%;
    min-width:0;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:#ececef;
    pointer-events:none;
    touch-action:pan-y;
    line-height:0;
  }

  .photo-video-duration {
    position:absolute;
    right:5px;
    bottom:4px;
    z-index:2;
    color:#fff;
    font-size:11.5px;
    line-height:1;
    font-weight:620;
    letter-spacing:-.2px;
    text-shadow:0 1px 3px rgba(0,0,0,.72);
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
  }
  .photo-slot img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
  }
  .photos-header {
    position:absolute;
    z-index:20;
    top:0;
    left:0;
    right:0;
    height:132px;
    color:#111;
    background:rgba(255,255,255,.63);
    border-bottom:.6px solid rgba(255,255,255,.90);
    box-shadow:0 8px 28px rgba(38,39,45,.09), inset 0 0 0 .5px rgba(255,255,255,.80);
    backdrop-filter:blur(30px) saturate(1.55);
    -webkit-backdrop-filter:blur(30px) saturate(1.55);
    pointer-events:none;
  }
  .photos-header .ios-status { color:#111; }
  .photos-title {
    position:absolute;
    left:17px;
    top:57px;
    margin:0;
    font-size:42px;
    line-height:44px;
    font-weight:820;
    letter-spacing:-2.25px;
    text-shadow:none;
  }
  .photos-count {
    position:absolute;
    left:17px;
    top:101px;
    font-size:18px;
    line-height:24px;
    font-weight:690;
    letter-spacing:-.65px;
    color:rgba(17,17,17,.68);
    text-shadow:none;
  }
  .glass-control {
    position:absolute;
    top:58px;
    height:49px;
    display:grid;
    place-items:center;
    color:#111;
    background:rgba(255,255,255,.63);
    border:.6px solid rgba(255,255,255,.90);
    box-shadow:0 8px 28px rgba(38,39,45,.09), inset 0 0 0 .5px rgba(255,255,255,.80);
    backdrop-filter:blur(30px) saturate(1.55);
    -webkit-backdrop-filter:blur(30px) saturate(1.55);
    pointer-events:auto;
  }
  .photos-menu { right:86px; width:49px; border-radius:50%; }
  .photos-select { right:15px; width:64px; border-radius:25px; font-size:18px; font-weight:570; letter-spacing:-.55px; }


/* ===== src/styles/02.css ===== */
/* 디자인 원본 2. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .menu-glyph { width:24px; height:24px; position:relative; }
  .menu-glyph i { position:absolute; left:2px; height:2.2px; border-radius:2px; background:currentColor; }
  .menu-glyph i:nth-child(1) { top:5px; width:21px; }
  .menu-glyph i:nth-child(2) { top:11px; width:17px; }
  .menu-glyph i:nth-child(3) { top:17px; width:12px; }

  .photos-top-wash {
    position:absolute;
    z-index:18;
    left:0;
    right:0;
    top:0;
    height:132px;
    background:linear-gradient(to bottom,rgba(248,248,250,.98) 18%,rgba(248,248,250,.77) 64%,rgba(248,248,250,0));
    pointer-events:none;
  }
  .photos-bottom-wash {
    position:absolute;
    z-index:18;
    left:0;
    right:0;
    bottom:0;
    height:106px;
    background:linear-gradient(to top,rgba(248,248,250,.98) 18%,rgba(248,248,250,.77) 64%,rgba(248,248,250,0));
    pointer-events:none;
  }
  .photos-tabs {
    position:absolute;
    z-index:25;
    left:20px;
    bottom:17px;
    width:205px;
    height:73px;
    border-radius:37px;
    display:flex;
    padding:4px;
    background:rgba(255,255,255,.63);
    border:.6px solid rgba(255,255,255,.9);
    box-shadow:0 8px 28px rgba(38,39,45,.09), inset 0 0 0 .5px rgba(255,255,255,.8);
    backdrop-filter:blur(30px) saturate(1.55);
    -webkit-backdrop-filter:blur(30px) saturate(1.55);
  }
  .photo-tab {
    flex:1;
    min-width:0;
    height:65px;
    border-radius:33px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    font-size:14px;
    line-height:17px;
    font-weight:560;
    letter-spacing:-.45px;
    color:#111;
  }
  .photo-tab.active {
    color:#1677e9;
    background:rgba(245,245,247,.78);
    box-shadow:inset 0 0 0 .5px rgba(255,255,255,.72);
  }
  .photo-tab svg { width:27px; height:27px; display:block; }
  .photo-tab-art {
    display:block;
    width:auto;
    height:51px;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
  }
  .photos-search {
    position:absolute;
    z-index:25;
    right:22px;
    bottom:19px;
    width:69px;
    height:69px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.67);
    border:.6px solid rgba(255,255,255,.9);
    box-shadow:0 8px 28px rgba(38,39,45,.09), inset 0 0 0 .5px rgba(255,255,255,.8);
    backdrop-filter:blur(30px) saturate(1.55);
    -webkit-backdrop-filter:blur(30px) saturate(1.55);
  }
  .photos-search svg { width:31px; height:31px; }

  /* Google Translate — iOS 26 / current Google Translate-inspired shell */
  .translate-app {
    background:#eef2f7;
    color:#202124;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif;
  }
  .translate-main-screen,
  .translate-saved-screen {
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#eef2f7;
    transition:transform .34s cubic-bezier(.22,.74,.2,1), opacity .26s ease;
    will-change:transform;
  }
  .translate-main-screen { z-index:1; transform:translateX(0); }
  .translate-saved-screen {
    z-index:3;
    transform:translateX(100%);
    background:#fff;
    box-shadow:-12px 0 36px rgba(20,26,38,.08);
  }
  .translate-app.show-saved .translate-main-screen {
    transform:translateX(-17%);
    opacity:.88;
  }
  .translate-app.show-saved .translate-saved-screen { transform:translateX(0); }

  .translate-white-card {
    position:absolute;
    inset:0 0 237px;
    background:#fff;
    border-radius:0 0 31px 31px;
    overflow:hidden;
  }
  .translate-logo {
    position:absolute;
    top:68px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:baseline;
    white-space:nowrap;
    font-family:Arial,sans-serif;
    font-size:28px;
    line-height:34px;
    font-weight:500;
    letter-spacing:-1.3px;
  }
  .translate-logo-google { display:inline-flex; letter-spacing:-2.15px; }
  .translate-logo-google span:nth-child(1),
  .translate-logo-google span:nth-child(4) { color:#4285f4; }
  .translate-logo-google span:nth-child(2),
  .translate-logo-google span:nth-child(6) { color:#ea4335; }
  .translate-logo-google span:nth-child(3) { color:#fbbc05; }
  .translate-logo-google span:nth-child(5) { color:#34a853; }
  .translate-logo-label {
    color:#5f6368;
    margin-left:7px;
    font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
    font-weight:460;
    letter-spacing:-1.8px;
  }
  .translate-circle-control {
    position:absolute;
    top:57px;
    width:53px;
    height:53px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.78);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 8px 28px rgba(38,43,53,.08), inset 0 0 0 .5px rgba(255,255,255,.8);
    backdrop-filter:blur(28px) saturate(1.45);
    -webkit-backdrop-filter:blur(28px) saturate(1.45);
    cursor:pointer;
  }
  .translate-circle-control:active { transform:scale(.96); }
  .translate-bookmarks-button { left:16px; }
  .translate-profile-button { right:16px; color:#3367d6; }
  .translate-circle-control svg { display:block; }

  .translate-input-label {
    position:absolute;
    top:143px;
    left:25px;
    color:#787c7a;
    font-size:28px;
    line-height:36px;
    font-weight:510;
    letter-spacing:-1.7px;
  }
  .translate-handwriting {
    position:absolute;
    right:27px;
    top:145px;
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    color:#4f5354;
  }

  .translate-languages {
    position:absolute;
    left:24px;
    right:24px;
    bottom:168px;
    height:59px;
    display:grid;
    grid-template-columns:1fr 50px 1fr;
    align-items:center;
    gap:5px;
  }
  .translate-language-pill {
    height:59px;
    border-radius:13px;
    background:rgba(255,255,255,.96);
    display:grid;
    place-items:center;
    color:#3c4043;
    font-size:17px;
    font-weight:520;
    letter-spacing:-.75px;
    box-shadow:0 1px 0 rgba(25,30,38,.02);
  }
  .translate-swap {
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    color:#4e5355;
  }
  .translate-action {
    position:absolute;
    bottom:44px;
    width:62px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    color:#3b4044;
    font-size:14px;
    line-height:18px;
    font-weight:500;
    letter-spacing:-.55px;
  }
  .translate-action-live { left:47px; }
  .translate-action-camera { right:47px; }
  .translate-action span { white-space:nowrap; }
  .translate-action-circle {
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#c8e6ff;
    color:#155087;
  }
  .translate-mic {
    position:absolute;
    left:50%;
    bottom:50px;
    width:94px;
    height:94px;
    border-radius:50%;
    transform:translateX(-50%);
    display:grid;
    place-items:center;
    background:#2f5bd3;
    color:#fff;
    box-shadow:0 4px 10px rgba(47,91,211,.08);
  }

  .translate-saved-header {
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    right:0;
    height:161px;
    background:rgba(255,255,255,.94);
    border-bottom:.6px solid #d9dde1;
    backdrop-filter:blur(20px) saturate(1.15);
    -webkit-backdrop-filter:blur(20px) saturate(1.15);
  }
  .translate-saved-title {
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    white-space:nowrap;
    color:#202124;
    font-size:20px;
    line-height:27px;
    font-weight:630;
    letter-spacing:-.9px;
  }


/* ===== src/styles/03.css ===== */
/* 디자인 원본 3. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .translate-back-home {
    position:absolute;
    top:57px;
    left:16px;
    width:82px;
    height:47px;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#202124;
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.95);
    box-shadow:0 8px 26px rgba(38,43,53,.08), inset 0 0 0 .5px rgba(255,255,255,.75);
    backdrop-filter:blur(25px) saturate(1.4);
    -webkit-backdrop-filter:blur(25px) saturate(1.4);
    font-size:18px;
    font-weight:520;
    letter-spacing:-.7px;
    cursor:pointer;
  }
  .translate-back-home:active { transform:scale(.97); }
  .translate-saved-tabs {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:55px;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .translate-saved-tab {
    position:relative;
    display:grid;
    place-items:center;
    color:#3c4043;
    font-size:17px;
    font-weight:520;
    letter-spacing:-.6px;
  }
  .translate-saved-tab.active { color:#2f5bd3; }
  .translate-saved-tab.active::after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:50%;
    width:52px;
    height:3px;
    border-radius:3px 3px 0 0;
    transform:translateX(-50%);
    background:#2f5bd3;
  }
  .translate-saved-list {
    position:absolute;
    top:161px;
    left:0;
    right:0;
    bottom:21px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:#fff;
    scrollbar-width:none;
    padding:0 17px 28px;
  }
  .translate-saved-list::-webkit-scrollbar { display:none; }
  .translate-saved-item {
    position:relative;
    padding:15px 43px 15px 4px;
    border-bottom:.65px solid #e0e3e6;
  }
  .translate-source {
    color:#202124;
    font-size:17px;
    line-height:24px;
    font-weight:480;
    letter-spacing:-.35px;
    word-break:break-word;
  }
  .translate-result {
    margin-top:5px;
    color:#5f6368;
    font-size:15px;
    line-height:22px;
    font-weight:430;
    letter-spacing:-.58px;
    word-break:keep-all;
  }
  .translate-saved-bookmark {
    position:absolute;
    top:17px;
    right:3px;
    width:33px;
    height:38px;
    display:grid;
    place-items:center;
    color:#2f5bd3;
    cursor:pointer;
  }
  .translate-saved-bookmark:active { transform:scale(.92); }
  .translate-empty {
    padding-top:70px;
    text-align:center;
    color:#777c80;
    font-size:15px;
    letter-spacing:-.5px;
  }

  /* Empty shells for the remaining active apps; content will be added later. */
  .blank-app { background:#fff; color:#111; }
  .blank-app.notes { background:#fbfaf5; }
  .blank-app.kakao { background:#fff; }
  .blank-surface { position:absolute; inset:44px 0 0; }

  .home-gesture {
    position:absolute;
    z-index:80;
    left:50%;
    bottom:0;
    width:160px;
    height:23px;
    transform:translateX(-50%);
    cursor:pointer;
    touch-action:none;
  }
  .home-gesture::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:7px;
    width:132px;
    height:5px;
    border-radius:999px;
    transform:translateX(-50%);
    background:rgba(0,0,0,.78);
  }
  .home-gesture.light::after { background:rgba(255,255,255,.9); }

  @media (prefers-reduced-motion:reduce) {
    .home,.app-layer { transition:none; }
  }


  /* Apple Notes — iOS 26-inspired list and detail views */
  .notes-app {
    background:#f2f2f7;
    color:#000;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  }
  .notes-list-screen,
  .notes-detail-screen {
    position:absolute;
    inset:0;
    overflow:hidden;
    transition:transform .36s cubic-bezier(.22,.74,.2,1), opacity .28s ease;
    will-change:transform;
  }
  .notes-list-screen {
    z-index:1;
    background:#f2f2f7;
    transform:translateX(0);
  }
  .notes-detail-screen {
    z-index:5;
    background:#fff;
    transform:translateX(100%);
    box-shadow:-14px 0 40px rgba(25,27,35,.08);
  }
  .notes-app.show-detail .notes-list-screen {
    transform:translateX(-17%);
    opacity:.9;
  }
  .notes-app.show-detail .notes-detail-screen { transform:translateX(0); }

  .notes-list-scroll {
    position:absolute;
    inset:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:128px 16px 124px;
  }
  .notes-list-scroll::-webkit-scrollbar,
  .notes-detail-body::-webkit-scrollbar { display:none; }
  .notes-list-heading {
    margin:0;
    color:#000;
    font-size:35px;
    line-height:42px;
    font-weight:760;
    letter-spacing:-1.65px;
  }
  .notes-list-count {
    margin-top:-2px;
    color:#929298;
    font-size:18px;
    line-height:23px;
    font-weight:450;
    letter-spacing:-.7px;
  }
  .notes-section { margin-top:23px; }
  .notes-section:first-of-type { margin-top:22px; }
  .notes-section-title {
    margin:0 0 12px;
    color:#080808;
    font-size:22px;
    line-height:28px;
    font-weight:665;
    letter-spacing:-.72px;
  }
  .notes-card {
    overflow:hidden;
    border-radius:27px;
    background:rgba(255,255,255,.96);
    box-shadow:inset 0 0 0 .45px rgba(255,255,255,.95);
  }
  .notes-row {
    position:relative;
    display:block;
    width:100%;
    min-height:101px;
    padding:12px 28px 10px;
    text-align:left;
    cursor:pointer;
  }
  .notes-row:active { background:rgba(228,228,232,.62); }
  .notes-row + .notes-row::before {
    content:"";
    position:absolute;
    top:0;
    left:28px;
    right:17px;
    height:.55px;
    background:#dedee2;
  }
  .notes-row-title {
    overflow:hidden;
    color:#050505;
    font-size:18px;
    line-height:23px;
    font-weight:690;
    letter-spacing:-.78px;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .notes-row-meta {
    display:flex;
    min-width:0;
    margin-top:2px;
    color:#94949a;
    font-size:15px;
    line-height:20px;
    font-weight:450;
    letter-spacing:-.48px;
    white-space:nowrap;
  }
  .notes-row-date { flex:0 0 auto; margin-right:7px; }
  .notes-row-preview {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .notes-row-folder {
    display:flex;
    align-items:center;
    gap:4px;
    margin-top:2px;
    color:#909096;
    font-size:14px;
    line-height:18px;
    font-weight:460;
    letter-spacing:-.38px;
  }
  .notes-row-folder svg { width:15px; height:13px; flex:none; }

  .notes-top-circle,
  .notes-top-pill,
  .notes-bottom-pill,
  .notes-compose-button {
    background:rgba(255,255,255,.74);
    border:.55px solid rgba(255,255,255,.96);
    box-shadow:0 9px 31px rgba(38,40,49,.09), inset 0 0 0 .45px rgba(255,255,255,.78);
    backdrop-filter:blur(28px) saturate(1.55);
    -webkit-backdrop-filter:blur(28px) saturate(1.55);
  }


/* ===== src/styles/04.css ===== */
/* 디자인 원본 4. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .notes-top-circle {
    position:absolute;
    z-index:35;
    top:57px;
    width:46px;
    height:46px;
    border-radius:50%;
    display:grid;
    place-items:center;
    cursor:pointer;
  }
  .notes-top-circle:active,
  .notes-top-pill:active,
  .notes-compose-button:active { transform:scale(.96); }
  .notes-list-back { left:16px; }
  .notes-list-back svg {
    width:16px;
    height:24px;
    display:block;
    transform:translateX(-1px);
  }
  .notes-list-more .dots {
    transform:translateY(1px);
  }
  .notes-list-more { right:16px; }
  .notes-list-more .dots { display:flex; align-items:center; gap:4px; }
  .notes-list-more .dots i { width:4px; height:4px; border-radius:50%; background:#111; }

  .notes-bottom-wash {
    position:absolute;
    z-index:20;
    left:0;
    right:0;
    bottom:0;
    height:115px;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(242,242,247,0),rgba(242,242,247,.8) 28%,#f2f2f7 73%);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    mask-image:linear-gradient(to bottom,transparent,#000 38%);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 38%);
  }
  .notes-search-pill {
    position:absolute;
    z-index:32;
    left:28px;
    right:72px;
    bottom:26px;
    height:50px;
    border-radius:26px;
    display:flex;
    align-items:center;
    padding:0 20px;
    color:#68686e;
    font-size:18px;
    line-height:24px;
    font-weight:470;
    letter-spacing:-.8px;
  }
  .notes-search-pill svg { width:25px; height:25px; margin-right:11px; flex:none; color:#050505; }
  .notes-search-pill .notes-search-mic { width:18px; height:24px; margin:0 0 0 auto; display:block; object-fit:contain; object-position:center; }
  .notes-search-pill .notes-search-mic { transform:translateY(0); }
  .notes-compose-button {
    position:absolute;
    z-index:33;
    right:16px;
    bottom:26px;
    width:50px;
    height:50px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#111;
    cursor:pointer;
  }
  .notes-compose-button img { width:24px; height:24px; display:block; object-fit:contain; object-position:center; }

  .notes-detail-back { left:16px; }
  .notes-detail-back img,
  .notes-detail-back svg { width:16px; height:24px; display:block; object-fit:contain; transform:translateX(-1px); }
  .notes-detail-undo { right:128px; }
  .notes-detail-undo img { width:25px; height:25px; display:block; object-fit:contain; }
  .notes-top-pill {
    position:absolute;
    z-index:35;
    top:57px;
    right:16px;
    width:102px;
    height:46px;
    border-radius:24px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
  .notes-top-pill button img { display:block; object-fit:contain; }
  .notes-top-pill button:first-child img { width:21.5px; height:auto; transform:translateX(-1px); }
  .notes-top-pill button:last-child img { width:23.5px; height:auto; transform:translateX(1px); }
  .notes-top-pill button {
    height:100%;
    display:grid;
    place-items:center;
    cursor:pointer;
  }
  .notes-top-pill button:active { opacity:.52; }
  .notes-detail-body {
    position:absolute;
    inset:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:122px 26px 116px;
    background:#fff;
  }
  .notes-detail-content {
    color:#3c3c3f;
    font-size:18px;
    line-height:28px;
    font-weight:430;
    letter-spacing:-.62px;
    white-space:pre-wrap;
    word-break:break-word;
    user-select:text;
    -webkit-user-select:text;
  }
  .notes-detail-content .note-first-line {
    display:block;
    margin-bottom:2px;
    color:inherit;
    font-size:inherit;
    line-height:inherit;
    font-weight:inherit;
    letter-spacing:inherit;
  }
  .notes-detail-bottom-wash {
    position:absolute;
    z-index:20;
    left:0;
    right:0;
    bottom:0;
    height:112px;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.83) 34%,#fff 72%);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    mask-image:linear-gradient(to bottom,transparent,#000 42%);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%);
  }
  .notes-tools-pill {
    position:absolute;
    z-index:32;
    left:28px;
    bottom:26px;
    width:168px;
    height:50px;
    border-radius:26px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:center;
    color:#090909;
  }
  .notes-tools-pill button { height:100%; display:grid; place-items:center; }
  .notes-tools-pill button img { display:block; object-fit:contain; }
  .notes-tools-pill button:nth-child(1) img { width:27px; height:auto; }
  .notes-tools-pill button:nth-child(2) img { width:24px; height:auto; }
  .notes-tools-pill button:nth-child(3) img { width:25px; height:auto; }
  .notes-detail-compose { right:16px; bottom:26px; }
  .notes-app .home-gesture::after { display:none; }



  /* Photo glass: use the exact same translucent recipe at the top and bottom. */
  .photos {
    --photo-glass-bg:rgba(255,255,255,.62);
    --photo-glass-border:rgba(255,255,255,.90);
    --photo-glass-shadow:0 8px 28px rgba(38,39,45,.09), inset 0 0 0 .5px rgba(255,255,255,.80);
    --photo-glass-filter:blur(30px) saturate(1.55);
  }
  .photos-header,
  .photos-tabs,
  .photos-search,
  .glass-control {
    background:var(--photo-glass-bg) !important;
    border-color:var(--photo-glass-border) !important;
    box-shadow:var(--photo-glass-shadow) !important;
    backdrop-filter:var(--photo-glass-filter) !important;
    -webkit-backdrop-filter:var(--photo-glass-filter) !important;
  }
  .photos-header { background-image:none !important; }

  /* Phone — iOS 26-inspired recent calls. */
  .phone-app {
    background:#fff;
    color:#000;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  }
  .phone-header {
    position:absolute;
    z-index:30;
    top:0;
    left:0;
    right:0;
    height:233px;
    background:rgba(255,255,255,.97);
  }
  .phone-header .ios-status { color:#111; }
  .phone-glass-button,
  .phone-segmented,
  .phone-tabbar {
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 9px 31px rgba(35,38,45,.09), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(28px) saturate(1.48);
    -webkit-backdrop-filter:blur(28px) saturate(1.48);
  }
  .phone-glass-button {
    position:absolute;
    top:58px;
    height:49px;
    display:grid;
    place-items:center;
    color:#111;
    cursor:default;
  }
  .phone-edit {
    left:16px;
    width:69px;
    border-radius:25px;
    font-size:17px;
    line-height:21px;
    font-weight:550;
    letter-spacing:-.55px;
  }
  .phone-filter-button {
    right:16px;
    width:49px;
    border-radius:50%;
  }
  .phone-filter-glyph { width:25px; height:22px; position:relative; }
  .phone-filter-glyph i {
    position:absolute;
    right:1px;
    height:2.1px;
    border-radius:2px;
    background:#111;
  }
  .phone-filter-glyph i:nth-child(1){top:3px;width:23px;}
  .phone-filter-glyph i:nth-child(2){top:10px;width:18px;}
  .phone-filter-glyph i:nth-child(3){top:17px;width:12px;}
  .phone-segmented {
    position:absolute;
    top:58px;
    left:50%;
    transform:translateX(-50%);
    width:190px;
    height:49px;
    border-radius:26px;
    padding:4px;
    display:grid;
    grid-template-columns:82px 1fr;
    gap:1px;
  }
  .phone-segment {
    min-width:0;
    height:41px;
    border-radius:22px;
    display:grid;
    place-items:center;
    font-size:16px;
    line-height:20px;
    font-weight:520;
    letter-spacing:-.55px;
    white-space:nowrap;
    cursor:pointer;
  }
  .phone-segment.active {
    background:rgba(230,230,233,.82);
    box-shadow:inset 0 0 0 .5px rgba(255,255,255,.72);
    font-weight:590;
  }
  .phone-title {
    position:absolute;
    left:17px;
    top:127px;
    margin:0;
    font-size:34px;
    line-height:41px;
    font-weight:720;
    letter-spacing:-1.25px;
  }


/* ===== src/styles/05.css ===== */
/* 디자인 원본 5. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .phone-search-box {
    position:absolute;
    left:16px;
    right:16px;
    top:181px;
    height:46px;
    border-radius:24px;
    display:flex;
    align-items:center;
    padding:0 15px 0 14px;
    gap:10px;
    color:#111;
    background:#f0f0f2;
  }
  .phone-search-box > svg:first-child { width:22px; height:22px; flex:none; }
  .phone-search-box input {
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    padding:0;
    background:transparent;
    color:#111;
    font:430 17px/21px inherit;
    letter-spacing:-.4px;
    user-select:text;
    -webkit-user-select:text;
  }
  .phone-search-box input::placeholder { color:#8e8e93; opacity:1; }
  .phone-search-mic { width:21px; height:24px; flex:none; color:#111; }

  .phone-list {
    position:absolute;
    z-index:5;
    top:233px;
    left:0;
    right:0;
    bottom:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior:contain;
    background:#fff;
    padding:6px 0 116px;
  }
  .phone-list::-webkit-scrollbar { display:none; }
  .phone-call-row {
    position:relative;
    min-height:78px;
    display:grid;
    grid-template-columns:54px minmax(0,1fr) auto 43px;
    column-gap:10px;
    align-items:center;
    padding:7px 14px 7px 16px;
  }
  .phone-call-row::after {
    content:"";
    position:absolute;
    left:80px;
    right:15px;
    bottom:0;
    height:.65px;
    background:rgba(60,60,67,.16);
  }
  .phone-call-row:last-child::after { display:none; }
  .phone-avatar {
    width:54px;
    height:54px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    align-self:center;
  }
  .phone-avatar.juju { background:#ddd; }
  .phone-avatar.juju img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:51% 33%;
    transform:scale(1.1);
  }
  .phone-avatar.default {
    background:transparent;
  }
  .phone-avatar.default img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
  }
  .phone-call-main { min-width:0; align-self:center; }
  .phone-call-name {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#000;
    font-size:18px;
    line-height:23px;
    font-weight:630;
    letter-spacing:-.65px;
  }
  .phone-call-name.is-number {
    font-size:17px;
    letter-spacing:-.32px;
  }
  .phone-call-row.is-missed .phone-call-name { color:#ff3b30; }
  .phone-call-meta {
    min-width:0;
    display:flex;
    align-items:center;
    gap:3px;
    overflow:hidden;
    color:#8e8e93;
    font-size:15.5px;
    line-height:20px;
    font-weight:450;
    letter-spacing:-.48px;
    white-space:nowrap;
  }
  .phone-call-meta svg { width:14px; height:14px; flex:none; }
  .phone-call-secondary { overflow:hidden; text-overflow:ellipsis; }
  .phone-call-date {
    color:#8e8e93;
    font-size:16px;
    line-height:21px;
    font-weight:440;
    letter-spacing:-.35px;
    white-space:nowrap;
    justify-self:end;
    padding-left:1px;
  }
  .phone-info-button {
    width:43px;
    height:43px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#f5f5f7;
    cursor:default;
  }
  .phone-info-button img {
    width:25px;
    height:25px;
    display:block;
    object-fit:contain;
  }
  .phone-empty {
    padding:72px 24px;
    text-align:center;
    color:#8e8e93;
    font-size:17px;
    letter-spacing:-.5px;
  }

  .phone-bottom-wash {
    position:absolute;
    z-index:20;
    left:0;
    right:0;
    bottom:0;
    height:110px;
    pointer-events:none;
    background:linear-gradient(to top,rgba(255,255,255,.98) 18%,rgba(255,255,255,.80) 62%,rgba(255,255,255,0));
  }
  .phone-tabbar {
    position:absolute;
    z-index:35;
    left:15px;
    right:15px;
    bottom:17px;
    height:73px;
    border-radius:37px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:4px;
    overflow:hidden;
  }
  .phone-tab {
    min-width:0;
    height:65px;
    border-radius:33px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    color:#111;
    font-size:10.8px;
    line-height:13px;
    font-weight:560;
    letter-spacing:-.52px;
    white-space:nowrap;
    cursor:default;
  }
  .phone-tab svg { width:28px; height:28px; display:block; }
  .phone-tab.active {
    color:#1677ea;
    background:rgba(230,230,233,.82);
    box-shadow:inset 0 0 0 .5px rgba(255,255,255,.72);
  }
  .phone-tabbar-original {
    position:absolute;
    z-index:2;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:fill;
    pointer-events:none;
    user-select:none;
  }
  .phone-app .home-gesture { z-index:90; }


  @media (max-width:520px) and (max-height:590px) {
    .home-art-top { height:286px; }
    .home-art-bottom { height:205px; }
    .hotspot[data-app="photos"] { top:63px; }
    .hotspot[data-app="notes"],
    .hotspot[data-app="translate"] { top:159px; }
  }

  /* Safari / Google home and search-history views */
  .safari-app {
    background:#fff;
    color:#202124;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif;
  }
  .safari-view {
    position:absolute;
    inset:0;
    overflow:hidden;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:top center;
    background-size:393px 690px;
    transition:opacity .18s ease, transform .28s cubic-bezier(.22,.74,.2,1);
  }
  .safari-main-view {
    z-index:1;
    background-image:url("assets/editable/other/media-150.png");
  }
  .safari-search-view {
    z-index:2;
    background-image:url("assets/editable/other/media-151.png");
    opacity:0;
    pointer-events:none;
    transform:translateY(8px);
  }
  .safari-app.show-search .safari-main-view {
    opacity:0;
    transform:scale(.985);
    pointer-events:none;
  }
  .safari-app.show-search .safari-search-view {
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .safari-main-search-hotspot {
    position:absolute;
    left:13px;
    top:191px;
    width:367px;
    height:54px;
    border-radius:28px;
    cursor:pointer;
    touch-action:manipulation;
  }
  .safari-main-search-hotspot:active {
    background:rgba(60,64,67,.05);
  }
  .safari-results-cover {
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    top:64px;
    bottom:0;
    background:#fff;
  }


/* ===== src/styles/06.css ===== */
/* 디자인 원본 6. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .safari-history-list {
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    top:64px;
    bottom:24px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:none;
    padding:0 0 18px;
    background:#fff;
  }
  .safari-history-list::-webkit-scrollbar {
    display:none;
  }
  .safari-history-row {
    height:54px;
    padding:0 23px 0 19px;
    display:grid;
    grid-template-columns:31px minmax(0,1fr) 27px;
    align-items:center;
    column-gap:11px;
    background:#fff;
  }
  .safari-history-clock {
    width:22px;
    height:22px;
    color:#9aa0a6;
    display:block;
  }
  .safari-history-text {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#202124;
    font-size:17px;
    line-height:22px;
    font-weight:590;
    letter-spacing:-.5px;
  }
  .safari-history-remove {
    width:27px;
    height:42px;
    display:grid;
    place-items:center;
    color:#6f7479;
    font-size:31px;
    line-height:1;
    font-weight:370;
    cursor:default;
  }
  .safari-app .home-gesture {
    z-index:90;
  }


  /* Messages app */
  .messages-app{
    background:#fff;
    color:#1d1d1f;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif;
  }
  .messages-list-screen, .messages-thread-screen{
    position:absolute; inset:0;
    background:#fff;
  }
  .messages-list-screen{
    display:flex;
    flex-direction:column;
  }
  .messages-list-header{
    position:absolute;
    z-index:18;
    top:0;
    left:0;
    right:0;
    height:113px;
    padding:0 16px;
    background:linear-gradient(to bottom,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 70%,rgba(255,255,255,.18) 100%);
    backdrop-filter:blur(22px) saturate(1.45);
    -webkit-backdrop-filter:blur(22px) saturate(1.45);
    pointer-events:none;
  }
  .messages-topbar{
    position:absolute;
    top:48px;
    left:16px;
    right:16px;
    height:49px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0;
    pointer-events:auto;
  }
  .messages-edit-btn, .messages-compose-btn, .messages-back-btn, .messages-info-btn{
    border:0;
    padding:0;
    color:#111;
    font-size:17px;
    line-height:1;
    font-weight:560;
    cursor:pointer;
  }
  .messages-edit-btn,
  .messages-compose-btn{
    height:49px;
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 9px 31px rgba(35,38,45,.09), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(28px) saturate(1.48);
    -webkit-backdrop-filter:blur(28px) saturate(1.48);
  }
  .messages-edit-btn{
    width:64px;
    border-radius:25px;
    letter-spacing:-.55px;
  }
  .messages-compose-btn{
    width:49px;
    border-radius:50%;
  }
  .messages-compose-btn, .messages-info-btn{
    display:grid; place-items:center;
  }
  .messages-compose-btn svg{
    width:25px;
    height:22px;
  }
  .messages-info-btn,
  .messages-back-btn{
    background:none;
    color:#007aff;
  }
  .messages-info-btn{
    width:30px;
    height:30px;
  }
  .messages-info-btn svg, .messages-back-btn svg{
    width:20px; height:20px;
    display:block;
  }
  .messages-title{
    position:absolute;
    z-index:2;
    top:61px;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    font-size:20px;
    line-height:25px;
    letter-spacing:-.55px;
    font-weight:720;
    white-space:nowrap;
  }
  .messages-searchbar{
    height:49px;
    min-width:0;
    flex:1;
    border-radius:25px;
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 9px 31px rgba(35,38,45,.09), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(28px) saturate(1.48);
    -webkit-backdrop-filter:blur(28px) saturate(1.48);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:0 16px;
    color:#76777c;
    font-size:17px;
    font-weight:430;
    box-sizing:border-box;
  }
  .messages-searchbar svg{
    width:22px;height:22px;display:block;
    color:#111;
    flex:none;
  }
  .messages-searchbar .messages-search-mic{
    width:21px;
    height:24px;
    margin-left:auto;
  }
  .messages-list-bottom{
    position:absolute;
    z-index:20;
    left:16px;
    right:16px;
    bottom:24px;
    height:auto;
    display:block;
    pointer-events:none;
  }
  .messages-bottom-controls-image{
    width:100%;
    height:auto;
    display:block;
  }
  .messages-bottom-compose{
    width:49px;
    height:49px;
    flex:none;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#111;
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 9px 31px rgba(35,38,45,.09), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(28px) saturate(1.48);
    -webkit-backdrop-filter:blur(28px) saturate(1.48);
  }
  .messages-bottom-compose svg{
    width:25px;
    height:25px;
    display:block;
  }
  .messages-pinned{
    flex:0 0 auto;
    padding:11px 10px 23px;
    display:flex;
    justify-content:center;
    gap:10px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .messages-pinned::-webkit-scrollbar{ display:none; }
  .messages-pinned-thread{
    min-width:112px;
    border:0;
    background:none;
    padding:0 6px;
    cursor:pointer;
  }
  .messages-pinned-avatar{
    width:88px;height:88px;border-radius:50%;
    margin:0 auto 8px;
    overflow:hidden;
    background:#d8dbe2;
    display:grid;place-items:center;
    box-shadow:0 0 0 1px rgba(0,0,0,.04) inset;
  }
  .messages-pinned-avatar img{
    width:100%;height:100%;object-fit:cover;
    object-position:51% 33%;
    transform:scale(1.1);
  }
  .messages-pinned-avatar.default{
    background:linear-gradient(180deg,#e7eaef,#d8dce4);
    color:#8d95a1;
    font-size:25px;
    font-weight:600;
  }
  .messages-pinned-name{
    font-size:14px;
    line-height:18px;
    color:#8e8e93;
    text-align:center;
    white-space:nowrap;
  }
  .messages-thread-list{
    position:absolute;
    inset:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:113px 0 121px;
    scrollbar-width:none;
  }
  .messages-thread-list::-webkit-scrollbar{ display:none; }
  .messages-row{
    width:100%;
    border:0;
    background:#fff;
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    gap:10px;
    align-items:center;
    padding:10px 14px 11px 16px;
    text-align:left;
    cursor:pointer;
  }


/* ===== src/styles/07.css ===== */
/* 디자인 원본 7. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .messages-row.static{ cursor:default; }
  .messages-row + .messages-row{
    border-top:1px solid #eef0f4;
  }
  .messages-row-avatar{
    width:54px;height:54px;border-radius:50%;
    overflow:hidden;
    background:linear-gradient(180deg,#e7eaef,#d8dce4);
    box-shadow:0 0 0 1px rgba(0,0,0,.035) inset;
    display:grid;place-items:center;
    color:#8d95a1;
    font-size:21px;
    font-weight:600;
    flex-shrink:0;
  }
  .messages-row-avatar img{ width:100%;height:100%;object-fit:cover; }
  .messages-row-avatar.default{
    background:transparent;
    box-shadow:none;
    color:transparent;
  }
  .messages-row-avatar.default img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
  }
  .messages-row-avatar:not(.default) img{
    object-position:51% 33%;
    transform:scale(1.1);
  }
  .messages-row-main{
    min-width:0;
  }
  .messages-row-top{
    display:flex; align-items:flex-end; gap:8px;
  }
  .messages-row-name{
    min-width:0;
    flex:1 1 auto;
    font-size:18px;
    line-height:1.2;
    font-weight:600;
    color:#111214;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:-.2px;
  }
  .messages-row-date{
    flex:0 0 auto;
    font-size:13px;
    line-height:1.15;
    color:#8a8f97;
    white-space:nowrap;
  }
  .messages-row-preview{
    margin-top:4px;
    font-size:15px;
    line-height:1.34;
    color:#7d828a;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    padding-right:14px;
  }
  .messages-thread-screen{
    display:none;
    flex-direction:column;
  }
  .messages-app.show-thread .messages-list-screen{ display:none; }
  .messages-app.show-thread .messages-thread-screen.active{ display:flex; }
  .messages-thread-header{
    position:absolute;
    z-index:18;
    top:0;
    left:0;
    right:0;
    height:140px;
    background:linear-gradient(to bottom,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 74%,rgba(255,255,255,.08) 100%);
    backdrop-filter:saturate(1.5) blur(22px);
    -webkit-backdrop-filter:saturate(1.5) blur(22px);
    border:0;
    padding:0;
    pointer-events:none;
  }
  .messages-back-btn{
    position:absolute;
    top:49px;
    left:16px;
    width:49px;
    height:49px;
    min-width:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 9px 31px rgba(35,38,45,.09), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(28px) saturate(1.48);
    -webkit-backdrop-filter:blur(28px) saturate(1.48);
    color:#111;
    pointer-events:auto;
  }
  .messages-back-btn svg{width:24px;height:24px;}
  .messages-info-btn{
    position:absolute;
    top:49px;
    right:16px;
    width:49px;
    height:49px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 9px 31px rgba(35,38,45,.09), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(28px) saturate(1.48);
    -webkit-backdrop-filter:blur(28px) saturate(1.48);
    color:#111;
    pointer-events:auto;
  }
  .messages-info-btn svg{width:28px;height:24px;}
  .messages-thread-center{
    position:absolute;
    top:29px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
    width:180px;
    max-width:180px;
  }
  .messages-thread-mini-avatar{
    width:60px;height:60px;border-radius:50%;
    overflow:hidden;
    background:linear-gradient(180deg,#e7eaef,#d8dce4);
    display:grid;place-items:center;
    color:#8d95a1;font-size:14px;font-weight:600;
    box-shadow:0 0 0 1px rgba(0,0,0,.03) inset;
    margin-bottom:-2px;
  }
  .messages-thread-mini-avatar img{width:100%;height:100%;object-fit:cover;}
  .messages-thread-mini-avatar.default{
    background:transparent;
    box-shadow:none;
    color:transparent;
  }
  .messages-thread-mini-avatar.default img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
  }
  .messages-thread-mini-avatar:not(.default) img{
    object-position:51% 33%;
    transform:scale(1.1);
  }
  .messages-thread-name{
    min-width:0;
    max-width:150px;
    padding:6px 14px 7px;
    border-radius:18px;
    background:rgba(255,255,255,.78);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 7px 24px rgba(35,38,45,.08), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(24px) saturate(1.42);
    -webkit-backdrop-filter:blur(24px) saturate(1.42);
    font-size:17px;line-height:21px;font-weight:670;color:#111214;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .messages-thread-name::after{
    content:"›";
    margin-left:6px;
    color:#8e8e93;
    font-size:20px;
    line-height:16px;
    vertical-align:-1px;
  }
  .messages-thread-sub{
    display:none;
  }
  .messages-thread-scroll{
    position:absolute;
    inset:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:140px 16px 118px;
    background:#fff;
    scrollbar-width:none;
  }
  .messages-thread-scroll::-webkit-scrollbar{ display:none; }
  .messages-date-divider{
    text-align:center;
    color:#8a8f97;
    font-size:13px;
    line-height:1.35;
    margin:8px 0 14px;
  }
  .message-block{
    display:flex;
    margin:3px 0;
  }
  .message-block.from-me{ justify-content:flex-end; }
  .message-block.from-them{ justify-content:flex-start; }
  .message-bubble{
    max-width:80%;
    padding:9px 13px 10px;
    border-radius:20px;
    font-size:17px;
    line-height:1.32;
    letter-spacing:-.2px;
    white-space:pre-wrap;
    word-break:break-word;
  }
  .message-block.from-them .message-bubble{
    background:#e9eaee;
    color:#121316;
    border-bottom-left-radius:8px;
  }
  .message-block.from-me .message-bubble{
    background:#0a84ff;
    color:#fff;
    border-bottom-right-radius:8px;
  }
  .messages-composer{
    position:absolute;
    z-index:20;
    left:16px;
    right:16px;
    bottom:29px;
    height:49px;
    padding:0;
    display:flex;
    align-items:center;
    gap:10px;
    background:transparent;
  }
  .messages-composer-plus{
    width:49px;
    height:49px;
    flex:none;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#111;
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 9px 31px rgba(35,38,45,.09), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(28px) saturate(1.48);
    -webkit-backdrop-filter:blur(28px) saturate(1.48);
    font-size:35px;
    line-height:35px;
    font-weight:300;
  }
  .messages-composer-inner{
    min-width:0;
    flex:1;
    height:49px;
    border-radius:25px;
    background:rgba(255,255,255,.76);
    border:.6px solid rgba(255,255,255,.94);
    box-shadow:0 9px 31px rgba(35,38,45,.09), inset 0 0 0 .5px rgba(255,255,255,.85);
    backdrop-filter:blur(28px) saturate(1.48);
    -webkit-backdrop-filter:blur(28px) saturate(1.48);
    display:flex;
    align-items:center;
    padding:0 15px 0 17px;
    color:#9aa0a6;
    font-size:17px;
  }
  .messages-composer-inner svg{
    width:20px;
    height:23px;
    display:block;
    margin-left:auto;
  }


/* ===== src/styles/08.css ===== */
/* 디자인 원본 8. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .messages-home{
    z-index:120;
  }



  /* User-supplied high-resolution home screen.
     The top apps and bottom dock keep their exact size; only the blank wallpaper
     band in the middle expands or contracts with Safari's live viewport. */
  .home {
    background:#080a0f !important;
    background-image:none !important;
    background-size:auto !important;
    background-position:center !important;
  }
  .home::before {
    content:"";
    position:absolute;
    left:0; right:0;
    top:205px;
    bottom:180px;
    z-index:0;
    pointer-events:none;
    background-image:url("assets/editable/other/media-152.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
  }
  .home-art {
    display:block !important;
    left:0 !important; right:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:100% 100% !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .home-art-top {
    top:0 !important;
    bottom:auto !important;
    height:205px !important;
    background-image:url("assets/editable/other/media-153.png") !important;
  }
  .home-art-bottom {
    top:auto !important;
    bottom:0 !important;
    height:180px !important;
    background-image:url("assets/editable/other/media-154.png") !important;
  }

  /* Tap targets aligned to the supplied 393×690 composition. */
  .hotspot[data-app="photos"] { left:27.4% !important; top:8px !important; width:21.2% !important; height:91px !important; }
  .hotspot[data-app="notes"] { left:4.4% !important; top:105px !important; width:21.6% !important; height:96px !important; }
  .hotspot[data-app="translate"] { left:50.4% !important; top:105px !important; width:21.6% !important; height:96px !important; }
  .hotspot[data-app="phone"] { left:4.2% !important; top:auto !important; bottom:13px !important; width:22.4% !important; height:105px !important; }
  .hotspot[data-app="safari"] { left:26.4% !important; top:auto !important; bottom:13px !important; width:22.4% !important; height:105px !important; }
  .hotspot[data-app="messages"] { left:48.6% !important; top:auto !important; bottom:13px !important; width:22.4% !important; height:105px !important; }
  .hotspot[data-app="kakao"] { left:70.8% !important; top:auto !important; bottom:13px !important; width:25.0% !important; height:105px !important; }

  @media (max-width:520px) and (max-height:590px) {
    .home-art-top { height:205px !important; }
    .home-art-bottom { height:180px !important; }
    .hotspot[data-app="photos"] { top:8px !important; }
    .hotspot[data-app="notes"],
    .hotspot[data-app="translate"] { top:105px !important; }
  }


  /* The real iPhone/Safari already supplies its own status bar. */
  .ios-status { display:none !important; }

  /* Tapping the visible web home indicator closes the current fake app. */
  .home-gesture {
    width:196px !important;
    height:38px !important;
    bottom:0 !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .home-gesture::after {
    width:132px !important;
    height:5px !important;
    bottom:7px !important;
  }
  .notes-app .home-gesture::after { display:block !important; }

  /* Photos: transparent title area at rest; white glass only while scrolling. */
  .photos-top-wash { display:none !important; }
  .photos-header {
    background:transparent !important;
    background-image:none !important;
    border-color:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:background .18s ease, border-color .18s ease,
               box-shadow .18s ease, backdrop-filter .18s ease !important;
  }
  .photos.is-scrolling .photos-header {
    background:var(--photo-glass-bg) !important;
    border:0 !important;
    box-shadow:0 8px 28px rgba(38,39,45,.09) !important;
    backdrop-filter:var(--photo-glass-filter) !important;
    -webkit-backdrop-filter:var(--photo-glass-filter) !important;
  }
  .photos-header,
  .photos-header .glass-control {
    border:0 !important;
  }
  .photos-header .glass-control {
    box-shadow:0 8px 24px rgba(38,39,45,.07) !important;
  }
  .photos-title,
  .photos-count {
    text-shadow:none !important;
  }

  /* Exact supplied Google Translate home image. */
  .translate-image-screen { background:#fff !important; }
  .translate-main-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:fill;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
  }
  .translate-image-bookmark {
    position:absolute;
    z-index:10;
    left:11px;
    top:11px;
    width:51px;
    height:51px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }


  /* Keep the Photos title area at the same glass density as the bottom bar. */
  .photos-top-wash {
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    background:linear-gradient(
      to bottom,
      rgba(248,248,250,.98) 18%,
      rgba(248,248,250,.77) 64%,
      rgba(248,248,250,0)
    ) !important;
    transition:none !important;
  }
  .photos-header,
  .photos.is-scrolling .photos-header {
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:none !important;
  }


  /*
    Match the Messages top wash to the Photos bottom wash exactly.
    The wash extends past the header and fades to transparent, so scrolling
    content never meets a hard blur boundary.
  */
  .messages-list-header,
  .messages-thread-header {
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
  }
  .messages-list-header::before,
  .messages-thread-header::before {
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    right:0;
    height:132px;
    background:linear-gradient(
      to bottom,
      rgba(248,248,250,.98) 18%,
      rgba(248,248,250,.77) 64%,
      rgba(248,248,250,0)
    );
    pointer-events:none;
  }
  .messages-thread-header::before {
    height:158px;
  }
  .messages-list-header > *,
  .messages-thread-header > * {
    z-index:1;
  }


  /*
    Clean, code-native iMessage bubbles.
    The body is a responsive rounded rectangle. The two pseudo-elements form
    a fixed-size curved tail and a white cutout, so no screenshot fringe or
    scaling artifact remains.
  */
  .message-bubble {
    position:relative !important;
    z-index:0 !important;
    isolation:isolate !important;
    overflow:visible !important;
    min-height:39px !important;
    box-sizing:border-box !important;
    padding:8px 13px 9px !important;
    margin-bottom:4px !important;
    border:0 !important;
    border-radius:20px !important;
    box-shadow:none !important;
    font-size:17px !important;
    line-height:1.32 !important;
  }

  .message-bubble::before,
  .message-bubble::after {
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    inset:auto !important;
    display:block !important;
    box-sizing:border-box !important;
    border:0 !important;
    border-image:none !important;
    background-image:none !important;
    background-repeat:no-repeat !important;
    box-shadow:none !important;
    filter:none !important;
    pointer-events:none !important;
  }

  .message-block.from-them .message-bubble {
    color:#111214 !important;
    background:#e9e9eb !important;
    border-bottom-left-radius:7px !important;
  }
  .message-block.from-them .message-bubble::before {
    left:-7px !important;
    bottom:-1px !important;
    width:18px !important;
    height:18px !important;
    background:#e9e9eb !important;
    border-bottom-right-radius:15px 13px !important;
  }
  .message-block.from-them .message-bubble::after {
    left:-10px !important;
    bottom:-2px !important;
    width:10px !important;
    height:20px !important;
    background:#fff !important;
    border-bottom-right-radius:10px 14px !important;
  }

  .message-block.from-me .message-bubble {
    color:#fff !important;
    background:linear-gradient(180deg,#67b5f7 0%,#3698ef 100%) !important;
    border-bottom-right-radius:7px !important;
  }


/* ===== src/styles/09.css ===== */
/* 디자인 원본 9. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .message-block.from-me .message-bubble::before {
    right:-7px !important;
    bottom:-1px !important;
    width:18px !important;
    height:18px !important;
    background:#3698ef !important;
    border-bottom-left-radius:15px 13px !important;
  }
  .message-block.from-me .message-bubble::after {
    right:-10px !important;
    bottom:-2px !important;
    width:10px !important;
    height:20px !important;
    background:#fff !important;
    border-bottom-left-radius:10px 14px !important;
  }

  /* Only the last message in a consecutive run carries the tail. */
  .message-block.from-them:has(+ .message-block.from-them) .message-bubble {
    border-bottom-left-radius:20px !important;
  }
  .message-block.from-me:has(+ .message-block.from-me) .message-bubble {
    border-bottom-right-radius:20px !important;
  }
  .message-block.from-them:has(+ .message-block.from-them) .message-bubble::before,
  .message-block.from-them:has(+ .message-block.from-them) .message-bubble::after,
  .message-block.from-me:has(+ .message-block.from-me) .message-bubble::before,
  .message-block.from-me:has(+ .message-block.from-me) .message-bubble::after {
    display:none !important;
  }


  /*
    Only the outgoing blue bubble is adjusted. Its body and tail share one
    exact fill value, removing the seam between gradient and solid colors.
  */
  .message-block.from-me .message-bubble {
    --message-bubble-fill:#64b0f6;
    background:var(--message-bubble-fill) !important;
  }
  .message-block.from-me .message-bubble::before {
    background:var(--message-bubble-fill) !important;
  }


  .photo-bubble {
    width:214px !important;
    max-width:68vw !important;
    min-height:0 !important;
    padding:0 !important;
    background:transparent !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }
  .photo-bubble::before,
  .photo-bubble::after {
    display:none !important;
  }
  .photo-bubble img {
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
  }
  .portrait-photo-bubble img {
    aspect-ratio:736 / 981;
  }
  .landscape-photo-bubble {
    width:252px !important;
    max-width:76vw !important;
  }
  .landscape-photo-bubble img {
    aspect-ratio:3 / 2;
  }

  .video-bubble {
    width:264px !important;
    max-width:78vw !important;
    min-height:0 !important;
    padding:0 !important;
    border-radius:20px !important;
    background:transparent !important;
    overflow:hidden !important;
  }
  .video-bubble::before,
  .video-bubble::after {
    display:none !important;
  }
  .messages-row-avatar.junhyeong img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:none;
  }
  .imessage-video-frame {
    position:relative;
    width:100%;
    aspect-ratio:720 / 404;
    overflow:hidden;
    border-radius:20px;
    background:#d9e8ee;
  }
  .imessage-video-frame video {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#d9e8ee;
  }
  .imessage-video-play {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .imessage-video-play::before {
    content:"";
    width:54px;
    height:54px;
    border-radius:50%;
    background:rgba(235,249,255,.82);
    box-shadow:0 1px 8px rgba(0,0,0,.08);
  }
  .imessage-video-play span {
    position:absolute;
    left:calc(50% - 6px);
    top:calc(50% - 12px);
    width:0;
    height:0;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    border-left:18px solid rgba(41,60,70,.78);
  }
  .imessage-video-frame.is-playing .imessage-video-play {
    opacity:0;
    pointer-events:none;
  }
  .autoplay-video-frame {
    background:#000;
    aspect-ratio:3 / 4;
    border-radius:12px;
  }
  .autoplay-video-bubble {
    border-radius:12px !important;
  }
  .autoplay-video-frame video {
    pointer-events:none;
  }

  .voice-bubble {
    width:278px !important;
    max-width:80vw !important;
    min-height:58px !important;
    padding:8px 10px 8px 9px !important;
  }
  .voice-message-button {
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
    color:#fff;
    font:inherit;
    text-align:left;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .voice-message-button audio {
    display:none;
  }
  .voice-play-icon {
    position:relative;
    flex:0 0 38px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
  }
  .voice-play-icon::before {
    content:"";
    position:absolute;
    left:15px;
    top:11px;
    width:0;
    height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:12px solid #64b0f6;
  }
  .voice-message-button.is-playing .voice-play-icon::before {
    left:13px;
    top:11px;
    width:4px;
    height:16px;
    border:0;
    border-radius:2px;
    background:#64b0f6;
    box-shadow:9px 0 0 #64b0f6;
  }
  .voice-waveform {
    display:flex;
    flex:1 1 auto;
    align-items:center;
    justify-content:space-between;
    min-width:0;
    height:32px;
    overflow:hidden;
  }
  .voice-wave-bar {
    display:block;
    flex:0 0 2px;
    width:2px;
    max-height:30px;
    border-radius:2px;
    background:rgba(255,255,255,.58);
    transition:background-color .08s linear;
  }
  .voice-wave-bar.played {
    background:#fff;
  }
  .voice-duration {
    flex:0 0 auto;
    min-width:34px;
    color:rgba(255,255,255,.62);
    font-size:15px;
    font-variant-numeric:tabular-nums;
    letter-spacing:0;
    text-align:right;
  }
  .message-block.from-them .voice-message-button {
    color:#1d1d1f;
  }
  .message-block.from-them .voice-wave-bar {
    background:rgba(74,78,84,.42);
  }
  .message-block.from-them .voice-wave-bar.played {
    background:#3d8fe8;
  }
  .message-block.from-them .voice-duration {
    color:rgba(35,38,43,.55);
  }
  .messages-row.is-unread {
    position:relative;
  }
  .messages-row.is-unread::before {
    content:"";
    position:absolute;
    left:4px;
    top:50%;
    width:9px;
    height:9px;
    margin-top:-4.5px;
    border-radius:50%;
    background:#3478f6;
  }
  .home-app-badge {
    position:absolute;
    z-index:8;
    top:4px;
    right:2px;
    min-width:25px;
    height:25px;
    padding:0 6px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#ff453a;
    color:#fff;
    font-size:15px;
    font-weight:500;
    line-height:1;
    letter-spacing:-.2px;
    font-variant-numeric:tabular-nums;
    box-shadow:0 0 0 .5px rgba(255,255,255,.2);
    pointer-events:none;
  }


/* ===== src/styles/10.css ===== */
/* 디자인 원본 10. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */


  .kakao-app {
    --kakao-yellow:#fee500;
    --kakao-orange:#ff4f1f;
    --kakao-room:#b3c5d3;
    background:#fff;
    color:#171717;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
      "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  }
  .kakao-app button {
    font:inherit;
    color:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .kakao-list-screen,
  .kakao-room-screen {
    position:absolute;
    inset:0;
  }
  .kakao-list-screen[hidden],
  .kakao-room-screen[hidden] {
    display:none;
  }
  .kakao-list-scroll {
    position:absolute;
    inset:0 0 75px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    background:#fff;
    padding:0 0 18px;
  }
  .kakao-list-scroll::-webkit-scrollbar,
  .kakao-room-scroll::-webkit-scrollbar {
    display:none;
  }
  .kakao-list-head {
    position:relative;
    padding:58px 16px 0;
  }
  .kakao-original-topbar {
    position:relative;
    width:100%;
    padding:49px 10px 0;
    background:#fff;
  }
  .kakao-top-unread {
    position:absolute;
    z-index:2;
    top:101px;
    left:118px;
    min-width:25px;
    height:18px;
    display:grid;
    place-items:center;
    box-sizing:border-box;
    padding:0 5px;
    border-radius:10px;
    color:#fff;
    background:var(--kakao-orange);
    font-size:10px;
    line-height:1;
    font-weight:720;
    pointer-events:none;
  }
  .kakao-original-topbar img {
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  .kakao-original-topbar + .kakao-chat-list {
    padding-top:4px;
  }
  .kakao-list-title {
    margin:0;
    font-size:31px;
    line-height:1.1;
    font-weight:760;
    letter-spacing:-1.25px;
  }
  .kakao-head-actions {
    position:absolute;
    top:57px;
    right:17px;
    display:flex;
    align-items:center;
    gap:21px;
  }
  .kakao-icon-button {
    position:relative;
    display:block;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    background:transparent;
  }
  .kakao-icon-button.search::before,
  .kakao-room-action.search::before {
    content:"";
    position:absolute;
    width:15px;
    height:15px;
    border:2.2px solid #191919;
    border-radius:50%;
    left:2px;
    top:2px;
  }
  .kakao-icon-button.search::after,
  .kakao-room-action.search::after {
    content:"";
    position:absolute;
    width:10px;
    height:2.2px;
    border-radius:2px;
    background:#191919;
    transform:rotate(45deg);
    left:17px;
    top:19px;
  }
  .kakao-icon-button.new-chat::before {
    content:"";
    position:absolute;
    left:2px;
    top:3px;
    width:19px;
    height:16px;
    border:2px solid #191919;
    border-radius:48%;
  }
  .kakao-icon-button.new-chat::after {
    content:"+";
    position:absolute;
    right:-1px;
    top:6px;
    width:14px;
    height:14px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    font-size:17px;
    font-weight:650;
    line-height:1;
  }
  .kakao-gear {
    display:grid;
    place-items:center;
    font-size:29px;
    line-height:1;
    transform:translateY(-1px);
  }
  .kakao-filters {
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:27px;
    overflow:hidden;
    white-space:nowrap;
  }
  .kakao-filter {
    flex:0 0 auto;
    height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 16px;
    border:1px solid #ddd;
    border-radius:22px;
    background:#fff;
    font-size:16px;
    font-weight:650;
    letter-spacing:-.45px;
  }
  .kakao-filter.active {
    padding-inline:18px;
    border-color:#191919;
    background:#191919;
    color:#fff;
  }
  .kakao-filter.compact {
    min-width:49px;
    padding-inline:12px;
  }
  .kakao-filter .blue-chat {
    font-size:18px;
    line-height:1;
  }
  .kakao-filter .call {
    color:#00c86f;
    font-size:21px;
    line-height:1;
  }
  .kakao-filter-count {
    min-width:31px;
    height:22px;
    display:grid;
    place-items:center;
    padding:0 7px;
    border-radius:12px;
    background:var(--kakao-orange);
    color:#fff;
    font-size:13px;
    font-weight:720;
  }
  .kakao-ad {
    position:relative;
    height:104px;
    margin:18px 16px 13px;
    overflow:hidden;
    border-radius:15px;
    background:#f2f2f2;
  }
  .kakao-ad-copy {
    position:absolute;
    left:22px;
    top:20px;
    z-index:2;
  }
  .kakao-ad-kicker {
    color:#777;
    font-size:12px;
    line-height:1.25;
  }
  .kakao-ad-title {
    margin-top:8px;
    color:#4a4a4a;
    font-size:21px;
    line-height:1.05;
    font-weight:760;
    letter-spacing:-.7px;
  }
  .kakao-ad-meta {
    margin-top:8px;
    color:#858585;
    font-size:11px;
  }
  .kakao-ad-art {
    position:absolute;
    right:15px;
    top:18px;
    width:111px;
    height:66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    border:2px solid #37a9eb;
    color:#fff;
    background:
      linear-gradient(135deg,rgba(255,255,255,.35) 25%,transparent 25%) 0 0/20px 20px,
      linear-gradient(315deg,#46c6ff 25%,#166bd6 25%) 0 0/20px 20px;
    text-shadow:0 2px 0 #064e99,1px 0 0 #064e99,-1px 0 0 #064e99;
    transform:rotate(-1deg);
  }
  .kakao-ad-art strong {
    font-size:18px;
    line-height:1;
  }
  .kakao-ad-art span {
    margin-top:4px;
    font-size:10px;
    font-weight:750;
  }
  .kakao-chat-list {
    padding:0 16px;
  }
  .kakao-chat-row {
    position:relative;
    width:100%;
    min-height:72px;
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 44px;
    gap:10px;
    align-items:center;
    padding:7px 0;
    border:0;
    background:transparent;
    text-align:left;
  }


/* ===== src/styles/11.css ===== */
/* 디자인 원본 11. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .kakao-chat-row[data-kakao-room] {
    cursor:pointer;
  }
  .kakao-avatar {
    position:relative;
    width:52px;
    height:52px;
    overflow:hidden;
    border-radius:19px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#b8cae7,#818bc7);
    color:#fff;
    font-size:19px;
    font-weight:750;
    letter-spacing:-1px;
  }
  .kakao-avatar.circle {
    border-radius:50%;
  }
  .kakao-avatar img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 42%;
  }
  .kakao-avatar.brand {
    border-radius:19px;
    background:#fff;
    box-shadow:inset 0 0 0 .25pt rgba(118,118,128,.22);
  }
  .kakao-avatar.brand img {
    object-fit:contain;
    object-position:center;
    padding:2px;
  }
  .kakao-avatar.post-brand img {
    padding:5px;
  }
  .kakao-avatar.pay {
    background:#ffe500;
    color:#191919;
    font-size:15px;
  }
  .kakao-avatar.kevin {
    background:linear-gradient(145deg,#3c3d44,#15161a);
  }
  .kakao-avatar.work {
    background:linear-gradient(145deg,#d7ecff,#8db7df);
  }
  .kakao-avatar.group {
    background:#eef1f4;
  }
  .kakao-avatar.group::before,
  .kakao-avatar.group::after {
    content:"";
    position:absolute;
    width:29px;
    height:29px;
    border-radius:50%;
    border:2px solid #fff;
    background:linear-gradient(145deg,#b4cee2,#6685a6);
  }
  .kakao-avatar.group::before {
    left:3px;
    top:4px;
  }
  .kakao-avatar.group::after {
    right:3px;
    bottom:4px;
    background:linear-gradient(145deg,#f0c7b1,#b77b6b);
  }
  .kakao-avatar-collage {
    position:relative;
    width:52px;
    height:52px;
    flex:0 0 52px;
  }
  .kakao-avatar-collage img {
    display:block;
    object-fit:cover;
    background:#edf0f2;
  }
  .kakao-avatar-collage.two img {
    position:absolute;
    width:35px;
    height:35px;
    border:2px solid #fff;
    border-radius:13px;
    box-sizing:border-box;
  }
  .kakao-avatar-collage.two img:first-child {
    left:0;
    top:1px;
  }
  .kakao-avatar-collage.two img:last-child {
    right:0;
    bottom:1px;
  }
  .kakao-avatar-collage.four {
    display:grid;
    grid-template-columns:repeat(2,24px);
    grid-template-rows:repeat(2,24px);
    gap:2px;
    padding:1px;
    box-sizing:border-box;
  }
  .kakao-avatar-collage.four img {
    width:24px;
    height:24px;
    border-radius:8px;
  }
  .kakao-avatar-collage.four img:last-child {
    object-position:left center;
  }
  .kakao-chat-main {
    min-width:0;
  }
  .kakao-chat-name {
    overflow:hidden;
    color:#171717;
    font-size:18px;
    line-height:1.2;
    font-weight:520;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:-.45px;
  }
  .kakao-chat-name .members {
    margin-left:4px;
    color:#999;
    font-size:14px;
  }
  .kakao-chat-preview {
    display:-webkit-box;
    margin-top:5px;
    overflow:hidden;
    color:#888;
    font-size:14px;
    line-height:1.35;
    letter-spacing:-.35px;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .kakao-chat-side {
    align-self:center;
    display:flex;
    min-height:45px;
    flex-direction:column;
    align-items:flex-end;
    justify-content:flex-start;
    gap:7px;
  }
  .kakao-chat-time {
    color:#8c8c8c;
    font-size:12px;
    line-height:1.2;
    white-space:nowrap;
  }
  .kakao-unread {
    min-width:22px;
    height:22px;
    display:grid;
    place-items:center;
    padding:0 6px;
    border-radius:12px;
    background:var(--kakao-orange);
    color:#fff;
    font-size:11px;
    font-weight:720;
  }
  .kakao-bottom-nav {
    position:absolute;
    z-index:30;
    left:0;
    right:0;
    bottom:0;
    height:75px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:11px 19px 15px;
    background:rgba(249,249,250,.94);
    border-top:.5px solid rgba(0,0,0,.08);
    backdrop-filter:blur(24px) saturate(1.35);
    -webkit-backdrop-filter:blur(24px) saturate(1.35);
  }
  .kakao-bottom-nav-original {
    height:75px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:0;
    overflow:hidden;
    border-top:0;
    background:rgba(249,249,250,.94);
  }
  .kakao-bottom-unread {
    position:absolute;
    z-index:2;
    top:2px;
    left:119px;
    min-width:27px;
    height:19px;
    display:grid;
    place-items:center;
    box-sizing:border-box;
    padding:0 5px;
    border-radius:10px;
    color:#fff;
    background:var(--kakao-orange);
    font-size:10px;
    line-height:1;
    font-weight:720;
    pointer-events:none;
  }
  .kakao-bottom-nav-original img {
    display:block;
    width:100%;
    height:auto;
    max-height:69px;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  .kakao-nav-item {
    position:relative;
    display:grid;
    place-items:start center;
    border:0;
    background:transparent;
  }
  .kakao-nav-icon {
    position:relative;
    width:31px;
    height:28px;
    color:#bdc0c3;
  }
  .kakao-nav-icon.friends::before {
    content:"";
    position:absolute;
    left:11px;
    top:0;
    width:10px;
    height:10px;
    border-radius:50%;
    background:currentColor;
  }
  .kakao-nav-icon.friends::after {
    content:"";
    position:absolute;
    left:5px;
    top:12px;
    width:22px;
    height:12px;
    border-radius:12px 12px 5px 5px;
    background:currentColor;
  }
  .kakao-nav-icon.chats::before,
  .kakao-nav-icon.chats::after {
    content:"";
    position:absolute;
    border-radius:50%;
    background:currentColor;
  }
  .kakao-nav-icon.chats::before {
    left:1px;
    top:3px;
    width:24px;
    height:19px;
  }
  .kakao-nav-icon.chats::after {
    right:0;
    bottom:1px;
    width:19px;
    height:15px;
    opacity:.72;
  }
  .kakao-nav-item.active .kakao-nav-icon {
    color:#282d31;
  }


/* ===== src/styles/12.css ===== */
/* 디자인 원본 12. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .kakao-nav-icon.open {
    width:28px;
    height:24px;
    margin-top:2px;
    border-radius:50%;
    background:currentColor;
  }
  .kakao-nav-icon.open::before {
    content:"";
    position:absolute;
    left:10px;
    top:7px;
    border-left:8px solid #fff;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
  }
  .kakao-nav-icon.shop::before {
    content:"";
    position:absolute;
    left:4px;
    top:7px;
    width:23px;
    height:19px;
    border-radius:3px;
    background:currentColor;
  }
  .kakao-nav-icon.shop::after {
    content:"";
    position:absolute;
    left:10px;
    top:2px;
    width:11px;
    height:10px;
    border:3px solid currentColor;
    border-bottom:0;
    border-radius:8px 8px 0 0;
  }
  .kakao-nav-icon.more::before {
    content:"•••";
    position:absolute;
    inset:-5px 0 0;
    font-size:25px;
    letter-spacing:1px;
  }
  .kakao-nav-badge {
    position:absolute;
    top:-4px;
    left:50%;
    transform:translateX(3px);
    min-width:27px;
    height:19px;
    display:grid;
    place-items:center;
    padding:0 5px;
    border-radius:10px;
    color:#fff;
    background:var(--kakao-orange);
    font-size:10px;
    font-weight:720;
  }
  .kakao-nav-dot {
    position:absolute;
    top:-2px;
    right:13px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--kakao-orange);
  }

  .kakao-room-screen {
    background:var(--kakao-room);
  }
  .kakao-room-head {
    position:absolute;
    z-index:20;
    top:0;
    left:0;
    right:0;
    height:116px;
    background:linear-gradient(
      to bottom,
      rgba(179,197,211,.98) 18%,
      rgba(179,197,211,.77) 64%,
      rgba(179,197,211,0) 100%
    );
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .kakao-room-back,
  .kakao-room-actions {
    position:absolute;
    top:48px;
    height:42px;
    display:flex;
    align-items:center;
    border:1px solid rgba(255,255,255,.85);
    border-radius:23px;
    background:rgba(232,245,255,.72);
    box-shadow:0 7px 20px rgba(65,85,99,.10), inset 0 0 0 .5px rgba(255,255,255,.58);
  }
  .kakao-room-back {
    left:16px;
    gap:7px;
    padding:0 14px 0 13px;
  }
  .kakao-chevron {
    width:13px;
    height:13px;
    border-left:2.4px solid #1d3347;
    border-bottom:2.4px solid #1d3347;
    transform:rotate(45deg);
  }
  .kakao-room-back-count {
    color:#1d3347;
    font-size:17px;
    line-height:1;
  }
  .kakao-room-title {
    position:absolute;
    left:104px;
    right:104px;
    top:55px;
    overflow:hidden;
    font-size:19px;
    line-height:1.25;
    font-weight:730;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:-.45px;
  }
  .kakao-room-actions {
    right:16px;
    width:82px;
    justify-content:space-evenly;
  }
  .kakao-room-action {
    position:relative;
    width:28px;
    height:28px;
  }
  .kakao-room-action.menu::before,
  .kakao-room-action.menu::after,
  .kakao-room-action.menu span {
    content:"";
    position:absolute;
    left:4px;
    width:20px;
    height:2.2px;
    border-radius:2px;
    background:#1d3347;
  }
  .kakao-room-action.menu::before {
    top:6px;
  }
  .kakao-room-action.menu span {
    top:13px;
  }
  .kakao-room-action.menu::after {
    top:20px;
  }
  .kakao-room-scroll {
    position:absolute;
    inset:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    padding:103px 14px 102px;
  }
  .kakao-date-pill {
    width:max-content;
    max-width:80%;
    margin:24px auto 20px;
    padding:5px 12px;
    border-radius:16px;
    color:#536573;
    background:rgba(167,186,200,.82);
    font-size:12px;
    line-height:1.2;
  }
  .kakao-room-scroll > .kakao-date-pill:first-child {
    margin-top:0;
  }
  .kakao-message {
    position:relative;
    display:flex;
    align-items:flex-end;
    margin:4px 0;
  }
  .kakao-message.mine + .kakao-message.theirs,
  .kakao-message.theirs + .kakao-message.mine {
    margin-top:10px;
  }
  .kakao-message.kakao-prehistory:first-child {
    margin-top:-46px;
  }
  .kakao-message.mine {
    justify-content:flex-end;
    padding-left:58px;
  }
  .kakao-message.theirs {
    justify-content:flex-start;
    padding-right:58px;
  }
  .kakao-message-avatar {
    align-self:flex-start;
    flex:0 0 37px;
    width:37px;
    height:37px;
    margin-right:8px;
    overflow:hidden;
    border-radius:14px;
    background:linear-gradient(145deg,#cbd6e2,#7e92a8);
  }
  .kakao-message-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 42%;
  }
  .kakao-message-content {
    min-width:0;
    max-width:calc(100% - 45px);
  }
  .kakao-message-sender {
    margin:0 0 4px 2px;
    color:#2f3b44;
    font-size:13px;
    line-height:1.2;
  }
  .kakao-bubble-wrap {
    display:flex;
    align-items:flex-end;
    gap:5px;
  }
  .kakao-message.mine .kakao-bubble-wrap {
    flex-direction:row-reverse;
  }
  .kakao-bubble {
    position:relative;
    max-width:255px;
    padding:9px 12px;
    border-radius:14px;
    color:#151515;
    font-size:16px;
    line-height:1.35;
    letter-spacing:-.3px;
    word-break:keep-all;
    overflow-wrap:anywhere;
  }
  .kakao-bubble.theirs {
    background:#fff;
    border-top-left-radius:4px;
  }
  .kakao-bubble.theirs::before {
    content:"";
    position:absolute;
    left:-6px;
    top:0;
    border-top:8px solid #fff;
    border-left:7px solid transparent;
  }
  .kakao-bubble.mine {
    background:var(--kakao-yellow);
    border-top-right-radius:4px;
  }
  .kakao-bubble.mine::after {
    content:"";
    position:absolute;
    right:-6px;
    top:0;
    border-top:8px solid var(--kakao-yellow);
    border-right:7px solid transparent;
  }
  .kakao-bubble {
    white-space:pre-wrap;
  }
  .kakao-photo-bubble {
    width:218px;
    max-width:min(218px,68vw);
    padding:0;
    overflow:hidden;
    border-radius:14px !important;
    background:transparent !important;
  }


/* ===== src/styles/13.css ===== */
/* 디자인 원본 13. parts.json 순서로 합쳐져 기존 CSS 우선순위를 유지합니다. */
  .kakao-photo-bubble::before,
  .kakao-photo-bubble::after {
    display:none;
  }
  .kakao-photo-bubble img {
    display:block;
    width:100%;
    max-height:290px;
    border-radius:14px;
    object-fit:cover;
    background:#dbe3e8;
  }
  .kakao-message-meta {
    flex:0 0 auto;
    align-self:flex-end;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
    padding-bottom:1px;
  }
  .kakao-message-time {
    flex:0 0 auto;
    padding:0;
    color:#52626e;
    font-size:10px;
    line-height:1;
    white-space:nowrap;
  }
  .kakao-message-unread {
    flex:0 0 auto;
    padding:0;
    color:#fee500;
    font-size:11px;
    line-height:1;
    font-weight:650;
    white-space:nowrap;
  }
  .kakao-room-spacer {
    height:14px;
  }
  .kakao-composer {
    position:absolute;
    z-index:25;
    left:12px;
    right:12px;
    bottom:20px;
    height:54px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.87);
    border-radius:29px;
    background:rgba(232,245,255,.82);
    box-shadow:0 7px 24px rgba(65,85,99,.12), inset 0 0 0 .5px rgba(255,255,255,.58);
    backdrop-filter:blur(22px) saturate(1.25);
    -webkit-backdrop-filter:blur(22px) saturate(1.25);
  }
  .kakao-compose-plus,
  .kakao-compose-hash {
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#111;
    font-size:28px;
    font-weight:300;
    line-height:1;
  }
  .kakao-compose-hash {
    font-size:25px;
    font-weight:450;
  }
  .kakao-compose-placeholder {
    flex:1 1 auto;
    color:#97a0a7;
    font-size:16px;
    letter-spacing:-.35px;
  }
  .kakao-compose-smile {
    flex:0 0 29px;
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(186,200,212,.60);
    color:#17202a;
    font-size:18px;
  }
  .ios-kakao-notification {
    position:absolute;
    z-index:140;
    top:8px;
    left:8px;
    right:8px;
    min-height:76px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:9px;
    align-items:center;
    padding:8px 13px 8px 10px;
    border:1px solid rgba(255,255,255,.82);
    border-radius:23px;
    background:rgba(231,237,225,.77);
    box-shadow:0 10px 26px rgba(28,39,31,.18), inset 0 0 0 .5px rgba(255,255,255,.52);
    backdrop-filter:blur(26px) saturate(1.38);
    -webkit-backdrop-filter:blur(26px) saturate(1.38);
    transform:translate3d(0,-104px,0);
    opacity:0;
    pointer-events:none;
    transition:
      transform .66s cubic-bezier(.16,1,.3,1),
      opacity .16s ease-out;
    will-change:transform,opacity;
    -webkit-tap-highlight-color:transparent;
  }
  .ios-kakao-notification.is-visible {
    transform:translate3d(0,0,0);
    opacity:1;
    pointer-events:auto;
  }
  .ios-kakao-notification.is-hiding {
    transition:
      transform .40s cubic-bezier(.4,0,.72,.18),
      opacity .16s linear .08s;
  }
  .ios-kakao-notification-avatar {
    position:relative;
    width:44px;
    height:44px;
    overflow:visible;
    border-radius:14px;
    background:#d8dee5;
  }
  .ios-kakao-notification-avatar > img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:14px;
  }
  .ios-kakao-notification-appmark {
    position:absolute;
    right:-3px;
    bottom:-3px;
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border:1.5px solid rgba(255,255,255,.92);
    border-radius:6px;
    background:#fee500;
    color:#3b1e1e;
    font-size:5.5px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.45px;
  }
  .ios-kakao-notification-copy {
    min-width:0;
    text-align:left;
  }
  .ios-kakao-notification-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:#686b65;
    font-size:11px;
    line-height:1.2;
  }
  .ios-kakao-notification-app {
    overflow:hidden;
    color:#151713;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ios-kakao-notification-now {
    flex:0 0 auto;
  }
  .ios-kakao-notification-sender,
  .ios-kakao-notification-message {
    overflow:hidden;
    color:#11130f;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ios-kakao-notification-sender {
    display:block;
    margin-top:2px;
    font-size:13.5px;
    font-weight:700;
    line-height:1.2;
  }
  .ios-kakao-notification-message {
    display:block;
    margin-top:1px;
    font-size:13.5px;
    font-weight:450;
    line-height:1.25;
  }