*{box-sizing:border-box}body{margin:0;background:#242321;font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}.intro h1{text-align:center;margin:0 auto}.intro h1 img{width:100%;height:auto}.wd100{width:100%}button{padding:0 12px}.iphone-install{display:block;background:#c4510b;color:#fff;border:1px solid #eab286;margin-bottom:12px}.iphone-install:active{background:#a84108}dialog a:focus-visible,dialog button:focus-visible{outline:3px solid #e63b86;outline-offset:3px}

    .intro-phone {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 412px;
      min-height: 100vh;
      min-height: 100svh;
      margin: 0 auto;
      position: relative;
      isolation: isolate;
      background-color: #242321;
      background-image:
        repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, #0000000a 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 48% 25%, #45413a55, transparent 65%),
        linear-gradient(90deg, #161615 0, #32302b 3%, #242321 7%, #282724 94%, #1b1b19 100%);
      letter-spacing: -0.4px;
      line-height: 1.45;
    }
    .intro-phone::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cfilter%20id%3D%22grain%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.36%22%20numOctaves%3D%223%22%20seed%3D%228%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeDiffuseLighting%20surfaceScale%3D%222.2%22%20diffuseConstant%3D%22.85%22%20lighting-color%3D%22%23ffffff%22%3E%3CfeDistantLight%20azimuth%3D%22225%22%20elevation%3D%2245%22%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23grain%29%22%2F%3E%3C%2Fsvg%3E");
      background-size: 180px 180px;
      opacity: 0.20;
      mix-blend-mode: soft-light;
      pointer-events: none;
      z-index: -2;
    }
    .intro-phone::before {
      content: "";
      position: absolute;
      inset: 16px;
      border: 1px solid #b9985540;
      border-radius: 10px;
      box-shadow: inset 0 0 0 3px #11111130;
      pointer-events: none;
      z-index: -1;
    }
    .intro.intro-phone h1 {
      box-sizing: content-box;
      width: 72%;
      height: auto;
      padding-top: clamp(32px, 15svh, 117px);
      padding-bottom: clamp(24px, 6svh, 48px);
      line-height: 0;
    }
    .intro-phone .brand-motto {
      margin: -5px -12px 0;
      color: #d0d6dc;
      text-shadow: 0 -0.6px 0.3px #ffffff80, 0 0.8px 0.4px #12171de6, 0 1.6px 1.2px #00000080;
      font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: 0.35px;
      text-align: center;
    }
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
      .intro-phone .brand-motto {
        background-image: linear-gradient(180deg, #89939d 0%, #e4e9ed 20%, #fbfcfd 35%, #a3adb6 48%, #dce2e7 64%, #bac4cd 82%, #8e99a4 100%);
        background-size: 100% 1.65em;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: none;
        filter: drop-shadow(0 -0.6px 0.25px #ffffff70) drop-shadow(0 0.8px 0.35px #12171de6) drop-shadow(0 1.6px 1px #00000080);
      }
    }
    .intro-phone .btninner-b {
      position: static;
      width: 100%;
      margin-top: auto;
      padding-top: 20px;
      padding-bottom: max(env(safe-area-inset-bottom), clamp(20px, 6svh, 46px));
    }
    .intro-phone .pdrl35 { padding: 0 16% !important; }
    .intro-phone button {
      height: 44px;
      font-size: 15px;
      line-height: 1.4;
      letter-spacing: -0.4px;
      border-radius: 7px;
      box-shadow: 0 3px 7px #00000029;
    }
    .intro-phone .btn-wh1 {
      background: linear-gradient(115deg, #dcc791, #b99a58);
      color: #29251e;
      border: 1px solid #e6d3a066;
      box-shadow: inset 0 1px 0 #fff4cd66, 0 4px 12px #00000030;
    }
    .intro-phone .btn-trans {
      background: #17171455;
      color: #ddcba3;
      border: 1px solid #b9985566;
      box-shadow: inset 0 1px 0 #ffffff08;
    }
    .intro-phone button:focus-visible { outline: 2px solid #f1d99e; outline-offset: 4px; }
    @media (min-width: 600px) {
      body { background: #e8e6e2; }
      .intro-phone {
        min-height: 560px;
        height: calc(100vh - 32px);
        height: calc(100svh - 32px);
        max-height: 915px;
        margin: 16px auto;
        border-radius: 24px;
        box-shadow: 0 12px 36px #17161135, inset 0 1px 0 #ffffff18;
        overflow: hidden;
      }
    }
    /* Let the phone shell scroll rather than clip a short landscape screen. */
    @media (min-width: 600px) {
      body.dia-phone-shell .intro-phone {
        height: auto !important;
        min-height: 100% !important;
        max-height: none;
        overflow: visible;
      }
    }
    @media (max-width: 359px) {
      .intro-phone .brand-motto { font-size: 14px; }
      .intro-phone button { font-size: 14px; }
    }
  
.intro-phone .btninner-b .btn-trans{background:linear-gradient(180deg,#00784f,#00583b)!important;border:1px solid #c9ad6b!important;color:#f8edcd!important;border-radius:10px;min-height:46px;box-shadow:inset 0 1px 0 #ffffff40,0 4px 0 #003c29,0 7px 13px #00000055!important;font-weight:700;}
.intro-phone .btninner-b .btn-trans:active{transform:translateY(2px);box-shadow:0 2px 0 #003c29!important;}

dialog{position:fixed;max-width:420px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);border:1px solid #ccd6dc;border-radius:22px;padding:30px 24px 24px;color:#1d3048;background:#faf9f6;box-shadow:0 20px 70px #06132b40;overflow:auto}dialog::backdrop{background:#06132b80}dialog h2{font-size:22px;margin:5px 30px 10px 0}dialog p{font-size:14px;color:#607082}dialog .close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:1px solid #cad4db;border-radius:50%;background:white;font-size:26px;line-height:1}dialog ol{padding-left:24px}dialog li{padding:8px 0 8px 4px;font-size:15px}dialog li::marker{color:#b34b0e;font-weight:700}dialog small{display:block;font-size:12px;color:#647487;margin-top:5px}.safari,.demo{display:block;padding:13px 16px;border-radius:10px;min-height:48px;background:#173e50;color:#fff;text-align:center;font-size:15px}.demo{background:#e9efed;color:#245347}#copy-start{border:1px solid #b9c8cf;border-radius:9px;background:white;padding:10px 15px;min-height:44px}#copy-result:empty{display:none}.manual-note{font-size:12px!important}
@media(min-width:600px) and (max-height:650px){.intro-phone{height:auto;max-height:none;overflow:visible}}

/* Reuse the existing entry design; keep the Safari action at the start button position. */
#safari-start{display:flex;align-items:center;justify-content:center;height:44px;padding:0 12px;margin-bottom:12px;font-size:15px;line-height:1.4;letter-spacing:-.4px;border-radius:7px}
#safari-start:focus-visible{outline:2px solid #f1d99e;outline-offset:4px}
.safari-install-option{margin-bottom:24px}
#safari-start{height:auto;min-height:48px;padding:11px 10px;font-size:13px;word-break:keep-all;text-align:center;margin-bottom:8px}
#safari-status{margin:12px 0 0;color:#c9c4b9;font-size:12px;line-height:1.75;overflow-wrap:anywhere;user-select:text}
@media(max-width:359px){#safari-start{font-size:14px}}

#install-option{margin-bottom:24px}#install-option .iphone-install{margin-bottom:8px}.install-caption{color:#fff;font-size:11px;font-weight:400;letter-spacing:-.3px;line-height:1.7;text-align:center;margin:0 -14px;word-break:keep-all}
@media(max-width:359px){.install-caption{font-size:10px;letter-spacing:-.4px}}

.install-quick-guide{margin:0 -12px 16px;color:#fff;text-align:center}.install-quick-guide p{margin:0 0 10px;text-align:center;font-size:16px;font-weight:700;line-height:1.5}.install-quick-guide ol{margin:0;padding:0;list-style-position:inside;text-align:center;font-size:12px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word}.install-quick-guide li+li{margin-top:5px}.install-quick-guide b{font-weight:600}
@media(max-width:359px){.install-quick-guide p{font-size:14px}.install-quick-guide ol{font-size:11px}}

/* User-saved Safari installation composition: coordinates scale with phone width. */
.intro-phone.safari-custom-screen{height:auto;max-height:none;overflow:visible}
#install-option.saved-install-canvas{position:relative;width:100%;container-type:inline-size;margin:0}
.saved-install-canvas .saved-block{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere;letter-spacing:normal;box-sizing:border-box;margin:0;padding:0;border:1px solid transparent}
.saved-install-canvas .saved-image img{width:100%;height:100%;object-fit:contain}
.saved-install-canvas .saved-manual{border:1px solid #eab286;border-radius:7px;box-shadow:0 3px 7px #0003;cursor:pointer}
.safari-custom-screen #standalone-actions{min-height:100svh;display:flex;flex-direction:column}