diff --git a/.github/workflows/deploy-backend.yml b/.github/workflows/deploy-backend.yml
new file mode 100644
index 0000000..ff41572
--- /dev/null
+++ b/.github/workflows/deploy-backend.yml
@@ -0,0 +1,169 @@
+name: Deploy Backend
+
+on:
+  push:
+    branches: [ "main", "deploy/aws-ec2" ]
+    paths: [ 'backend/**', 'database/**', 'compose.prod.yml', 'scripts/deploy-ecr-service.sh', '.github/workflows/deploy-backend.yml' ]
+  workflow_dispatch:
+    inputs:
+      stable_tag:
+        description: 'release-<40자리 SHA>를 stable 태그로 이동'
+        required: false
+        type: string
+
+concurrency:
+  group: ec2-production-deployment
+  cancel-in-progress: false
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  ci-backend:
+    name: Backend CI (Spotless & Test)
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' || inputs.stable_tag == ''
+    services:
+      mysql:
+        image: mysql:8.0
+        env:
+          MYSQL_DATABASE: snowthing_test
+          MYSQL_USER: snowuser
+          MYSQL_PASSWORD: snowthing_pass_2026!
+          MYSQL_ROOT_PASSWORD: snowthing_root_2026!
+        ports: [ '3306:3306' ]
+        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=5
+    env:
+      SNOWTHING_DB_USERNAME: snowuser
+      SNOWTHING_DB_PASSWORD: snowthing_pass_2026!
+      SNOWTHING_TEST_DB_URL: jdbc:mysql://localhost:3306/snowthing_test?useSSL=false&allowPublicKeyRetrieval=true&characterEncoding=UTF-8&serverTimezone=Asia/Seoul
+      SNOWTHING_TEST_DB_USERNAME: snowuser
+      SNOWTHING_TEST_DB_PASSWORD: snowthing_pass_2026!
+    defaults:
+      run:
+        working-directory: ./backend
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-java@v6
+        with:
+          java-version: '21'
+          distribution: 'temurin'
+      - uses: gradle/actions/setup-gradle@v6
+      - run: chmod +x gradlew
+      - run: ./gradlew spotlessCheck
+      - run: ./gradlew test build -x spotlessCheck
+
+  deploy-backend:
+    name: Build, Push and Deploy Backend Digest
+    needs: [ci-backend]
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    if: (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/deploy/aws-ec2') && (github.event_name == 'push' || inputs.stable_tag == '')
+    steps:
+      - uses: actions/checkout@v7
+      - name: Configure AWS credentials with OIDC
+        uses: aws-actions/configure-aws-credentials@v6
+        with:
+          role-to-assume: ${{ vars.AWS_DEPLOY_ROLE_ARN }}
+          aws-region: ${{ vars.AWS_REGION }}
+
+      - name: Log in to Amazon ECR
+        id: ecr
+        run: |
+          set -euo pipefail
+          ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
+          REGISTRY="${ACCOUNT_ID}.dkr.ecr.${{ vars.AWS_REGION }}.amazonaws.com"
+          aws ecr get-login-password --region "${{ vars.AWS_REGION }}" | docker login --username AWS --password-stdin "$REGISTRY"
+          echo "registry=$REGISTRY" >> "$GITHUB_OUTPUT"
+
+      - name: Build or reuse commit image
+        id: image
+        env:
+          REGISTRY: ${{ steps.ecr.outputs.registry }}
+          REPOSITORY: ${{ vars.ECR_BACKEND_REPOSITORY }}
+          COMMIT_SHA: ${{ github.sha }}
+        run: |
+          set -euo pipefail
+          CANDIDATE_TAG="candidate-${COMMIT_SHA}"
+          RELEASE_TAG="release-${COMMIT_SHA}"
+          if aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$RELEASE_TAG" >/dev/null 2>&1; then
+            SOURCE_TAG="$RELEASE_TAG"; PROMOTE=false
+          elif aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$CANDIDATE_TAG" >/dev/null 2>&1; then
+            SOURCE_TAG="$CANDIDATE_TAG"; PROMOTE=true
+          else
+            docker build --tag "$REGISTRY/$REPOSITORY:$CANDIDATE_TAG" ./backend
+            docker push "$REGISTRY/$REPOSITORY:$CANDIDATE_TAG"
+            SOURCE_TAG="$CANDIDATE_TAG"; PROMOTE=true
+          fi
+          DIGEST=$(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" --query 'imageDetails[0].imageDigest' --output text)
+          echo "image_uri=$REGISTRY/$REPOSITORY@$DIGEST" >> "$GITHUB_OUTPUT"
+          echo "source_tag=$SOURCE_TAG" >> "$GITHUB_OUTPUT"
+          echo "promote=$PROMOTE" >> "$GITHUB_OUTPUT"
+
+      - name: Deploy backend digest via SSM
+        env:
+          INSTANCE_ID: ${{ vars.EC2_INSTANCE_ID }}
+          DEPLOY_BRANCH: ${{ github.ref_name }}
+          IMAGE_URI: ${{ steps.image.outputs.image_uri }}
+          AWS_REGION: ${{ vars.AWS_REGION }}
+        run: |
+          set -euo pipefail
+          PARAMETERS=$(jq -n --arg branch "$DEPLOY_BRANCH" --arg image "$IMAGE_URI" --arg region "$AWS_REGION" '{commands: [
+            "set -e", "cd /home/ubuntu/snowthing",
+            "git -c safe.directory=/home/ubuntu/snowthing fetch origin \"" + $branch + "\"",
+            "git -c safe.directory=/home/ubuntu/snowthing reset --hard \"origin/" + $branch + "\"",
+            "chmod +x scripts/deploy-ecr-service.sh",
+            "scripts/deploy-ecr-service.sh backend \"" + $image + "\" \"" + $region + "\""
+          ]}')
+          COMMAND_ID=$(aws ssm send-command --instance-ids "$INSTANCE_ID" --document-name AWS-RunShellScript --timeout-seconds 900 --parameters "$PARAMETERS" --comment "Deploy backend digest from ${GITHUB_REPOSITORY}@${GITHUB_SHA}" --query 'Command.CommandId' --output text)
+          echo "SSM command ID: $COMMAND_ID"
+          STATUS=Pending
+          for _ in $(seq 1 180); do
+            STATUS=$(aws ssm get-command-invocation --command-id "$COMMAND_ID" --instance-id "$INSTANCE_ID" --query Status --output text 2>/dev/null || echo Pending)
+            case "$STATUS" in Success|Cancelled|TimedOut|Failed|Cancelling) break ;; esac
+            sleep 5
+          done
+          aws ssm get-command-invocation --command-id "$COMMAND_ID" --instance-id "$INSTANCE_ID" --query '{Status:Status,StandardOutput:StandardOutputContent,StandardError:StandardErrorContent}'
+          test "$STATUS" = Success
+
+      - name: Promote successful image to release
+        if: steps.image.outputs.promote == 'true'
+        env:
+          REPOSITORY: ${{ vars.ECR_BACKEND_REPOSITORY }}
+          SOURCE_TAG: ${{ steps.image.outputs.source_tag }}
+          RELEASE_TAG: release-${{ github.sha }}
+        run: |
+          set -euo pipefail
+          MANIFEST=$(aws ecr batch-get-image --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" --query 'images[0].imageManifest' --output text)
+          aws ecr put-image --repository-name "$REPOSITORY" --image-tag "$RELEASE_TAG" --image-manifest "$MANIFEST" >/dev/null
+          aws ecr batch-delete-image --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" >/dev/null
+
+  mark-stable-backend:
+    name: Mark Backend Release as Stable
+    runs-on: ubuntu-latest
+    if: github.event_name == 'workflow_dispatch' && inputs.stable_tag != ''
+    steps:
+      - name: Configure AWS credentials with OIDC
+        uses: aws-actions/configure-aws-credentials@v6
+        with:
+          role-to-assume: ${{ vars.AWS_DEPLOY_ROLE_ARN }}
+          aws-region: ${{ vars.AWS_REGION }}
+      - name: Move all release tags on the digest to one stable tag
+        env:
+          REPOSITORY: ${{ vars.ECR_BACKEND_REPOSITORY }}
+          SOURCE_TAG: ${{ inputs.stable_tag }}
+        run: |
+          set -euo pipefail
+          [[ "$SOURCE_TAG" =~ ^release-[0-9a-f]{40}$ ]]
+          DIGEST=$(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" --query 'imageDetails[0].imageDigest' --output text)
+          MANIFEST=$(aws ecr batch-get-image --repository-name "$REPOSITORY" --image-ids imageDigest="$DIGEST" --query 'images[0].imageManifest' --output text)
+          STABLE_TAG="stable-${SOURCE_TAG#release-}"
+          aws ecr put-image --repository-name "$REPOSITORY" --image-tag "$STABLE_TAG" --image-manifest "$MANIFEST" >/dev/null
+          mapfile -t RELEASE_TAGS < <(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageDigest="$DIGEST" --query 'imageDetails[0].imageTags[?starts_with(@, `release-`)]' --output text | tr '\t' '\n')
+          for tag in "${RELEASE_TAGS[@]}"; do
+            [[ -n "$tag" ]] && aws ecr batch-delete-image --repository-name "$REPOSITORY" --image-ids imageTag="$tag" >/dev/null
+          done
+          echo "$STABLE_TAG -> $DIGEST"
diff --git a/.github/workflows/deploy-frontend.yml b/.github/workflows/deploy-frontend.yml
new file mode 100644
index 0000000..8d34db5
--- /dev/null
+++ b/.github/workflows/deploy-frontend.yml
@@ -0,0 +1,205 @@
+name: Deploy Frontend
+
+on:
+  push:
+    branches: [ "main", "deploy/aws-ec2" ]
+    paths: [ 'frontend/**', 'compose.prod.yml', 'scripts/deploy-ecr-service.sh', '.github/workflows/deploy-frontend.yml' ]
+  workflow_dispatch:
+    inputs:
+      rollback_tag:
+        description: '비워 두면 현재 커밋 배포, 입력하면 release-<40자리 SHA> 또는 stable-<40자리 SHA>로 복구'
+        required: false
+        type: string
+      stable_tag:
+        description: 'release-<40자리 SHA>를 stable 태그로 이동'
+        required: false
+        type: string
+
+concurrency:
+  group: ec2-production-deployment
+  cancel-in-progress: false
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  ci-frontend:
+    name: Frontend CI (Build Verification)
+    if: github.event_name == 'push' || (inputs.rollback_tag == '' && inputs.stable_tag == '')
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+      - run: npm ci --legacy-peer-deps
+      - run: npm run build
+
+  deploy-frontend:
+    name: Build, Push and Deploy Frontend Digest
+    needs: [ci-frontend]
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    if: (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/deploy/aws-ec2') && (github.event_name == 'push' || (inputs.rollback_tag == '' && inputs.stable_tag == ''))
+    steps:
+      - uses: actions/checkout@v7
+      - name: Configure AWS credentials with OIDC
+        uses: aws-actions/configure-aws-credentials@v6
+        with:
+          role-to-assume: ${{ vars.AWS_DEPLOY_ROLE_ARN }}
+          aws-region: ${{ vars.AWS_REGION }}
+
+      - name: Log in to Amazon ECR
+        id: ecr
+        run: |
+          set -euo pipefail
+          ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
+          REGISTRY="${ACCOUNT_ID}.dkr.ecr.${{ vars.AWS_REGION }}.amazonaws.com"
+          aws ecr get-login-password --region "${{ vars.AWS_REGION }}" | docker login --username AWS --password-stdin "$REGISTRY"
+          echo "registry=$REGISTRY" >> "$GITHUB_OUTPUT"
+
+      - name: Build or reuse commit image
+        id: image
+        env:
+          REGISTRY: ${{ steps.ecr.outputs.registry }}
+          REPOSITORY: ${{ vars.ECR_FRONTEND_REPOSITORY }}
+          COMMIT_SHA: ${{ github.sha }}
+          API_BASE_URL: ${{ vars.NEXT_PUBLIC_API_BASE_URL }}
+        run: |
+          set -euo pipefail
+          CANDIDATE_TAG="candidate-${COMMIT_SHA}"
+          RELEASE_TAG="release-${COMMIT_SHA}"
+          if aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$RELEASE_TAG" >/dev/null 2>&1; then
+            SOURCE_TAG="$RELEASE_TAG"; PROMOTE=false
+          elif aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$CANDIDATE_TAG" >/dev/null 2>&1; then
+            SOURCE_TAG="$CANDIDATE_TAG"; PROMOTE=true
+          else
+            docker build --build-arg NEXT_PUBLIC_API_BASE_URL="$API_BASE_URL" --tag "$REGISTRY/$REPOSITORY:$CANDIDATE_TAG" ./frontend
+            docker push "$REGISTRY/$REPOSITORY:$CANDIDATE_TAG"
+            SOURCE_TAG="$CANDIDATE_TAG"; PROMOTE=true
+          fi
+          DIGEST=$(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" --query 'imageDetails[0].imageDigest' --output text)
+          echo "image_uri=$REGISTRY/$REPOSITORY@$DIGEST" >> "$GITHUB_OUTPUT"
+          echo "source_tag=$SOURCE_TAG" >> "$GITHUB_OUTPUT"
+          echo "promote=$PROMOTE" >> "$GITHUB_OUTPUT"
+
+      - name: Deploy frontend digest via SSM
+        env:
+          INSTANCE_ID: ${{ vars.EC2_INSTANCE_ID }}
+          DEPLOY_BRANCH: ${{ github.ref_name }}
+          IMAGE_URI: ${{ steps.image.outputs.image_uri }}
+          AWS_REGION: ${{ vars.AWS_REGION }}
+        run: |
+          set -euo pipefail
+          PARAMETERS=$(jq -n --arg branch "$DEPLOY_BRANCH" --arg image "$IMAGE_URI" --arg region "$AWS_REGION" '{commands: [
+            "set -e", "cd /home/ubuntu/snowthing",
+            "git -c safe.directory=/home/ubuntu/snowthing fetch origin \"" + $branch + "\"",
+            "git -c safe.directory=/home/ubuntu/snowthing reset --hard \"origin/" + $branch + "\"",
+            "chmod +x scripts/deploy-ecr-service.sh",
+            "scripts/deploy-ecr-service.sh frontend \"" + $image + "\" \"" + $region + "\""
+          ]}')
+          COMMAND_ID=$(aws ssm send-command --instance-ids "$INSTANCE_ID" --document-name AWS-RunShellScript --timeout-seconds 900 --parameters "$PARAMETERS" --comment "Deploy frontend digest from ${GITHUB_REPOSITORY}@${GITHUB_SHA}" --query 'Command.CommandId' --output text)
+          echo "SSM command ID: $COMMAND_ID"
+          STATUS=Pending
+          for _ in $(seq 1 180); do
+            STATUS=$(aws ssm get-command-invocation --command-id "$COMMAND_ID" --instance-id "$INSTANCE_ID" --query Status --output text 2>/dev/null || echo Pending)
+            case "$STATUS" in Success|Cancelled|TimedOut|Failed|Cancelling) break ;; esac
+            sleep 5
+          done
+          aws ssm get-command-invocation --command-id "$COMMAND_ID" --instance-id "$INSTANCE_ID" --query '{Status:Status,StandardOutput:StandardOutputContent,StandardError:StandardErrorContent}'
+          test "$STATUS" = Success
+
+      - name: Promote successful image to release
+        if: steps.image.outputs.promote == 'true'
+        env:
+          REPOSITORY: ${{ vars.ECR_FRONTEND_REPOSITORY }}
+          SOURCE_TAG: ${{ steps.image.outputs.source_tag }}
+          RELEASE_TAG: release-${{ github.sha }}
+        run: |
+          set -euo pipefail
+          MANIFEST=$(aws ecr batch-get-image --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" --query 'images[0].imageManifest' --output text)
+          aws ecr put-image --repository-name "$REPOSITORY" --image-tag "$RELEASE_TAG" --image-manifest "$MANIFEST" >/dev/null
+          aws ecr batch-delete-image --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" >/dev/null
+
+  rollback-frontend:
+    name: Roll Back Frontend to Selected Digest
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    if: github.event_name == 'workflow_dispatch' && inputs.rollback_tag != ''
+    steps:
+      - name: Validate rollback tag
+        env:
+          ROLLBACK_TAG: ${{ inputs.rollback_tag }}
+        run: |
+          set -euo pipefail
+          [[ "$ROLLBACK_TAG" =~ ^(release|stable)-[0-9a-f]{40}$ ]]
+
+      - name: Configure AWS credentials with OIDC
+        uses: aws-actions/configure-aws-credentials@v6
+        with:
+          role-to-assume: ${{ vars.AWS_DEPLOY_ROLE_ARN }}
+          aws-region: ${{ vars.AWS_REGION }}
+
+      - name: Resolve rollback digest and deploy via SSM
+        env:
+          INSTANCE_ID: ${{ vars.EC2_INSTANCE_ID }}
+          DEPLOY_BRANCH: ${{ github.ref_name }}
+          REPOSITORY: ${{ vars.ECR_FRONTEND_REPOSITORY }}
+          AWS_REGION: ${{ vars.AWS_REGION }}
+          ROLLBACK_TAG: ${{ inputs.rollback_tag }}
+        run: |
+          set -euo pipefail
+          ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
+          REGISTRY="${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com"
+          DIGEST=$(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$ROLLBACK_TAG" --query 'imageDetails[0].imageDigest' --output text)
+          IMAGE_URI="$REGISTRY/$REPOSITORY@$DIGEST"
+          PARAMETERS=$(jq -n --arg branch "$DEPLOY_BRANCH" --arg image "$IMAGE_URI" --arg region "$AWS_REGION" '{commands: [
+            "set -e", "cd /home/ubuntu/snowthing",
+            "git -c safe.directory=/home/ubuntu/snowthing fetch origin \"" + $branch + "\"",
+            "git -c safe.directory=/home/ubuntu/snowthing reset --hard \"origin/" + $branch + "\"",
+            "chmod +x scripts/deploy-ecr-service.sh",
+            "scripts/deploy-ecr-service.sh frontend \"" + $image + "\" \"" + $region + "\""
+          ]}')
+          COMMAND_ID=$(aws ssm send-command --instance-ids "$INSTANCE_ID" --document-name AWS-RunShellScript --timeout-seconds 900 --parameters "$PARAMETERS" --comment "Rollback frontend to $ROLLBACK_TAG" --query 'Command.CommandId' --output text)
+          echo "SSM command ID: $COMMAND_ID"
+          STATUS=Pending
+          for _ in $(seq 1 180); do
+            STATUS=$(aws ssm get-command-invocation --command-id "$COMMAND_ID" --instance-id "$INSTANCE_ID" --query Status --output text 2>/dev/null || echo Pending)
+            case "$STATUS" in Success|Cancelled|TimedOut|Failed|Cancelling) break ;; esac
+            sleep 5
+          done
+          aws ssm get-command-invocation --command-id "$COMMAND_ID" --instance-id "$INSTANCE_ID" --query '{Status:Status,StandardOutput:StandardOutputContent,StandardError:StandardErrorContent}'
+          test "$STATUS" = Success
+
+  mark-stable-frontend:
+    name: Mark Frontend Release as Stable
+    runs-on: ubuntu-latest
+    if: github.event_name == 'workflow_dispatch' && inputs.stable_tag != ''
+    steps:
+      - name: Configure AWS credentials with OIDC
+        uses: aws-actions/configure-aws-credentials@v6
+        with:
+          role-to-assume: ${{ vars.AWS_DEPLOY_ROLE_ARN }}
+          aws-region: ${{ vars.AWS_REGION }}
+      - name: Move all release tags on the digest to one stable tag
+        env:
+          REPOSITORY: ${{ vars.ECR_FRONTEND_REPOSITORY }}
+          SOURCE_TAG: ${{ inputs.stable_tag }}
+        run: |
+          set -euo pipefail
+          [[ "$SOURCE_TAG" =~ ^release-[0-9a-f]{40}$ ]]
+          DIGEST=$(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" --query 'imageDetails[0].imageDigest' --output text)
+          MANIFEST=$(aws ecr batch-get-image --repository-name "$REPOSITORY" --image-ids imageDigest="$DIGEST" --query 'images[0].imageManifest' --output text)
+          STABLE_TAG="stable-${SOURCE_TAG#release-}"
+          aws ecr put-image --repository-name "$REPOSITORY" --image-tag "$STABLE_TAG" --image-manifest "$MANIFEST" >/dev/null
+          mapfile -t RELEASE_TAGS < <(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageDigest="$DIGEST" --query 'imageDetails[0].imageTags[?starts_with(@, `release-`)]' --output text | tr '\t' '\n')
+          for tag in "${RELEASE_TAGS[@]}"; do
+            [[ -n "$tag" ]] && aws ecr batch-delete-image --repository-name "$REPOSITORY" --image-ids imageTag="$tag" >/dev/null
+          done
+          echo "$STABLE_TAG -> $DIGEST"
diff --git a/.github/workflows/gemini-review.yml b/.github/workflows/gemini-review.yml
index 9d12f17..a2c96b1 100644
--- a/.github/workflows/gemini-review.yml
+++ b/.github/workflows/gemini-review.yml
@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
 
       - name: Run Gemini Review via REST API
         env:
diff --git a/.github/workflows/gradle.yml b/.github/workflows/gradle.yml
index de79e44..ffed6d6 100644
--- a/.github/workflows/gradle.yml
+++ b/.github/workflows/gradle.yml
@@ -17,18 +17,18 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
       - name: Set up JDK 21
-        uses: actions/setup-java@v5
+        uses: actions/setup-java@v6
         with:
           java-version: '21'
           distribution: 'temurin'
 
       - name: Setup Gradle
-        uses: gradle/actions/setup-gradle@v4
+        uses: gradle/actions/setup-gradle@v6
 
       - name: Grant execute permission for gradlew
         run: chmod +x gradlew
@@ -66,18 +66,18 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
       - name: Set up JDK 21
-        uses: actions/setup-java@v5
+        uses: actions/setup-java@v6
         with:
           java-version: '21'
           distribution: 'temurin'
 
       - name: Setup Gradle
-        uses: gradle/actions/setup-gradle@v4
+        uses: gradle/actions/setup-gradle@v6
 
       - name: Grant execute permission for gradlew
         run: chmod +x gradlew
diff --git a/.github/workflows/manage-ecr-release.yml b/.github/workflows/manage-ecr-release.yml
new file mode 100644
index 0000000..258e5ee
--- /dev/null
+++ b/.github/workflows/manage-ecr-release.yml
@@ -0,0 +1,117 @@
+name: Manage ECR Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      operation:
+        description: 실행할 작업
+        required: true
+        type: choice
+        options: [rollback, mark-stable]
+      service:
+        description: 대상 서비스
+        required: true
+        type: choice
+        options: [backend, frontend]
+      source_tag:
+        description: release-<전체 SHA> 또는 stable-<전체 SHA>
+        required: true
+        type: string
+
+concurrency:
+  group: ec2-production-deployment
+  cancel-in-progress: false
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  manage-release:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Validate input
+        env:
+          OPERATION: ${{ inputs.operation }}
+          SOURCE_TAG: ${{ inputs.source_tag }}
+        run: |
+          set -euo pipefail
+          if [[ ! "$SOURCE_TAG" =~ ^(release|stable)-[0-9a-f]{40}$ ]]; then
+            echo "태그 형식은 release-<40자리 SHA> 또는 stable-<40자리 SHA>여야 합니다." >&2
+            exit 2
+          fi
+          if [[ "$OPERATION" == "mark-stable" && ! "$SOURCE_TAG" =~ ^release- ]]; then
+            echo "stable 지정은 release 태그에서만 가능합니다." >&2
+            exit 2
+          fi
+
+      - uses: actions/checkout@v7
+
+      - name: Configure AWS credentials with OIDC
+        uses: aws-actions/configure-aws-credentials@v6
+        with:
+          role-to-assume: ${{ vars.AWS_DEPLOY_ROLE_ARN }}
+          aws-region: ${{ vars.AWS_REGION }}
+
+      - name: Resolve repository and digest
+        id: image
+        env:
+          SERVICE: ${{ inputs.service }}
+          SOURCE_TAG: ${{ inputs.source_tag }}
+        run: |
+          set -euo pipefail
+          if [[ "$SERVICE" == "backend" ]]; then
+            REPOSITORY="${{ vars.ECR_BACKEND_REPOSITORY }}"
+          else
+            REPOSITORY="${{ vars.ECR_FRONTEND_REPOSITORY }}"
+          fi
+          ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
+          REGISTRY="${ACCOUNT_ID}.dkr.ecr.${{ vars.AWS_REGION }}.amazonaws.com"
+          DIGEST=$(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" --query 'imageDetails[0].imageDigest' --output text)
+          echo "repository=$REPOSITORY" >> "$GITHUB_OUTPUT"
+          echo "image_uri=$REGISTRY/$REPOSITORY@$DIGEST" >> "$GITHUB_OUTPUT"
+
+      - name: Roll back to selected digest via SSM
+        if: inputs.operation == 'rollback'
+        env:
+          INSTANCE_ID: ${{ vars.EC2_INSTANCE_ID }}
+          DEPLOY_BRANCH: ${{ github.ref_name }}
+          IMAGE_URI: ${{ steps.image.outputs.image_uri }}
+          AWS_REGION: ${{ vars.AWS_REGION }}
+          SERVICE: ${{ inputs.service }}
+        run: |
+          set -euo pipefail
+          PARAMETERS=$(jq -n --arg branch "$DEPLOY_BRANCH" --arg image "$IMAGE_URI" --arg region "$AWS_REGION" --arg service "$SERVICE" '{commands: [
+            "set -e", "cd /home/ubuntu/snowthing",
+            "git -c safe.directory=/home/ubuntu/snowthing fetch origin \"" + $branch + "\"",
+            "git -c safe.directory=/home/ubuntu/snowthing reset --hard \"origin/" + $branch + "\"",
+            "chmod +x scripts/deploy-ecr-service.sh",
+            "scripts/deploy-ecr-service.sh \"" + $service + "\" \"" + $image + "\" \"" + $region + "\""
+          ]}')
+          COMMAND_ID=$(aws ssm send-command --instance-ids "$INSTANCE_ID" --document-name AWS-RunShellScript --timeout-seconds 900 --parameters "$PARAMETERS" --comment "Rollback $SERVICE to ${{ inputs.source_tag }}" --query 'Command.CommandId' --output text)
+          STATUS=Pending
+          for _ in $(seq 1 180); do
+            STATUS=$(aws ssm get-command-invocation --command-id "$COMMAND_ID" --instance-id "$INSTANCE_ID" --query Status --output text 2>/dev/null || echo Pending)
+            case "$STATUS" in Success|Cancelled|TimedOut|Failed|Cancelling) break ;; esac
+            sleep 5
+          done
+          aws ssm get-command-invocation --command-id "$COMMAND_ID" --instance-id "$INSTANCE_ID" --query '{Status:Status,StandardOutput:StandardOutputContent,StandardError:StandardErrorContent}'
+          test "$STATUS" = Success
+
+      - name: Move release tag to stable
+        if: inputs.operation == 'mark-stable'
+        env:
+          REPOSITORY: ${{ steps.image.outputs.repository }}
+          SOURCE_TAG: ${{ inputs.source_tag }}
+        run: |
+          set -euo pipefail
+          STABLE_TAG="stable-${SOURCE_TAG#release-}"
+          DIGEST=$(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageTag="$SOURCE_TAG" --query 'imageDetails[0].imageDigest' --output text)
+          MANIFEST=$(aws ecr batch-get-image --repository-name "$REPOSITORY" --image-ids imageDigest="$DIGEST" --query 'images[0].imageManifest' --output text)
+          aws ecr put-image --repository-name "$REPOSITORY" --image-tag "$STABLE_TAG" --image-manifest "$MANIFEST" >/dev/null
+          mapfile -t RELEASE_TAGS < <(aws ecr describe-images --repository-name "$REPOSITORY" --image-ids imageDigest="$DIGEST" --query 'imageDetails[0].imageTags[?starts_with(@, `release-`)]' --output text | tr '\t' '\n')
+          for tag in "${RELEASE_TAGS[@]}"; do
+            [[ -n "$tag" ]] && aws ecr batch-delete-image --repository-name "$REPOSITORY" --image-ids imageTag="$tag" >/dev/null
+          done
+          echo "$STABLE_TAG -> $DIGEST"
diff --git a/backend/Dockerfile b/backend/Dockerfile
new file mode 100644
index 0000000..5aaa511
--- /dev/null
+++ b/backend/Dockerfile
@@ -0,0 +1,33 @@
+# ==========================================
+# 1단계: 빌드 스테이지 (JDK 21)
+# ==========================================
+FROM eclipse-temurin:21-jdk-jammy AS builder
+WORKDIR /app
+
+# Gradle 래퍼 및 빌드 스크립트 복사
+COPY gradlew .
+COPY gradle gradle
+COPY build.gradle settings.gradle ./
+RUN chmod +x ./gradlew
+
+# 소스코드 복사 및 bootJar 빌드 (테스트 제외하여 빠른 배포 빌드)
+COPY src src
+RUN ./gradlew bootJar -x test --no-daemon
+
+# ==========================================
+# 2단계: 실행 스테이지 (초경량 JRE 21)
+# ==========================================
+FROM eclipse-temurin:21-jre-jammy AS runner
+WORKDIR /app
+
+# 보안을 위한 비root 시스템 유저 생성
+RUN addgroup --system --gid 1001 spring && adduser --system --uid 1001 --ingroup spring spring
+USER spring:spring
+
+# 빌더에서 생성된 실행 가능한 jar 파일만 추출
+COPY --from=builder --chown=spring:spring /app/build/libs/*.jar app.jar
+
+EXPOSE 8080
+ENV TZ=Asia/Seoul
+
+ENTRYPOINT ["java", "-Djava.security.egd=file:/dev/./urandom", "-jar", "app.jar"]
diff --git a/backend/build.gradle b/backend/build.gradle
index b48eea1..5c742d3 100644
--- a/backend/build.gradle
+++ b/backend/build.gradle
@@ -31,11 +31,15 @@ dependencies {
     implementation 'org.springframework.boot:spring-boot-starter-validation'
     implementation 'org.springframework.boot:spring-boot-starter-jackson'
     implementation 'com.fasterxml.jackson.core:jackson-databind'
-
     // JPA & DB
     implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
     runtimeOnly 'com.mysql:mysql-connector-j'
 
+    // AWS Advanced JDBC Wrapper & RDS/S3 SDK
+    implementation 'software.amazon.jdbc:aws-advanced-jdbc-wrapper:2.3.7'
+    implementation 'software.amazon.awssdk:rds:2.25.70'
+    implementation 'software.amazon.awssdk:s3:2.25.70'
+
     // Security & Session Redis
     implementation 'org.springframework.boot:spring-boot-starter-security'
     implementation 'org.springframework.boot:spring-boot-starter-data-redis'
diff --git a/backend/src/main/java/com/ikae/snowthing/domain/auth/dto/MemberLoginRequest.java b/backend/src/main/java/com/ikae/snowthing/domain/auth/dto/MemberLoginRequest.java
index 545819d..f11e29b 100644
--- a/backend/src/main/java/com/ikae/snowthing/domain/auth/dto/MemberLoginRequest.java
+++ b/backend/src/main/java/com/ikae/snowthing/domain/auth/dto/MemberLoginRequest.java
@@ -16,12 +16,16 @@ public class MemberLoginRequest {
     @NotBlank(message = "비밀번호는 필수 입력값입니다.")
     private String password;
 
-    private boolean rememberMe = false; // 로그인 상태 유지 (30일 지속 세션 쿠키)
+    private Boolean rememberMe = Boolean.FALSE; // 로그인 상태 유지 (30일 지속 세션 쿠키)
 
     @Builder
-    public MemberLoginRequest(String email, String password, boolean rememberMe) {
+    public MemberLoginRequest(String email, String password, Boolean rememberMe) {
         this.email = email;
         this.password = password;
-        this.rememberMe = rememberMe;
+        this.rememberMe = rememberMe != null ? rememberMe : Boolean.FALSE;
+    }
+
+    public boolean isRememberMe() {
+        return Boolean.TRUE.equals(this.rememberMe);
     }
 }
diff --git a/backend/src/main/java/com/ikae/snowthing/domain/image/controller/ImageController.java b/backend/src/main/java/com/ikae/snowthing/domain/image/controller/ImageController.java
new file mode 100644
index 0000000..5549e51
--- /dev/null
+++ b/backend/src/main/java/com/ikae/snowthing/domain/image/controller/ImageController.java
@@ -0,0 +1,67 @@
+package com.ikae.snowthing.domain.image.controller;
+
+import jakarta.servlet.http.HttpServletRequest;
+
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import com.ikae.snowthing.domain.image.dto.ImageDownloadResponse;
+import com.ikae.snowthing.domain.image.dto.ImageUploadResponse;
+import com.ikae.snowthing.domain.image.service.ImageService;
+import com.ikae.snowthing.global.error.ErrorCode;
+import com.ikae.snowthing.global.exception.CustomAuthException;
+import com.ikae.snowthing.global.security.CustomUserDetails;
+
+import lombok.RequiredArgsConstructor;
+
+@RestController
+@RequestMapping("/api/v1/images")
+@RequiredArgsConstructor
+public class ImageController {
+
+    private final ImageService imageService;
+
+    @PostMapping(consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
+    public ResponseEntity<ImageUploadResponse> uploadImage(
+            @RequestParam("file") MultipartFile file,
+            @AuthenticationPrincipal CustomUserDetails userDetails) {
+        if (userDetails == null) {
+            throw new CustomAuthException(ErrorCode.ACCESS_DENIED);
+        }
+
+        ImageUploadResponse response = imageService.uploadImage(file);
+        return ResponseEntity.status(HttpStatus.CREATED).body(response);
+    }
+
+    @GetMapping("/**")
+    public ResponseEntity<byte[]> getImage(
+            HttpServletRequest request, @AuthenticationPrincipal CustomUserDetails userDetails) {
+        if (userDetails == null) {
+            throw new CustomAuthException(ErrorCode.ACCESS_DENIED);
+        }
+
+        String path = request.getRequestURI();
+        String prefix = "/api/v1/images/";
+        if (!path.startsWith(prefix)) {
+            return ResponseEntity.badRequest().build();
+        }
+
+        String imageKey = path.substring(prefix.length());
+        ImageDownloadResponse download = imageService.getImage(imageKey);
+
+        HttpHeaders headers = new HttpHeaders();
+        headers.setContentType(MediaType.parseMediaType(download.contentType()));
+        headers.setCacheControl("public, max-age=86400");
+
+        return new ResponseEntity<>(download.data(), headers, HttpStatus.OK);
+    }
+}
diff --git a/backend/src/main/java/com/ikae/snowthing/domain/image/dto/ImageDownloadResponse.java b/backend/src/main/java/com/ikae/snowthing/domain/image/dto/ImageDownloadResponse.java
new file mode 100644
index 0000000..c888f9f
--- /dev/null
+++ b/backend/src/main/java/com/ikae/snowthing/domain/image/dto/ImageDownloadResponse.java
@@ -0,0 +1,12 @@
+package com.ikae.snowthing.domain.image.dto;
+
+public record ImageDownloadResponse(byte[] data, String contentType) {
+    public ImageDownloadResponse {
+        data = data != null ? data.clone() : new byte[0];
+    }
+
+    @Override
+    public byte[] data() {
+        return data.clone();
+    }
+}
diff --git a/backend/src/main/java/com/ikae/snowthing/domain/image/dto/ImageUploadResponse.java b/backend/src/main/java/com/ikae/snowthing/domain/image/dto/ImageUploadResponse.java
new file mode 100644
index 0000000..d110119
--- /dev/null
+++ b/backend/src/main/java/com/ikae/snowthing/domain/image/dto/ImageUploadResponse.java
@@ -0,0 +1,3 @@
+package com.ikae.snowthing.domain.image.dto;
+
+public record ImageUploadResponse(String imageUrl, String imageKey) {}
diff --git a/backend/src/main/java/com/ikae/snowthing/domain/image/service/ImageService.java b/backend/src/main/java/com/ikae/snowthing/domain/image/service/ImageService.java
new file mode 100644
index 0000000..273a0b3
--- /dev/null
+++ b/backend/src/main/java/com/ikae/snowthing/domain/image/service/ImageService.java
@@ -0,0 +1,126 @@
+package com.ikae.snowthing.domain.image.service;
+
+import java.io.IOException;
+import java.util.Set;
+import java.util.UUID;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+import org.springframework.web.multipart.MultipartFile;
+
+import com.ikae.snowthing.domain.image.dto.ImageDownloadResponse;
+import com.ikae.snowthing.domain.image.dto.ImageUploadResponse;
+import com.ikae.snowthing.global.error.ErrorCode;
+import com.ikae.snowthing.global.exception.BusinessException;
+
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import software.amazon.awssdk.core.ResponseInputStream;
+import software.amazon.awssdk.core.sync.RequestBody;
+import software.amazon.awssdk.services.s3.S3Client;
+import software.amazon.awssdk.services.s3.model.GetObjectRequest;
+import software.amazon.awssdk.services.s3.model.GetObjectResponse;
+import software.amazon.awssdk.services.s3.model.NoSuchKeyException;
+import software.amazon.awssdk.services.s3.model.PutObjectRequest;
+import software.amazon.awssdk.services.s3.model.S3Exception;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class ImageService {
+
+    private static final long MAX_FILE_SIZE = 5 * 1024 * 1024L; // 5MB
+    private static final Set<String> ALLOWED_EXTENSIONS = Set.of("jpg", "jpeg", "png", "webp");
+    private static final Set<String> ALLOWED_MIME_TYPES =
+            Set.of("image/jpeg", "image/png", "image/webp");
+
+    private final S3Client s3Client;
+
+    @Value("${cloud.aws.s3.bucket:snowthing-media-00001}")
+    private String bucketName;
+
+    public ImageUploadResponse uploadImage(MultipartFile file) {
+        validateFile(file);
+
+        String originalFilename = file.getOriginalFilename();
+        String extension = extractExtension(originalFilename);
+        String imageKey = "images/" + UUID.randomUUID() + "." + extension;
+
+        try {
+            PutObjectRequest putRequest =
+                    PutObjectRequest.builder()
+                            .bucket(bucketName)
+                            .key(imageKey)
+                            .contentType(file.getContentType())
+                            .build();
+
+            s3Client.putObject(
+                    putRequest, RequestBody.fromInputStream(file.getInputStream(), file.getSize()));
+
+            String imageUrl = "/api/v1/images/" + imageKey;
+            log.info("S3 이미지 업로드 성공: bucket={}, key={}", bucketName, imageKey);
+            return new ImageUploadResponse(imageUrl, imageKey);
+        } catch (IOException | S3Exception e) {
+            log.error(
+                    "S3 이미지 업로드 실패: bucket={}, key={}, error={}",
+                    bucketName,
+                    imageKey,
+                    e.getMessage());
+            throw new BusinessException(ErrorCode.FILE_UPLOAD_FAILED);
+        }
+    }
+
+    public ImageDownloadResponse getImage(String imageKey) {
+        if (imageKey == null || imageKey.isBlank() || imageKey.contains("..")) {
+            throw new BusinessException(ErrorCode.INVALID_INPUT);
+        }
+
+        try {
+            GetObjectRequest getRequest =
+                    GetObjectRequest.builder().bucket(bucketName).key(imageKey).build();
+
+            ResponseInputStream<GetObjectResponse> s3Object = s3Client.getObject(getRequest);
+            byte[] bytes = s3Object.readAllBytes();
+            String contentType = s3Object.response().contentType();
+
+            return new ImageDownloadResponse(bytes, contentType);
+        } catch (NoSuchKeyException e) {
+            log.warn("S3 이미지를 찾을 수 없음: bucket={}, key={}", bucketName, imageKey);
+            throw new BusinessException(ErrorCode.FILE_NOT_FOUND);
+        } catch (IOException | S3Exception e) {
+            log.error(
+                    "S3 이미지 조회 실패: bucket={}, key={}, error={}",
+                    bucketName,
+                    imageKey,
+                    e.getMessage());
+            throw new BusinessException(ErrorCode.INTERNAL_SERVER_ERROR);
+        }
+    }
+
+    private void validateFile(MultipartFile file) {
+        if (file == null || file.isEmpty()) {
+            throw new BusinessException(ErrorCode.INVALID_FILE_TYPE);
+        }
+
+        if (file.getSize() > MAX_FILE_SIZE) {
+            throw new BusinessException(ErrorCode.FILE_SIZE_EXCEEDED);
+        }
+
+        String extension = extractExtension(file.getOriginalFilename());
+        if (!ALLOWED_EXTENSIONS.contains(extension)) {
+            throw new BusinessException(ErrorCode.INVALID_FILE_TYPE);
+        }
+
+        String contentType = file.getContentType();
+        if (contentType == null || !ALLOWED_MIME_TYPES.contains(contentType.toLowerCase())) {
+            throw new BusinessException(ErrorCode.INVALID_FILE_TYPE);
+        }
+    }
+
+    private String extractExtension(String filename) {
+        if (filename == null || !filename.contains(".")) {
+            throw new BusinessException(ErrorCode.INVALID_FILE_TYPE);
+        }
+        return filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
+    }
+}
diff --git a/backend/src/main/java/com/ikae/snowthing/global/config/SecurityConfig.java b/backend/src/main/java/com/ikae/snowthing/global/config/SecurityConfig.java
index 88388c7..d7a46c0 100644
--- a/backend/src/main/java/com/ikae/snowthing/global/config/SecurityConfig.java
+++ b/backend/src/main/java/com/ikae/snowthing/global/config/SecurityConfig.java
@@ -55,7 +55,11 @@ public AuthenticationManager authenticationManager(
     @Bean
     public CorsConfigurationSource corsConfigurationSource() {
         CorsConfiguration config = new CorsConfiguration();
-        config.setAllowedOrigins(List.of("http://localhost:3000"));
+        config.setAllowedOrigins(
+                List.of(
+                        "http://localhost:3000",
+                        "https://snowthing.org",
+                        "https://www.snowthing.org"));
         config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
         config.setAllowedHeaders(List.of("*"));
         config.setAllowCredentials(true);
diff --git a/backend/src/main/java/com/ikae/snowthing/global/error/ErrorCode.java b/backend/src/main/java/com/ikae/snowthing/global/error/ErrorCode.java
index 6ea254d..d1a1c6b 100644
--- a/backend/src/main/java/com/ikae/snowthing/global/error/ErrorCode.java
+++ b/backend/src/main/java/com/ikae/snowthing/global/error/ErrorCode.java
@@ -32,6 +32,11 @@ public enum ErrorCode {
             HttpStatus.BAD_REQUEST, "COMMENT_005", "댓글 페이지 크기는 1 이상 50 이하이어야 합니다."),
     COMMENT_UPDATE_CONFLICT(
             HttpStatus.CONFLICT, "COMMENT_006", "다른 요청에서 댓글을 먼저 수정했습니다. 최신 댓글을 다시 확인해 주세요."),
+    INVALID_FILE_TYPE(
+            HttpStatus.BAD_REQUEST, "FILE_001", "지원하지 않는 파일 형식입니다. JPG, PNG, WEBP 이미지만 업로드 가능합니다."),
+    FILE_SIZE_EXCEEDED(HttpStatus.BAD_REQUEST, "FILE_002", "파일 크기는 최대 5MB까지 업로드 가능합니다."),
+    FILE_NOT_FOUND(HttpStatus.NOT_FOUND, "FILE_003", "존재하지 않는 파일입니다."),
+    FILE_UPLOAD_FAILED(HttpStatus.INTERNAL_SERVER_ERROR, "FILE_004", "파일 업로드에 실패했습니다."),
     INTERNAL_SERVER_ERROR(HttpStatus.INTERNAL_SERVER_ERROR, "SERVER_001", "서버 내부 오류가 발생했습니다.");
 
     private final HttpStatus status;
diff --git a/backend/src/main/java/com/ikae/snowthing/global/exception/BusinessException.java b/backend/src/main/java/com/ikae/snowthing/global/exception/BusinessException.java
new file mode 100644
index 0000000..4807305
--- /dev/null
+++ b/backend/src/main/java/com/ikae/snowthing/global/exception/BusinessException.java
@@ -0,0 +1,16 @@
+package com.ikae.snowthing.global.exception;
+
+import com.ikae.snowthing.global.error.ErrorCode;
+
+import lombok.Getter;
+
+@Getter
+public class BusinessException extends RuntimeException {
+
+    private final ErrorCode errorCode;
+
+    public BusinessException(ErrorCode errorCode) {
+        super(errorCode.getMessage());
+        this.errorCode = errorCode;
+    }
+}
diff --git a/backend/src/main/java/com/ikae/snowthing/global/exception/GlobalExceptionHandler.java b/backend/src/main/java/com/ikae/snowthing/global/exception/GlobalExceptionHandler.java
index e114580..637cc79 100644
--- a/backend/src/main/java/com/ikae/snowthing/global/exception/GlobalExceptionHandler.java
+++ b/backend/src/main/java/com/ikae/snowthing/global/exception/GlobalExceptionHandler.java
@@ -20,6 +20,12 @@
 @RestControllerAdvice
 public class GlobalExceptionHandler {
 
+    @ExceptionHandler(BusinessException.class)
+    public ResponseEntity<ErrorResponse> handleBusinessException(BusinessException e) {
+        return ResponseEntity.status(e.getErrorCode().getStatus())
+                .body(ErrorResponse.from(e.getErrorCode()));
+    }
+
     @ExceptionHandler(CustomAuthException.class)
     public ResponseEntity<ErrorResponse> handleCustomAuthException(CustomAuthException e) {
         ErrorCode errorCode =
diff --git a/backend/src/main/java/com/ikae/snowthing/global/infra/s3/S3Config.java b/backend/src/main/java/com/ikae/snowthing/global/infra/s3/S3Config.java
new file mode 100644
index 0000000..2d8a9f0
--- /dev/null
+++ b/backend/src/main/java/com/ikae/snowthing/global/infra/s3/S3Config.java
@@ -0,0 +1,24 @@
+package com.ikae.snowthing.global.infra.s3;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+import software.amazon.awssdk.auth.credentials.DefaultCredentialsProvider;
+import software.amazon.awssdk.regions.Region;
+import software.amazon.awssdk.services.s3.S3Client;
+
+@Configuration
+public class S3Config {
+
+    @Value("${cloud.aws.region.static:ap-northeast-2}")
+    private String region;
+
+    @Bean
+    public S3Client s3Client() {
+        return S3Client.builder()
+                .region(Region.of(region))
+                .credentialsProvider(DefaultCredentialsProvider.create())
+                .build();
+    }
+}
diff --git a/backend/src/main/resources/application.yml b/backend/src/main/resources/application.yml
index c9cdfb6..e7d74ac 100644
--- a/backend/src/main/resources/application.yml
+++ b/backend/src/main/resources/application.yml
@@ -45,6 +45,7 @@ spring:
   jpa:
     hibernate:
       ddl-auto: update
+
     show-sql: true
     properties:
       hibernate:
@@ -53,12 +54,12 @@ spring:
 
 ---
 # ==========================================
-# [Profile: docker / prod] Docker Compose 및 운영 컨테이너 환경
+# [Profile: docker] 로컬 Docker Compose 환경
 # ==========================================
 spring:
   config:
     activate:
-      on-profile: docker, prod
+      on-profile: docker
 
   datasource:
     url: jdbc:mysql://mysql:3306/snowthing?useSSL=false&allowPublicKeyRetrieval=true&characterEncoding=UTF-8&serverTimezone=Asia/Seoul
@@ -73,3 +74,41 @@ spring:
     properties:
       hibernate:
         dialect: org.hibernate.dialect.MySQLDialect
+
+---
+# ==========================================
+# [Profile: prod] AWS EC2 + RDS 운영 컨테이너 환경 (IAM 무암호 인증)
+# ==========================================
+spring:
+  config:
+    activate:
+      on-profile: prod
+
+  datasource:
+    url: ${SNOWTHING_PROD_DB_URL}
+    driver-class-name: software.amazon.jdbc.Driver
+    username: ${SNOWTHING_DB_USERNAME:snowthing_app}
+    password: ${SNOWTHING_DB_PASSWORD:}
+    hikari:
+      maximum-pool-size: 10
+      minimum-idle: 5
+      connection-timeout: 30000
+      idle-timeout: 600000
+      max-lifetime: 1800000
+      data-source-properties:
+        wrapperPlugins: iam
+        iamExpiration: 870
+
+  jpa:
+    hibernate:
+      ddl-auto: validate
+    show-sql: false
+    properties:
+      hibernate:
+        dialect: org.hibernate.dialect.MySQLDialect
+
+logging:
+  level:
+    org.hibernate.SQL: info
+    org.hibernate.orm.jdbc.bind: info
+    com.ikae.snowthing: info
diff --git a/backend/src/test/java/com/ikae/snowthing/domain/image/ImageServiceTest.java b/backend/src/test/java/com/ikae/snowthing/domain/image/ImageServiceTest.java
new file mode 100644
index 0000000..7109f0d
--- /dev/null
+++ b/backend/src/test/java/com/ikae/snowthing/domain/image/ImageServiceTest.java
@@ -0,0 +1,145 @@
+package com.ikae.snowthing.domain.image;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.verifyNoInteractions;
+import static org.mockito.Mockito.when;
+
+import java.io.ByteArrayInputStream;
+
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.springframework.mock.web.MockMultipartFile;
+import org.springframework.test.util.ReflectionTestUtils;
+
+import com.ikae.snowthing.domain.image.dto.ImageDownloadResponse;
+import com.ikae.snowthing.domain.image.dto.ImageUploadResponse;
+import com.ikae.snowthing.domain.image.service.ImageService;
+import com.ikae.snowthing.global.error.ErrorCode;
+import com.ikae.snowthing.global.exception.BusinessException;
+
+import software.amazon.awssdk.core.ResponseInputStream;
+import software.amazon.awssdk.core.sync.RequestBody;
+import software.amazon.awssdk.http.AbortableInputStream;
+import software.amazon.awssdk.services.s3.S3Client;
+import software.amazon.awssdk.services.s3.model.GetObjectRequest;
+import software.amazon.awssdk.services.s3.model.GetObjectResponse;
+import software.amazon.awssdk.services.s3.model.NoSuchKeyException;
+import software.amazon.awssdk.services.s3.model.PutObjectRequest;
+import software.amazon.awssdk.services.s3.model.PutObjectResponse;
+
+@ExtendWith(MockitoExtension.class)
+class ImageServiceTest {
+
+    @Mock private S3Client s3Client;
+
+    private ImageService imageService;
+
+    @BeforeEach
+    void setUp() {
+        imageService = new ImageService(s3Client);
+        ReflectionTestUtils.setField(imageService, "bucketName", "snowthing-media-00001");
+    }
+
+    @Test
+    @DisplayName("정상 이미지 업로드 시 S3 putObject 호출 후 ImageUploadResponse 반환")
+    void uploadImage_success() {
+        MockMultipartFile file =
+                new MockMultipartFile(
+                        "file", "test.png", "image/png", "test-image-content".getBytes());
+
+        when(s3Client.putObject(any(PutObjectRequest.class), any(RequestBody.class)))
+                .thenReturn(PutObjectResponse.builder().build());
+
+        ImageUploadResponse response = imageService.uploadImage(file);
+
+        assertThat(response.imageUrl()).startsWith("/api/v1/images/images/");
+        assertThat(response.imageUrl()).endsWith(".png");
+        assertThat(response.imageKey()).startsWith("images/");
+        assertThat(response.imageKey()).endsWith(".png");
+
+        verify(s3Client, times(1)).putObject(any(PutObjectRequest.class), any(RequestBody.class));
+    }
+
+    @Test
+    @DisplayName("5MB 초과 파일 업로드 시 FILE_SIZE_EXCEEDED 예외 발생")
+    void uploadImage_exceedsMaxSize() {
+        byte[] largeBytes = new byte[5 * 1024 * 1024 + 1];
+        MockMultipartFile file =
+                new MockMultipartFile("file", "large.png", "image/png", largeBytes);
+
+        assertThatThrownBy(() -> imageService.uploadImage(file))
+                .isInstanceOf(BusinessException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.FILE_SIZE_EXCEEDED);
+
+        verifyNoInteractions(s3Client);
+    }
+
+    @Test
+    @DisplayName("지원하지 않는 확장자 파일 업로드 시 INVALID_FILE_TYPE 예외 발생")
+    void uploadImage_invalidExtension() {
+        MockMultipartFile file =
+                new MockMultipartFile(
+                        "file", "danger.exe", "application/octet-stream", "malicious".getBytes());
+
+        assertThatThrownBy(() -> imageService.uploadImage(file))
+                .isInstanceOf(BusinessException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.INVALID_FILE_TYPE);
+
+        verifyNoInteractions(s3Client);
+    }
+
+    @Test
+    @DisplayName("정상 이미지 조회 시 ResponseInputStream에서 바이트 배열과 contentType 반환")
+    void getImage_success() {
+        String key = "images/sample.png";
+        byte[] expectedBytes = "image-bytes".getBytes();
+        GetObjectResponse response = GetObjectResponse.builder().contentType("image/png").build();
+        ResponseInputStream<GetObjectResponse> responseInputStream =
+                new ResponseInputStream<>(
+                        response,
+                        AbortableInputStream.create(new ByteArrayInputStream(expectedBytes)));
+
+        when(s3Client.getObject(any(GetObjectRequest.class))).thenReturn(responseInputStream);
+
+        ImageDownloadResponse download = imageService.getImage(key);
+
+        assertThat(download.data()).isEqualTo(expectedBytes);
+        assertThat(download.contentType()).isEqualTo("image/png");
+    }
+
+    @Test
+    @DisplayName("경로 탐색(..) 등 악의적인 key 요청 시 INVALID_INPUT 예외 발생")
+    void getImage_pathTraversal_throwsException() {
+        assertThatThrownBy(() -> imageService.getImage("../../../etc/passwd"))
+                .isInstanceOf(BusinessException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.INVALID_INPUT);
+
+        verifyNoInteractions(s3Client);
+    }
+
+    @Test
+    @DisplayName("존재하지 않는 파일 키 조회 시 FILE_NOT_FOUND 예외 발생")
+    void getImage_notFound_throwsException() {
+        when(s3Client.getObject(any(GetObjectRequest.class)))
+                .thenThrow(
+                        NoSuchKeyException.builder()
+                                .message("The specified key does not exist.")
+                                .build());
+
+        assertThatThrownBy(() -> imageService.getImage("images/nonexistent.png"))
+                .isInstanceOf(BusinessException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.FILE_NOT_FOUND);
+    }
+}
diff --git a/compose.prod.yml b/compose.prod.yml
new file mode 100644
index 0000000..39dadeb
--- /dev/null
+++ b/compose.prod.yml
@@ -0,0 +1,23 @@
+services:
+  backend:
+    image: ${BACKEND_IMAGE_URI:-snowthing-backend:latest}
+    container_name: snowthing-backend
+    restart: unless-stopped
+    ports:
+      - "127.0.0.1:8080:8080"
+    environment:
+      - SPRING_PROFILES_ACTIVE=prod
+      - SNOWTHING_PROD_DB_URL=${SNOWTHING_PROD_DB_URL:?SNOWTHING_PROD_DB_URL must be set}
+      - SNOWTHING_DB_USERNAME=${SNOWTHING_DB_USERNAME:-snowthing_app}
+      - SNOWTHING_DB_PASSWORD=${SNOWTHING_DB_PASSWORD:-}
+      - TZ=Asia/Seoul
+
+  frontend:
+    image: ${FRONTEND_IMAGE_URI:-snowthing-frontend:latest}
+    container_name: snowthing-frontend
+    restart: unless-stopped
+    ports:
+      - "127.0.0.1:3000:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
diff --git a/database/production/001_initial_schema.sql b/database/production/001_initial_schema.sql
new file mode 100644
index 0000000..a472ec2
--- /dev/null
+++ b/database/production/001_initial_schema.sql
@@ -0,0 +1,149 @@
+-- ====================================================================
+-- Snowthing Production Initial Schema (MySQL 8.0)
+-- Version: 001
+-- Description: 운영 RDS 최초 스키마 생성 스크립트 (비파괴 CREATE TABLE IF NOT EXISTS)
+-- ====================================================================
+
+-- 1. 크루 마스터 테이블 (1인 1크루 소속)
+CREATE TABLE IF NOT EXISTS `crew` (
+    `crew_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '크루 고유 식별자',
+    `public_id` VARCHAR(36) NOT NULL UNIQUE COMMENT '외부 노출용 UUID v7',
+    `name` VARCHAR(100) NOT NULL COMMENT '크루 이름',
+    `description` TEXT NULL COMMENT '크루 소개',
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '생성 일시'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='크루 마스터';
+
+-- 2. 회원 마스터 테이블
+CREATE TABLE IF NOT EXISTS `member` (
+    `member_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT 'DB 내부 조인용 PK',
+    `public_id` VARCHAR(36) NOT NULL UNIQUE COMMENT '외부 API/URL 노출용 UUID v7',
+    `email` VARCHAR(100) NOT NULL UNIQUE COMMENT '로그인 이메일 계정',
+    `password` VARCHAR(255) NULL COMMENT 'BCrypt 암호화 비밀번호 (OAuth2 대비 NULLABLE)',
+    `nickname` VARCHAR(50) NOT NULL UNIQUE COMMENT '활동 닉네임',
+    `profile_image_url` VARCHAR(500) NULL COMMENT '프로필 이미지 URL',
+    `bio` VARCHAR(255) NULL COMMENT '자기소개 한마디',
+    `departure_region` VARCHAR(100) NULL COMMENT '주 출발/거주 지역',
+    `crew_id` BIGINT NULL COMMENT '소속 크루 ID',
+    `crew_role` VARCHAR(20) NULL COMMENT '크루 내 권한 (OWNER, MANAGER, MEMBER)',
+    `role` VARCHAR(20) NOT NULL DEFAULT 'ROLE_USER' COMMENT '전역 권한 (ROLE_USER, ROLE_ADMIN)',
+    `status` VARCHAR(20) NOT NULL DEFAULT 'ACTIVE' COMMENT '계정 상태 (ACTIVE, SUSPENDED, WITHDRAWN)',
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '가입 일시',
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '수정 일시',
+    CONSTRAINT `fk_member_crew` FOREIGN KEY (`crew_id`) REFERENCES `crew` (`crew_id`) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='회원 마스터';
+
+-- 3. 리조트 마스터 테이블 (Resort.java: length=100, unique=true)
+CREATE TABLE IF NOT EXISTS `resort` (
+    `resort_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '리조트 고유 식별자',
+    `name` VARCHAR(100) NOT NULL UNIQUE COMMENT '스키장 이름',
+    `region` VARCHAR(50) NOT NULL COMMENT '소재 지역'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='리조트 마스터';
+
+-- 4. 회원-리조트 N:M 중계 테이블
+CREATE TABLE IF NOT EXISTS `member_resort` (
+    `id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '단일 대리키 PK',
+    `member_id` BIGINT NOT NULL COMMENT '회원 ID',
+    `resort_id` BIGINT NOT NULL COMMENT '리조트 ID',
+    `is_main` BOOLEAN NOT NULL DEFAULT FALSE COMMENT '주 베이스 여부',
+    CONSTRAINT `fk_mr_member` FOREIGN KEY (`member_id`) REFERENCES `member` (`member_id`) ON DELETE CASCADE,
+    CONSTRAINT `fk_mr_resort` FOREIGN KEY (`resort_id`) REFERENCES `resort` (`resort_id`) ON DELETE CASCADE,
+    CONSTRAINT `uk_member_resort` UNIQUE (`member_id`, `resort_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='회원-리조트 N:M 중계';
+
+-- 5. 라이딩 스타일 마스터 테이블 (RidingStyle.java: description, name UNIQUE)
+CREATE TABLE IF NOT EXISTS `riding_style` (
+    `style_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '스타일 고유 식별자',
+    `name` VARCHAR(50) NOT NULL UNIQUE COMMENT '라이딩 스타일명',
+    `description` VARCHAR(255) NULL COMMENT '스타일 상세 설명'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='라이딩 스타일 마스터';
+
+-- 6. 회원-라이딩스타일 N:M 중계 테이블
+CREATE TABLE IF NOT EXISTS `member_riding_style` (
+    `id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '단일 대리키 PK',
+    `member_id` BIGINT NOT NULL COMMENT '회원 ID',
+    `style_id` BIGINT NOT NULL COMMENT '라이딩 스타일 ID',
+    CONSTRAINT `fk_mrs_member` FOREIGN KEY (`member_id`) REFERENCES `member` (`member_id`) ON DELETE CASCADE,
+    CONSTRAINT `fk_mrs_style` FOREIGN KEY (`style_id`) REFERENCES `riding_style` (`style_id`) ON DELETE CASCADE,
+    CONSTRAINT `uk_member_riding_style` UNIQUE (`member_id`, `style_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='회원-라이딩스타일 N:M 중계';
+
+-- 7. 게시판 카테고리 테이블
+CREATE TABLE IF NOT EXISTS `post_category` (
+    `category_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '카테고리 식별자',
+    `name` VARCHAR(50) NOT NULL COMMENT '카테고리명',
+    `code` VARCHAR(50) NOT NULL UNIQUE COMMENT '카테고리 고유 코드'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='게시판 카테고리';
+
+-- 8. 게시글 테이블
+CREATE TABLE IF NOT EXISTS `post` (
+    `post_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '게시글 고유 식별자',
+    `public_id` VARCHAR(36) NOT NULL UNIQUE COMMENT '외부 API/URL 노출용 UUID v7',
+    `member_id` BIGINT NULL COMMENT '작성자 회원 ID (비회원 작성 시 NULL)',
+    `category_id` BIGINT NOT NULL COMMENT '카테고리 ID',
+    `title` VARCHAR(200) NOT NULL COMMENT '게시글 제목',
+    `content` LONGTEXT NOT NULL COMMENT '게시글 본문',
+    `writer_ip` VARCHAR(45) NOT NULL COMMENT '작성자 IP 주소',
+    `is_anonymous` BOOLEAN NOT NULL DEFAULT FALSE COMMENT '익명 작성 여부',
+    `anonymous_password` VARCHAR(255) NULL COMMENT '비회원 익명 수정/삭제용 비밀번호 (BCrypt)',
+    `view_count` INT NOT NULL DEFAULT 0 COMMENT '조회수',
+    `comment_count` INT NOT NULL DEFAULT 0 COMMENT '댓글 수 역정규화',
+    `like_count` INT NOT NULL DEFAULT 0 COMMENT '추천 수 역정규화',
+    `dislike_count` INT NOT NULL DEFAULT 0 COMMENT '비추천 수 역정규화',
+    `has_image` BOOLEAN NOT NULL DEFAULT FALSE COMMENT '이미지 첨부 여부 역정규화 (목록 뱃지 아이콘 렌더링용)',
+    `status` VARCHAR(20) NOT NULL DEFAULT 'NORMAL' COMMENT '게시글 상태 (NORMAL, DELETED, BLOCKED, HIDDEN, DRAFT)',
+    `is_deleted` BOOLEAN NOT NULL DEFAULT FALSE COMMENT 'Soft Delete 여부',
+    `deleted_at` DATETIME NULL COMMENT '삭제 일시',
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '작성 일시',
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '수정 일시',
+    CONSTRAINT `fk_post_member` FOREIGN KEY (`member_id`) REFERENCES `member` (`member_id`) ON DELETE SET NULL,
+    CONSTRAINT `fk_post_category` FOREIGN KEY (`category_id`) REFERENCES `post_category` (`category_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='게시글';
+
+-- 9. 게시글 첨부 이미지 테이블 (PostImage.java: BaseTimeEntity 상속으로 updated_at 포함)
+CREATE TABLE IF NOT EXISTS `post_image` (
+    `image_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '이미지 고유 식별자',
+    `post_id` BIGINT NOT NULL COMMENT '게시글 ID',
+    `image_url` VARCHAR(500) NOT NULL COMMENT '이미지 파일 URL',
+    `sort_order` INT NOT NULL DEFAULT 1 COMMENT '표시 순서',
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '등록 일시',
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '수정 일시',
+    CONSTRAINT `fk_pi_post` FOREIGN KEY (`post_id`) REFERENCES `post` (`post_id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='게시글 첨부 이미지';
+
+-- 10. 게시글 추천/비추천 중계 테이블
+CREATE TABLE IF NOT EXISTS `post_reaction` (
+    `reaction_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '반응 식별자',
+    `post_id` BIGINT NOT NULL COMMENT '게시글 ID',
+    `member_id` BIGINT NULL COMMENT '회원 ID (비회원 투표 시 NULL)',
+    `writer_ip` VARCHAR(45) NULL COMMENT '투표자 IP 주소',
+    `anonymous_voter_id` VARCHAR(36) NULL COMMENT '비회원 익명 투표자 식별 쿠키 ID',
+    `type` VARCHAR(10) NOT NULL COMMENT '반응 종류 (LIKE, DISLIKE)',
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '투표 일시',
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '수정 일시',
+    CONSTRAINT `fk_pr_post` FOREIGN KEY (`post_id`) REFERENCES `post` (`post_id`) ON DELETE CASCADE,
+    CONSTRAINT `fk_pr_member` FOREIGN KEY (`member_id`) REFERENCES `member` (`member_id`) ON DELETE CASCADE,
+    CONSTRAINT `uk_post_member_type` UNIQUE (`post_id`, `member_id`, `type`),
+    CONSTRAINT `uk_post_anon_voter_type` UNIQUE (`post_id`, `anonymous_voter_id`, `type`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='게시글 추천/비추천';
+
+-- 11. 댓글 및 계층형 대댓글 테이블 (Comment.java: @Version version 컬럼 포함)
+CREATE TABLE IF NOT EXISTS `comment` (
+    `comment_id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '댓글 식별자',
+    `version` BIGINT NOT NULL DEFAULT 0 COMMENT '낙관적 락 동시성 제어용 버전',
+    `post_id` BIGINT NOT NULL COMMENT '게시글 ID',
+    `member_id` BIGINT NULL COMMENT '작성자 회원 ID (비회원 작성 시 NULL)',
+    `parent_id` BIGINT NULL COMMENT '부모 댓글 ID (대댓글 구현용)',
+    `content` VARCHAR(1000) NOT NULL COMMENT '댓글 내용',
+    `writer_ip` VARCHAR(45) NOT NULL COMMENT '작성자 IP 주소',
+    `is_anonymous` BOOLEAN NOT NULL DEFAULT FALSE COMMENT '익명 작성 여부',
+    `anonymous_password` VARCHAR(255) NULL COMMENT '비회원 익명 수정/삭제용 비밀번호 (BCrypt)',
+    `is_deleted` BOOLEAN NOT NULL DEFAULT FALSE COMMENT 'Soft Delete 여부',
+    `deleted_at` DATETIME NULL COMMENT '삭제 일시',
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '작성 일시',
+    `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '수정 일시',
+    INDEX `idx_comment_post_parent_id` (`post_id`, `parent_id`, `comment_id`),
+    INDEX `idx_comment_parent_deleted_id` (`parent_id`, `is_deleted`, `comment_id`),
+    CONSTRAINT `fk_comment_post` FOREIGN KEY (`post_id`) REFERENCES `post` (`post_id`) ON DELETE CASCADE,
+    CONSTRAINT `fk_comment_member` FOREIGN KEY (`member_id`) REFERENCES `member` (`member_id`) ON DELETE SET NULL,
+    CONSTRAINT `fk_comment_parent` FOREIGN KEY (`parent_id`) REFERENCES `comment` (`comment_id`) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='댓글 및 계층형 대댓글';
diff --git a/database/production/002_reference_data.sql b/database/production/002_reference_data.sql
new file mode 100644
index 0000000..85da1eb
--- /dev/null
+++ b/database/production/002_reference_data.sql
@@ -0,0 +1,31 @@
+-- ====================================================================
+-- Snowthing Production Reference Data (MySQL 8.0)
+-- Version: 002
+-- Description: 운영 환경 필수 마스터 기준데이터 삽입 스크립트 (멱등성 보장 INSERT IGNORE)
+-- ====================================================================
+
+-- 1. 리조트 마스터 기준데이터 (6개)
+INSERT IGNORE INTO `resort` (`name`, `region`) VALUES
+('휘닉스파크', '강원 평창'),
+('하이원리조트', '강원 정선'),
+('모나용평', '강원 평창'),
+('비발디파크', '강원 홍천'),
+('웰리힐리파크', '강원 횡성'),
+('지산리조트', '경기 이천');
+
+-- 2. 라이딩 스타일 마스터 기준데이터 (6개)
+INSERT IGNORE INTO `riding_style` (`name`, `description`) VALUES
+('올라운드', '슬로프, 트릭, 파크 등을 가리지 않고 다양하게 즐기는 스타일'),
+('라이딩 / 카빙', '슬로프 고속 라이딩 및 칼날 카빙'),
+('그라운드 트릭', '평지 버터링, 알리, 스핀 트릭'),
+('파크 / 기물 / 파이프', '킥커 점프, 레일, 하프파이프'),
+('입문 / 초보', '기초 자세 및 B턴, J턴 습득 중'),
+('관광 / 크루징', '풍경 감상 및 여유로운 라이딩');
+
+-- 3. 게시판 카테고리 마스터 기준데이터 (5개)
+INSERT IGNORE INTO `post_category` (`name`, `code`) VALUES
+('자유게시판', 'FREE'),
+('익명게시판', 'ANONYMOUS'),
+('질문게시판', 'QNA'),
+('장비VS', 'GEAR_VS'),
+('맛집게시판', 'FOOD');
diff --git "a/docs/conception/sprint06/01-\353\260\260\355\217\254-PR-URL-SHA-digest-\354\236\224\354\227\254\354\235\264\354\212\210.md" "b/docs/conception/sprint06/01-\353\260\260\355\217\254-PR-URL-SHA-digest-\354\236\224\354\227\254\354\235\264\354\212\210.md"
new file mode 100644
index 0000000..fea30f3
--- /dev/null
+++ "b/docs/conception/sprint06/01-\353\260\260\355\217\254-PR-URL-SHA-digest-\354\236\224\354\227\254\354\235\264\354\212\210.md"
@@ -0,0 +1,49 @@
+# Sprint 06 배포 결과
+
+## 제출 정보
+
+- 배포 브랜치: `deploy/aws-ec2`
+- 운영 URL: `https://snowthing.org`
+- ECR 전환 커밋: `eaf7acc669f1c9ae0f82dee2ca07a65bfdfb4fbb`
+- 로그인 UI 및 수동 롤백 추가 커밋: `bf94203015a6edf6d0b0a977af5e4afb2c9c5710`
+- 배포 PR: 아직 만들지 않았습니다. 현재 결과를 정리한 뒤 `deploy/aws-ec2`에서 `main`으로 PR을 열어야 합니다.
+
+## 실제 배포 이미지
+
+| 서비스 | 커밋 | ECR 태그 | 배포한 digest |
+|---|---|---|---|
+| 프런트 초기 버전 | `eaf7acc...` | `release-eaf7acc669f1c9ae0f82dee2ca07a65bfdfb4fbb` | `sha256:acba5de24d57eee6fa56da4845db6d59fc1b0a43e7b8d9867dd4fd1586b6798d` |
+| 백엔드 | `eaf7acc...` | `release-eaf7acc669f1c9ae0f82dee2ca07a65bfdfb4fbb` | `sha256:f47b877a6aac0e3eb7b973bba78999a765e3415c7f7fda6c15a82834fca26d9c` |
+| 프런트 새 로그인 UI | `bf94203...` | `release-bf94203015a6edf6d0b0a977af5e4afb2c9c5710` | `sha256:91f7b9d8027704d895ff697e37fea8329514cf684d619242f77e229a59946ffb` |
+
+태그는 사람이 커밋을 찾을 때 사용하고, EC2에는 변경할 수 없는 digest 주소를 전달했습니다. 같은 태그가 가리키는 대상을 나중에 바꾸는 방식으로는 배포하지 않았습니다.
+
+## Actions 실행 결과
+
+- [초기 프런트 배포](https://github.com/devikae/snowthing/actions/runs/35076355024): CI 29초, 빌드·push·배포 1분 59초
+- [초기 백엔드 배포](https://github.com/devikae/snowthing/actions/runs/35076355176): CI 2분 55초, 빌드·push·배포 2분 6초
+- [새 로그인 UI 배포](https://github.com/devikae/snowthing/actions/runs/35079283676): CI 29초, 빌드·push·배포 1분 52초
+- [이전 프런트 digest 롤백](https://github.com/devikae/snowthing/actions/runs/35079786140): 전체 27초, digest 조회와 SSM 배포 19초
+- [새 프런트 digest 재배포](https://github.com/devikae/snowthing/actions/runs/35081931883): 전체 31초, digest 조회와 SSM 배포 21초
+
+## 확인한 결과
+
+- 새 로그인 UI 배포 후 `/login`에서 새 문구를 확인했습니다.
+- 이전 digest로 롤백한 뒤 `/login`이 이전 UI로 바뀌었습니다.
+- 새 digest를 다시 배포한 뒤 새 UI가 복구됐습니다.
+- 롤백과 재배포 뒤 `GET /api/v1/posts`, `GET /api/v1/master/resorts`가 모두 `200 OK`를 반환했습니다.
+- 프런트와 백엔드 컨테이너는 EC2에서 빌드하지 않았습니다. EC2는 ECR 이미지를 pull해 실행했습니다.
+
+## 잔여 이슈
+
+1. `deploy/aws-ec2` 변경을 `main`에 병합하기 전이라 새 수동 관리 워크플로를 기본 브랜치에서 직접 실행할 수 없습니다. PR 검토와 병합이 필요합니다.
+2. RDS 자동 백업 설정과 운영 연결은 완료됐지만, 백업을 별도 DB로 복원해 읽기 전용 검증 앱으로 확인하는 절차는 아직 남았습니다. 새 DB 비용과 복원 사양 승인이 필요합니다.
+3. 최초 프런트와 백엔드 배포 사이에 API가 잠시 `502 Bad Gateway`를 반환했습니다. 당시 로그가 충분하지 않아 원인을 단정하지 않았습니다. 이후 배포 실패 시 Docker 상태·제한된 inspect 결과·컨테이너 로그·Nginx error log를 같은 UTC 시각으로 저장하도록 보강했습니다.
+
+## 추가 완료 항목
+
+- 공식 액션을 Node.js 24 기반 최신 주요 버전으로 갱신한 뒤 프런트·백엔드 CI와 배포를 다시 통과했습니다.
+- 백엔드 `stable-3ecdc50...` → `sha256:dec23cf6574e4fecddfb32946ce88a924afbc3561f31bb6069e55d0b714c9016`
+- 프런트 `stable-3ecdc50...` → `sha256:3bdfa20b2d63f9fba13296f3bd3daba0662cec87f3e2e112df0396a38ae7b2aa`
+- stable 지정 후 로그인·게시글·리조트 API `200 OK`를 확인했습니다.
+- [백엔드 stable 지정](https://github.com/devikae/snowthing/actions/runs/35087127962), [프런트 stable 지정](https://github.com/devikae/snowthing/actions/runs/35087130593)
diff --git "a/docs/conception/sprint06/02-\352\265\254\354\241\260-\353\271\204\354\232\251-\354\204\244\354\240\225-\354\232\264\354\230\201\354\240\210\354\260\250.md" "b/docs/conception/sprint06/02-\352\265\254\354\241\260-\353\271\204\354\232\251-\354\204\244\354\240\225-\354\232\264\354\230\201\354\240\210\354\260\250.md"
new file mode 100644
index 0000000..694f622
--- /dev/null
+++ "b/docs/conception/sprint06/02-\352\265\254\354\241\260-\353\271\204\354\232\251-\354\204\244\354\240\225-\354\232\264\354\230\201\354\240\210\354\260\250.md"
@@ -0,0 +1,87 @@
+# Sprint 06 구조와 운영 절차
+
+## 현재 구조
+
+```text
+브라우저
+  → Cloudflare DNS·프록시·HTTPS
+  → EC2 보안 그룹
+  → 호스트 Nginx
+      ├─ 화면 요청 → 127.0.0.1:3000 프런트 컨테이너
+      └─ /api 요청 → 127.0.0.1:8080 백엔드 컨테이너
+                         ├─ RDS MySQL
+                         └─ EC2 IAM Role → 비공개 S3
+
+GitHub Actions
+  → OIDC로 AWS 배포 역할 수임
+  → 프런트·백엔드 이미지 빌드
+  → ECR에 candidate-<SHA> push
+  → digest 조회
+  → SSM Run Command
+  → EC2가 digest 이미지 pull·실행
+```
+
+이전에는 EC2가 Git 소스를 받은 뒤 `docker compose up --build`로 직접 빌드했습니다. 지금은 GitHub Actions가 한 번 빌드한 이미지를 ECR에 보관하고, EC2는 그 결과물만 실행합니다. 서버 사양과 캐시 상태에 따라 빌드 결과가 달라지는 문제를 줄였고, 실행했던 바이너리와 되돌릴 바이너리를 digest로 구분할 수 있게 됐습니다.
+
+## 주요 설정 키
+
+### GitHub Actions Variables
+
+- `AWS_DEPLOY_ROLE_ARN`: OIDC로 수임할 GitHub 배포 역할 ARN
+- `AWS_REGION`: `ap-northeast-2`
+- `EC2_INSTANCE_ID`: SSM 명령을 받을 운영 EC2 ID
+- `ECR_BACKEND_REPOSITORY`: `snowthing/backend`
+- `ECR_FRONTEND_REPOSITORY`: `snowthing/frontend`
+- `NEXT_PUBLIC_API_BASE_URL`: `https://snowthing.org`
+
+비밀번호가 아닌 저장소 이름과 리전은 Variables에 둡니다. DB 비밀번호처럼 노출되면 안 되는 값은 GitHub 변수나 이미지에 넣지 않고 EC2의 `/etc/snowthing/prod.env`에서 관리합니다.
+
+### IAM 역할
+
+- GitHub 역할: 두 ECR 저장소에 대한 push·조회·태그 삭제, 대상 EC2에 대한 SSM 명령 전송과 결과 조회
+- EC2 역할: 두 ECR 저장소 pull, 필요한 S3 경로 접근, SSM Agent 통신
+
+`ecr:GetAuthorizationToken`은 리소스 ARN으로 제한할 수 없어 `Resource: "*"`를 사용합니다. 이미지 작업 권한은 `snowthing/backend`, `snowthing/frontend` ARN으로 제한합니다.
+
+## ECR 태그와 보관 정책
+
+- `candidate-<SHA>`: 배포 전 후보. 7일 후 만료
+- `release-<SHA>`: 배포와 헬스체크가 끝난 버전. 최근 3개 보관
+- `stable-<SHA>`: 장기 복구 기준. 최근 1개 보관
+- 태그 없는 이미지: 1일 후 만료
+
+candidate와 release 태그를 한 이미지에 계속 같이 두면 candidate 7일 규칙이 release 이미지까지 만료시킬 수 있습니다. 그래서 배포 성공 후 release 태그를 만든 다음 candidate 태그를 제거합니다. stable로 옮길 때도 같은 digest에 남은 release 태그가 없는지 확인해야 합니다.
+
+## 비용
+
+ECR private 저장소는 저장 용량 기준으로 과금됩니다. 서울 리전의 정확한 금액은 결제 시점의 AWS 요금표로 다시 확인해야 하지만, 작업 당시 계산에는 약 USD 0.10/GB-월을 사용했습니다. 5GB면 약 USD 0.50/월, 10GB면 약 USD 1/월 수준이며 세금과 환율은 별도입니다. 같은 리전의 ECR에서 EC2로 이미지를 받는 데이터 전송은 별도 인터넷 다운로드보다 유리하지만, 스캔 기능이나 리전 간 전송을 추가하면 비용이 달라질 수 있습니다.
+
+## 정상 배포 절차
+
+1. 백엔드는 Spotless와 테스트, 프런트는 `npm run build`를 통과해야 합니다.
+2. Actions가 `candidate-<전체 커밋 SHA>` 이미지를 만듭니다.
+3. ECR push 후 digest를 조회합니다.
+4. SSM으로 `저장소@sha256:...` 주소를 EC2에 전달합니다.
+5. EC2가 ECR에 로그인하고 해당 digest를 pull합니다.
+6. Compose가 대상 서비스 하나만 `--no-build`로 교체합니다.
+7. 프런트는 3000번, 백엔드는 8080번 로컬 주소로 헬스체크합니다.
+8. 성공하면 release 태그를 만들고 candidate 태그를 지웁니다.
+9. 실패하면 배포 전에 실행 중이던 이미지 주소로 컨테이너를 다시 올립니다.
+
+## 수동 롤백 절차
+
+1. ECR에서 되돌릴 `release-<SHA>` 또는 `stable-<SHA>`를 고릅니다.
+2. GitHub Actions의 `Deploy Frontend` 수동 실행에서 `rollback_tag`를 입력합니다.
+3. Actions가 태그를 digest로 바꾼 뒤 SSM으로 전달합니다.
+4. EC2가 선택한 digest로 컨테이너를 교체하고 헬스체크합니다.
+5. 외부 HTTPS에서 화면과 API를 확인합니다.
+6. DB 스키마 변경이 포함된 버전이라면 이미지부터 바꾸지 말고 이전 앱과 현재 스키마의 호환성을 먼저 확인합니다.
+
+## 백업·복구와 자원 정리
+
+- 이미지 롤백은 애플리케이션 실행 파일만 되돌립니다. RDS 데이터는 되돌리지 않습니다.
+- DB 복구는 운영 RDS를 덮어쓰지 않고 새 DB로 복원해야 합니다.
+- 복원 검증 앱은 운영 DB와 S3에 쓰기 권한을 가지면 안 됩니다.
+- 검증이 끝난 임시 DB와 사용하지 않는 스냅샷은 승인된 보존 기간에 따라 정리합니다.
+- EC2, EBS, 공인 IPv4, RDS, 백업, S3, ECR 비용을 함께 확인합니다. Budgets 알림은 자동 결제 차단 기능이 아닙니다.
+
diff --git "a/docs/conception/sprint06/03-\353\260\260\355\217\254-\353\263\265\352\265\254-\354\246\235\352\261\260\355\221\234.md" "b/docs/conception/sprint06/03-\353\260\260\355\217\254-\353\263\265\352\265\254-\354\246\235\352\261\260\355\221\234.md"
new file mode 100644
index 0000000..5583bbb
--- /dev/null
+++ "b/docs/conception/sprint06/03-\353\260\260\355\217\254-\353\263\265\352\265\254-\354\246\235\352\261\260\355\221\234.md"
@@ -0,0 +1,38 @@
+# Sprint 06 배포·복구 증거표
+
+| 구분 | 환경·시각 | 기대 결과 | 실제 결과 | 증거 |
+|---|---|---|---|---|
+| 프런트 최초 ECR 배포 | GitHub Actions·EC2, 2026-09-16 | Actions가 이미지를 만들고 EC2는 digest를 실행 | 성공. CI 29초, 빌드·push·배포 1분 59초 | [실행 35076355024](https://github.com/devikae/snowthing/actions/runs/35076355024), digest `acba5de2...` |
+| 백엔드 최초 ECR 배포 | GitHub Actions·EC2, 2026-09-16 | 테스트 통과 후 RDS 연결이 가능한 백엔드 실행 | 성공. CI 2분 55초, 빌드·push·배포 2분 6초 | [실행 35076355176](https://github.com/devikae/snowthing/actions/runs/35076355176), digest `f47b877a...` |
+| 배포 중 API 장애 확인 | 외부 HTTPS, 2026-09-16 18:01 KST 전후 | 기존 API가 계속 응답 | `/posts`는 200, 게시글·리조트 API는 502 | Cloudflare 응답과 Actions 진행 시각. 백엔드 배포 후 200 회복 |
+| 새 로그인 UI 배포 | GitHub Actions·EC2, 2026-09-16 | 새 release 생성 후 로그인 화면 변경 | 성공. CI 29초, 빌드·push·배포 1분 52초 | [실행 35079283676](https://github.com/devikae/snowthing/actions/runs/35079283676), digest `91f7b9d8...` |
+| 이전 버전 롤백 | 외부 HTTPS·EC2, 2026-09-16 18:30 KST | 이전 digest 실행, 이전 UI 표시, API 유지 | 성공. 전체 27초, SSM 단계 19초. 이전 로그인 UI 확인, 게시글 API 200 | [실행 35079786140](https://github.com/devikae/snowthing/actions/runs/35079786140) |
+| 최신 버전 재배포 | 외부 HTTPS·EC2, 2026-09-16 18:53 KST | 새 digest 재실행, 새 UI 복구, API 유지 | 성공. 전체 31초, SSM 단계 21초. 새 로그인 UI와 게시글·리조트 API 200 | [실행 35081931883](https://github.com/devikae/snowthing/actions/runs/35081931883) |
+| 공식 Actions 런타임 갱신 | GitHub Actions, 2026-09-16 | Node.js 20 경고 제거 후 CI·배포 유지 | 프런트·백엔드 CI와 배포 성공 | [백엔드 35086463921](https://github.com/devikae/snowthing/actions/runs/35086463921), [프런트 35086463890](https://github.com/devikae/snowthing/actions/runs/35086463890) |
+| stable 이미지 지정 | ECR, 2026-09-16 | 프런트·백엔드 장기 복구 이미지 1개씩 보관 | 두 서비스 모두 `stable-3ecdc50...` 지정 성공, 외부 API 200 | [백엔드 35087127962](https://github.com/devikae/snowthing/actions/runs/35087127962), [프런트 35087130593](https://github.com/devikae/snowthing/actions/runs/35087130593) |
+
+## 장애 분석에 사용한 로그
+
+게시글을 불러오지 못했을 때 먼저 외부 요청을 나눠 확인했습니다. `/posts`가 200인데 `/api/v1/posts`와 `/api/v1/master/resorts`가 모두 502였으므로 프런트 전체 장애는 아니었습니다. Cloudflare가 반환한 502는 애플리케이션이 만든 JSON 500 응답과 다릅니다. 이 결과로 Nginx 뒤의 백엔드 연결 구간을 우선 확인했습니다.
+
+그다음 Actions에서 SSM 명령 결과를 확인했습니다. 로그에는 ECR digest pull, 컨테이너 교체, `HTTP 000` 대기, 최종 `HTTP 200`이 순서대로 남았습니다. 백엔드 배포 뒤 외부 게시글·리조트 API가 200으로 돌아왔으므로 복구 지점을 백엔드 컨테이너 기동으로 좁힐 수 있었습니다. 다만 장애 당시의 `docker ps`, 백엔드 로그, Nginx error log를 동시에 보존하지 못했기 때문에 기존 백엔드가 왜 연결 불가 상태였는지는 단정하지 않았습니다.
+
+## 질문 3개 답변
+
+### 1. 실패한 지점을 어떤 로그로 찾았나요?
+
+한 로그만 보지 않고 요청 경로를 앞에서부터 나눴습니다. 외부 HTTPS에서 화면과 API 상태코드를 각각 확인했고, GitHub Actions에서 CI·ECR push·SSM 단계를 구분했으며, SSM 출력에서 Docker pull·컨테이너 교체·로컬 헬스체크 결과를 확인했습니다. 이번 502는 `/posts`가 200이고 두 API가 함께 502였기 때문에 프런트나 특정 SQL보다 Nginx와 백엔드 사이를 먼저 의심했습니다. 백엔드 배포 로그의 로컬 헬스체크가 200으로 바뀐 직후 외부 API도 200으로 회복했습니다.
+
+다음 장애부터는 같은 시각의 `docker ps`, `docker inspect`, `docker logs`, Nginx error log와 RDS 연결 오류를 함께 저장해야 원인을 확정할 수 있습니다. 이번 기록은 확인한 사실과 추정을 구분했습니다.
+
+### 2. 구현한 방식과 대안 하나를 비교하면 어떤 대가가 있나요?
+
+구현한 방식은 GitHub Actions에서 이미지를 한 번 빌드해 ECR에 저장하고, EC2가 digest로 그 이미지를 실행하는 방식입니다. 대안은 이전처럼 EC2가 Git 소스를 받아 직접 빌드하는 방식입니다.
+
+ECR 방식은 배포와 롤백에서 같은 결과물을 다시 사용할 수 있고, EC2가 빌드를 하지 않아도 됩니다. 반면 ECR 저장 비용, 이미지 수명 주기 관리, push/pull IAM 권한, 태그 승격 규칙이 추가됩니다. EC2 직접 빌드는 구성이 단순하지만 서버의 디스크·CPU·캐시 상태에 영향을 받고, 과거 커밋을 다시 빌드한 결과가 당시 실행한 이미지와 같다고 보장하기 어렵습니다. 이번에는 ECR 비용을 줄이기 위해 candidate 7일, release 최근 3개, stable 최근 1개 정책을 두고 권한을 두 저장소로 제한했습니다.
+
+### 3. DB 스키마가 바뀌면 이미지 롤백 전에 무엇을 확인하나요?
+
+이전 애플리케이션이 현재 DB 스키마를 읽고 쓸 수 있는지 먼저 확인합니다. 새 버전이 컬럼을 삭제하거나 이름을 바꿨다면 이전 이미지가 시작되지 않거나 잘못된 데이터를 저장할 수 있습니다. 이런 상태에서는 이미지 digest만 이전 것으로 바꾸면 안 됩니다.
+
+스키마 변경은 먼저 컬럼을 추가하고 양쪽 버전이 함께 동작하게 만든 뒤, 데이터 이관과 코드 전환이 끝난 후 오래된 컬럼을 제거하는 식으로 나누는 편이 안전합니다. 롤백 전에는 마이그레이션 버전, 이전 엔티티와 쿼리의 호환성, 데이터 변환의 역변환 가능 여부, 백업 복원 절차를 확인합니다. 호환되지 않으면 자동 롤백을 멈추고 새 DB로 백업을 복원해 검증한 뒤 복구 방향을 정해야 합니다.
diff --git a/docs/project/work.md b/docs/project/work.md
index 7356b37..b70d6c9 100644
--- a/docs/project/work.md
+++ b/docs/project/work.md
@@ -1,3 +1,112 @@
+- **ECR digest 기반 배포·복구 전환 (2026-09-16)**:
+  - 상태: 프런트·백엔드 실제 배포와 프런트 이전 버전 롤백·재배포 검증 완료
+  - ECR 비공개 저장소 `snowthing/backend`, `snowthing/frontend`와 수명 주기 정책을 준비했습니다.
+  - GitHub OIDC 역할은 두 저장소에 한정된 push·조회·태그 삭제 권한을, EC2 역할은 두 저장소에 한정된 pull 권한을 사용합니다.
+  - GitHub Actions가 `candidate-<commit SHA>` 이미지를 빌드·push하고 ECR digest를 조회한 뒤, EC2가 `저장소@sha256:...` 주소로 pull·실행하도록 변경했습니다.
+  - EC2의 소스 빌드를 제거하고 Compose가 외부 이미지 주소를 받도록 변경했습니다. 배포 실패 시 직전에 실행 중이던 이미지로 자동 복구합니다.
+  - 헬스체크 성공 후 `release-<commit SHA>` 태그로 승격하고 candidate 태그를 제거하여 수명 주기 규칙이 release 이미지를 함께 삭제하지 않도록 했습니다.
+  - 최초 실제 배포 커밋은 `eaf7acc669f1c9ae0f82dee2ca07a65bfdfb4fbb`입니다. 프런트 digest는 `sha256:acba5de24d57eee6fa56da4845db6d59fc1b0a43e7b8d9867dd4fd1586b6798d`, 백엔드 digest는 `sha256:f47b877a6aac0e3eb7b973bba78999a765e3415c7f7fda6c15a82834fca26d9c`입니다.
+  - 최초 프런트는 CI 29초, 빌드·push·배포 1분 59초가 걸렸습니다. 백엔드는 CI 2분 55초, 빌드·push·배포 2분 6초가 걸렸습니다.
+  - 배포 도중 외부 API에서 `502 Bad Gateway`를 확인했습니다. 당시 `/posts`는 200이었지만 `/api/v1/posts`와 `/api/v1/master/resorts`는 502였으므로 DB 응답 오류가 아니라 Nginx가 백엔드 8080에 연결하지 못한 상태로 판단했습니다. 백엔드 배포 후 두 API 모두 200으로 회복했습니다.
+  - 새 로그인 UI 커밋 `bf94203015a6edf6d0b0a977af5e4afb2c9c5710`의 프런트 digest는 `sha256:91f7b9d8027704d895ff697e37fea8329514cf684d619242f77e229a59946ffb`이며, CI 29초와 빌드·push·배포 1분 52초가 걸렸습니다.
+  - 이전 `release-eaf7acc...` digest로 수동 롤백했습니다. Actions 전체 27초, digest 조회·SSM 배포 19초가 걸렸고, 외부 로그인 화면이 이전 UI로 바뀌면서 게시글 API는 200을 유지했습니다. 실행: https://github.com/devikae/snowthing/actions/runs/35079786140
+  - 새 `release-bf94203...` digest 재배포는 Actions 전체 31초, digest 조회·SSM 배포 21초가 걸렸습니다. 외부 로그인 화면이 새 UI로 돌아왔고 게시글·리조트 API 모두 200을 확인했습니다. 실행: https://github.com/devikae/snowthing/actions/runs/35081931883
+  - 관련 실행: 최초 프런트 https://github.com/devikae/snowthing/actions/runs/35076355024, 최초 백엔드 https://github.com/devikae/snowthing/actions/runs/35076355176, 새 프런트 https://github.com/devikae/snowthing/actions/runs/35079283676
+  - 공식 액션을 `checkout@v7`, `setup-node@v7`, `setup-java@v6`, `setup-gradle@v6`, `configure-aws-credentials@v6`으로 갱신했습니다. 갱신 후 프런트·백엔드 CI와 digest 배포가 모두 성공했고 기존 Node.js 20 사용 중단 경고가 사라졌습니다.
+  - 배포 실패 시 `/var/log/snowthing-deploy/`에 Docker 상태, 비밀 환경변수를 제외한 inspect 결과, 컨테이너 로그, Nginx error log를 같은 UTC 시각으로 저장하도록 보강했습니다.
+  - `stable-3ecdc50b305aece0f40697216ea0b62eefc02c97`을 프런트와 백엔드에 지정했습니다. 백엔드 stable digest는 `sha256:dec23cf6574e4fecddfb32946ce88a924afbc3561f31bb6069e55d0b714c9016`, 프런트 stable digest는 `sha256:3bdfa20b2d63f9fba13296f3bd3daba0662cec87f3e2e112df0396a38ae7b2aa`입니다.
+  - stable 지정 후 로그인·게시글·리조트 API가 모두 200을 반환했습니다. 실행: 백엔드 https://github.com/devikae/snowthing/actions/runs/35087127962, 프런트 https://github.com/devikae/snowthing/actions/runs/35087130593
+  - 남은 항목: 비용 승인을 받은 뒤 RDS 백업을 별도 DB로 복원하고 읽기 전용 검증 앱에서 조회하는 절차가 남았습니다.
+
+- **GitHub Actions 배포 인증을 OIDC + SSM으로 전환 (2026-09-13)**:
+  - 상태: 진행 중
+  - EC2 인스턴스 역할에 `AmazonSSMManagedInstanceCore`를 연결하고 SSM Agent의 제어 채널 연결을 확인했습니다.
+  - GitHub OIDC 공급자와 배포 전용 IAM 역할을 만들고, `main`과 `deploy/aws-ec2` 브랜치만 역할을 맡을 수 있도록 신뢰 정책을 제한했습니다.
+  - Repository variables `AWS_DEPLOY_ROLE_ARN`, `AWS_REGION`, `EC2_INSTANCE_ID`를 등록했습니다.
+  - 백엔드와 프론트엔드 워크플로에서 PEM 기반 SSH 배포를 제거하고, OIDC 임시 자격증명으로 SSM Run Command를 호출하도록 변경했습니다.
+  - SSM 명령은 최대 15분 동안 완료 상태를 확인하고, 원격 명령의 최종 상태가 `Success`일 때만 Actions 작업을 성공 처리합니다.
+  - 검증 완료: 백엔드 CI와 SSM 배포 성공([Actions 실행](https://github.com/devikae/snowthing/actions/runs/34757010101)), 프론트엔드 CI와 SSM 배포 성공([Actions 실행](https://github.com/devikae/snowthing/actions/runs/34757130034)).
+  - 기존 SSH 배포용 `EC2_HOST`, `EC2_USER`, `EC2_SSH_KEY`와 중복 등록된 `AWS_DEPLOY_ROLE_ARN`, `AWS_REGION`, `EC2_INSTANCE_ID` Secrets를 삭제하고 Repository variables만 유지했습니다.
+  - 남은 작업: UI 디자인 커밋을 이 브랜치에 반영하고 새 SSM 배포로 공개 화면을 검증합니다.
+  - 운영 CSRF 확인 중 API 주소를 `https://snowthing.org`로 교체했으며, 백엔드 CORS가 localhost만 허용해 `403 Invalid CORS request`를 반환하는 문제를 확인했습니다. 운영 apex/www HTTPS origin을 허용하도록 수정합니다.
+  - 진단 결과 GitHub OIDC의 실제 `sub`에는 저장소·소유자 식별자가 포함되어 기존 조건과 불일치했습니다. 신뢰 정책을 실제 클레임에 맞춰 수정한 뒤 역할 수임이 성공했습니다. 진단 단계는 확인 후 제거했습니다.
+  - OIDC 및 SSM 명령 전송은 성공했습니다. root로 실행되는 SSM에서 Git 안전 디렉터리를 전역 설정하려 했으나 `$HOME`이 없어 실패했으므로, 전역 설정 없이 각 Git 명령에 `-c safe.directory=/home/ubuntu/snowthing`을 전달하도록 보완했습니다.
+
+- **AWS EC2 + RDS + S3 운영 배포 6단계 모노레포 선별적 배포(Selective CI/CD) 파이프라인 분리 구축 (2026-09-11)**:
+  1. **작업명**: `.github/workflows/deploy.yml` 단일 워크플로를 `deploy-backend.yml`과 `deploy-frontend.yml`로 분리하여 경로 기반 선별적 배포 및 동시성 큐잉 적용
+  2. **현재 상태**: 완료 (워크플로 파일 분리 생성 및 커밋/푸시 완료)
+  3. **완료된 항목**:
+     - 기존 단일 `.github/workflows/deploy.yml` 제거.
+     - `.github/workflows/deploy-backend.yml` 신설:
+       * `backend/**`, `database/**`, `compose.prod.yml` 변경 시에만 트리거.
+       * 백엔드 CI(Spotless + MySQL 8.0 테스트) 통과 후 EC2에서 `docker compose up -d --build backend` 단독 증분 빌드 및 API 헬스체크(200 OK) 수행.
+     - `.github/workflows/deploy-frontend.yml` 신설:
+       * `frontend/**`, `compose.prod.yml` 변경 시에만 트리거.
+       * 프론트엔드 CI(Next.js 16 프로덕션 빌드) 통과 후 EC2에서 `docker compose up -d --build frontend` 단독 증분 빌드 및 웹 헬스체크(200/304 OK) 수행.
+     - 두 워크플로 모두 `concurrency: group: ec2-production-deployment, cancel-in-progress: false` 적용하여 동시 커밋 시 EC2 배포 명령 충돌 방지 및 큐잉 직렬화 보장.
+  4. **남은 항목**:
+     - 5단계: 도메인 준비 시 Cloudflare Free (Full strict) HTTPS 암호화.
+
+- **AWS EC2 + RDS + S3 운영 배포 6단계 GitHub Actions CI/CD 파이프라인 구축 및 검증 (2026-09-11)**:
+  1. **작업명**: 탄력적 IP(`13.124.57.166`) 연결, GitHub Secrets 등록, `.github/workflows/deploy.yml` 배포 파이프라인 구축 및 헬스체크 검증
+  2. **현재 상태**: 완료 (GitHub Actions 워크플로 정상 동작 및 EC2 컨테이너 자동 재배포/헬스체크 200 OK 확인)
+  3. **완료된 항목**:
+     - AWS 탄력적 IP(Elastic IP) 할당 및 EC2(`i-014492690412b656e`) 연결 (`13.124.57.166`).
+     - GitHub 저장소 Secrets 등록: `EC2_HOST` (`13.124.57.166`), `EC2_USER` (`ubuntu`), `EC2_SSH_KEY` (PEM 개인키).
+     - EC2 보안 그룹(Security Group) 포트 22번 인바운드 `0.0.0.0/0` 개방 (GitHub Actions 러너 SSH 접속 허용).
+     - EC2 2GB Linux Swap 메모리 활성화 가이드 (OOM 방어).
+     - `MemberLoginRequest.java`: Jackson 역직렬화 시 `null`을 원시 `boolean`에 매핑하지 못하던 결함을 래퍼 클래스 `Boolean` 및 방어 메서드(`isRememberMe()`)로 개선.
+     - `.github/workflows/deploy.yml` 구축 및 동작 검증:
+       * `Backend CI (Spotless & Test)`: 통과 (MySQL 8.0 테스트 컨테이너 기반)
+       * `Frontend CI (Build Verification)`: 통과 (Next.js 16 Turbopack 프로덕션 빌드)
+       * `Deploy to AWS EC2`: 통과 (`appleboy/ssh-action` SSH 접속 ➔ Git reset ➔ Docker Compose 증분 빌드 ➔ 댕글링 이미지 정리 ➔ 헬스체크 루프 HTTP 200 OK 판정)
+  4. **남은 항목**:
+     - 5단계: 도메인 준비 시 Cloudflare Free (Full strict) HTTPS 암호화.
+
+- **AWS EC2 + RDS + S3 운영 배포 4단계 비공개 S3 이미지 연동 및 프로덕션 실측 100% 완결 (2026-09-11)**:
+  1. **작업명**: AWS S3 SDK 연동, 비공개 버킷(`snowthing-media-00001`) 기반 이미지 업로드/다운로드 API 개발, EC2 IAM Role 정책(`snowthing-s3-policy`) 연동 및 인가 실측
+  2. **현재 상태**: 4단계 100% 완료 (EC2 ➔ S3 이미지 업로드 및 로그인 세션 기반 인가 다운로드 실측 성공)
+  3. **완료된 항목**:
+     - `software.amazon.awssdk:s3:2.25.70` AWS Java SDK v2 의존성 추가.
+     - `S3Config.java`: `DefaultCredentialsProvider` 기반으로 EC2 IAM Role 임시 자격증명 자동 주입 아키텍처 수립 (정적 액세스 키 배제).
+     - EC2 IAM 역할(`snowthing-rds-connect-policy`)에 인라인 정책 `snowthing-s3-policy` (`s3:PutObject`, `s3:GetObject` on `arn:aws:s3:::snowthing-media-00001/*`) 부여 완료.
+     - `ErrorCode.java`: `INVALID_FILE_TYPE(FILE_001)`, `FILE_SIZE_EXCEEDED(FILE_002)`, `FILE_NOT_FOUND(FILE_003)`, `FILE_UPLOAD_FAILED(FILE_004)` 비즈니스 에러 코드 정의.
+     - `BusinessException.java` & `GlobalExceptionHandler.java`: 문자열 리터럴 예외 금지 규칙 준수 기반 표준 비즈니스 예외 핸들러 구축.
+     - `ImageUploadResponse.java`, `ImageDownloadResponse.java`: 방어적 복사(`byte[].clone()`)를 통한 DTO 불변성 완벽 보장.
+     - `ImageService.java`: 5MB 파일 크기 제한, 확장자/MIME 화이트리스트(`jpg`, `jpeg`, `png`, `webp`) 검증, 경로 탐색(`..`) 방어, S3 `putObject`/`getObject` 로직 구현.
+     - `ImageController.java`: `POST /api/v1/images` (인증 필수 업로드), `GET /api/v1/images/**` (인가 필수 조회) 엔드포인트 구현 (비인증/외부 접근 시 401/403 차단).
+     - `ImageServiceTest.java`: Mockito 기반 격리 단위 테스트 6종 작성 및 100% 통과 (정상 업로드, 5MB 초과 차단, 비허용 확장자 차단, 정상 다운로드, 경로 탐색 차단, 존재하지 않는 파일 404 차단).
+     - 프로덕션 실측 완료:
+       * 비인가 다운로드 시도 시 Spring Security에 의한 401 Unauthorized 차단 검증 완료.
+       * `POST /api/v1/members` 및 `POST /api/v1/auth/login` 인증 세션 획득 성공 (RDS MySQL 연동 확인).
+       * `POST /api/v1/images` 호출 시 S3 버킷(`snowthing-media-00001`)에 고유 UUID 객체 업로드 성공 (`201 Created`).
+       * `GET /api/v1/images/**` 호출 시 S3 객체 스트리밍을 통해 HTTP 200 OK 및 원본 데이터 수신 실측 성공.
+  4. **남은 항목**:
+     - 5단계: 도메인 연결 및 Cloudflare Free (Full strict) HTTPS 암호화.
+     - 6단계: GitHub Actions 기반 자동 배포 파이프라인 구축.
+
+- **AWS EC2 + RDS 운영 배포 3단계 수동 배포 및 웹 접속 완결 (2026-09-11)**:
+  1. **작업명**: EC2 배포 브랜치(`deploy/aws-ec2`) 동기화, RDS 비파괴 스키마/기준데이터 적용, 호스트 Nginx 리버스 프록시 연동 및 실제 웹 접속 검증
+  2. **현재 상태**: 3단계 100% 완료 (EC2 공인 IP `43.202.157.3` 웹 화면 및 백엔드 API 정상 서빙 중)
+  3. **완료된 항목**:
+     - `deploy/aws-ec2` 브랜치 생성 및 GitHub 원격 푸시 완료 (`ddee2fe`, `4426b9c`, `9cedf54`).
+     - RDS MySQL에 `001_initial_schema.sql` (테이블 11개) 및 `002_reference_data.sql` (스키장 6개, 카테고리 5개 등) 무결성 생성 완료.
+     - EC2 환경변수 `/etc/snowthing/prod.env` 작성 및 `chmod 600`, 소유권 `ubuntu:ubuntu` 격리 완료.
+     - AWS Advanced JDBC Wrapper 기반 IAM 무암호 DB 인증으로 Spring Boot 백엔드 RDS 연결 완결.
+     - Next.js 16 (`--legacy-peer-deps`) 및 Spring Boot 도커 컨테이너 빌드 & `Up` 구동 성공.
+     - 호스트 Nginx 설치 및 `/` (Next.js 3000), `/api/` (Spring Boot 8080) 리버스 프록시 라우팅 구성 완료.
+     - `curl -i http://127.0.0.1:8080/api/v1/master/resorts` 200 OK 및 브라우저(`http://43.202.157.3`) 접속 실측 완료.
+
+- **Sprint 04 댓글 벤치마크 학습정리 문서 보강 및 디렉터리 영문화 완료 (2026-09-09)**:
+  1. **디렉터리 영문화**: `benchmark` 하위 한글 폴더를 영문 표준으로 변경 (`실행계획` ➔ `explain-plans`, `쿼리` ➔ `queries`).
+  2. **경로 동기화**: `ADR-002-댓글아키텍처.md` 및 `댓글-벤치마크-결과.md` 내 실행계획 경로를 `explain-plans/`로 갱신.
+  3. **재현가이드 ➔ README.md 개편 및 내용 보강 (no_ai 톤)**:
+     - `재현가이드.md`를 `README.md`로 전환하고 실무 개발자 톤으로 4대 핵심 영역(Seed 코드 위치, 실행/초기화 명령어, 데이터 분포 구조, 1K~1M 9대 시나리오 검증 결과 및 인덱스/불변식 요약) 보강 완료.
+  4. **`docs/study/sprint04/댓글조회-벤치마크-학습정리.md` 심층 학습서 보강 완결**:
+     - 5대 학습 목표와 멘토의 실험 의도 및 실무 배경(1K 메모리 착시 vs 1M 운영 장애, estimated/actual rows/loops 해석, 재현 가능 시드, 읽기 이점 vs 쓰기 비용, 운영 DB 안전장치) 기술.
+     - 1K·10K·100K·1M 9대 시나리오 종합 레이턴시 비교표 및 1M Invisible 인덱스 검증 비교표(226ms vs 36ms, actual rows 200,001 ➔ 2,000) 수록.
+     - 4대 핵심 결론 및 MySQL InnoDB 물리 엔진 심층 분석(16KB Buffer Pool I/O, B-Tree 수직 Seek 및 수평 Scan 메커니즘, Hotspot 국소 격리, 커버링 인덱스 Clustered Random I/O 차단, `Using filesort` 메모리 정렬 vs 4컬럼 B-Tree 페이지 분할 트레이드오프) 반영.
+     - 7대 필수 요소 체계(개념, Why, When, How, Pros, Alternatives, Trade-off & 극복 방안) 기반 복합 인덱스 계층 조회 아키텍처 정리 완료.
 - **Sprint 03 댓글 도메인 메인 브랜치 최종 병합 완료 (2026-09-06)**:
   1. **PR #17 (`feature/sprint03-comment` ➔ `main`) 병합 완결**:
      - Sprint 03 댓글 도메인(생성·조회·수정·삭제 및 하이브리드 프리뷰 아키텍처) 전체 작업물을 `main` 브랜치로 병합 완료 ([PR #17](https://github.com/devikae/snowthing/pull/17) `MERGED`).
@@ -1188,3 +1297,14 @@
   - `CommentControllerTest`와 `spotlessCheck`는 통과했습니다.
   - `CommentCreateTest` 16건은 `SNOWTHING_TEST_DB_URL` 미설정 시 실행을 차단하는 기존 MySQL 강제 설정 때문에 Spring Context 생성 전에 실패했습니다. 경계값 변경으로 인한 테스트 assertion 실패는 아닙니다.
 >>>>>>> origin/feature/sprint03-comment
+
+- **커뮤니티 UI 디자인 운영 배포 (2026-09-13)**:
+  - `feature/ui-redesign`의 `02fde60` 커밋을 `deploy/aws-ec2`에 반영해 `12bfe1b`로 배포 브랜치에 포함했습니다.
+  - 프론트 CI가 성공했고, OIDC + SSM을 통해 EC2 프론트 컨테이너 재빌드·재시작 및 로컬 HTTP 200 헬스체크까지 완료했습니다.
+  - 운영 도메인 `https://snowthing.org/` 응답이 HTTP 200임을 확인했습니다. 원본 디자인 브랜치는 삭제하지 않았습니다.
+
+- **운영 CSRF/CORS 검증 및 수정 (2026-09-13)**:
+  - 프론트엔드 운영 API 주소가 이전 EC2 IP의 HTTP 주소로 남아 있어 `https://snowthing.org`로 교체하고 프론트엔드를 재배포했습니다.
+  - 운영 도메인에서 CSRF 발급 요청은 200이었지만 로그인 요청이 `403 Invalid CORS request`로 차단되었습니다. 원인은 백엔드 CORS 허용 origin이 `http://localhost:3000`만 포함하고 있었기 때문입니다.
+  - `https://snowthing.org`, `https://www.snowthing.org`를 허용 origin에 추가하고 백엔드를 OIDC+SSM으로 재배포했습니다.
+  - 재검증 결과 운영 CSRF 발급은 200, 동일 세션의 로그인 요청은 CORS 차단이 아닌 정상적인 `401 AUTH_001 INVALID_CREDENTIALS`를 반환했습니다. 즉 브라우저와 백엔드 사이의 CORS/CSRF 진입 문제는 해결되었습니다.
diff --git a/docs/specs/post-compose-detail-redesign.md b/docs/specs/post-compose-detail-redesign.md
new file mode 100644
index 0000000..53a80d3
--- /dev/null
+++ b/docs/specs/post-compose-detail-redesign.md
@@ -0,0 +1,26 @@
+# 게시글 작성·상세 화면 재설계
+
+## 목표
+
+두 번째 Stitch 시안의 Modern Alpine Soft UI를 게시글 작성과 상세 화면에 적용한다. API와 권한 정책은 변경하지 않고 사용자가 실제로 작성, 조회, 반응, 댓글·답글, 수정·삭제할 수 있는 영역을 우선 완성한다.
+
+## 확정 범위
+
+- 글쓰기 제목 옆 `REAL ANONYMOUS` 배지와 제목 아래 개인정보 안내 문구는 표시하지 않는다.
+- 글쓰기의 카테고리, 익명 비밀번호, 제목, Toast UI 본문, 이미지 URL, 취소·등록 기능을 유지한다.
+- 상세의 조회, 작성자, 수정·삭제 권한, 이미지, 추천·비추천, 댓글·답글과 댓글 수정·삭제·더보기 기능을 유지한다.
+- 시안의 리조트 태그, 설질, 카풀 등 서버 데이터가 없는 부분은 실제 기능으로 오해되지 않는 정적인 보조 카드로만 둔다.
+- 모바일에서는 기능 영역을 먼저 배치하고 보조 카드는 아래로 이동한다.
+
+## 구현 원칙
+
+기존 요청 함수와 상태는 보존하고 렌더링 구조와 공통 CSS만 재구성한다. API가 지원하지 않는 정렬·신고·파일 직접 업로드·임시저장은 동작하는 컨트롤로 만들지 않는다.
+
+## 검증
+
+- 익명 및 일반 게시글 작성 후 상세 페이지 이동
+- 실제 상세 데이터와 이미지 표시
+- 추천·비추천 요청
+- 댓글·답글 작성과 수정·삭제·더보기
+- 모바일 및 데스크톱 반응형 화면
+- 프로덕션 빌드와 변경 파일 ESLint
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..816abc4
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,44 @@
+# ==========================================
+# 1단계: 빌드 스테이지 (Node.js 20 Alpine)
+# ==========================================
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+# 패키지 의존성 파일 복사 및 설치 (npm ci로 정확한 잠금 버전 설치)
+COPY package.json package-lock.json ./
+RUN npm ci --legacy-peer-deps
+
+# 소스코드 전체 복사
+COPY . .
+
+# 빌드 타임에 실제 도메인 주소(HTTPS) 주입 (예: https://snowthing.shop)
+ARG NEXT_PUBLIC_API_BASE_URL
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+# Next.js 프로덕션 빌드 실행
+RUN npm run build
+
+# ==========================================
+# 2단계: 실행 스테이지 (초경량 런타임)
+# ==========================================
+FROM node:20-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PORT=3000
+
+# 보안을 위한 비root 유저 생성
+RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
+
+# 프로덕션 실행에 필요한 결과물만 복사
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/package-lock.json ./package-lock.json
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/.next ./.next
+
+USER nextjs
+
+EXPOSE 3000
+
+# 프로덕션 서버 구동 (npm run start)
+CMD ["npm", "run", "start"]
diff --git a/frontend/app/components/SiteChrome.tsx b/frontend/app/components/SiteChrome.tsx
index 36781d9..17e2c6c 100644
--- a/frontend/app/components/SiteChrome.tsx
+++ b/frontend/app/components/SiteChrome.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { csrfFetch } from "../lib/csrfFetch";
 import { API_ENDPOINTS } from "../lib/api";
 
-export type ActiveNav = "home" | "posts" | "resort" | "profile" | "login" | "signup";
+export type ActiveNav = "home" | "posts" | "free" | "anonymous" | "gear" | "resort" | "profile" | "login" | "signup";
 
 interface MemberUser {
   publicId: string;
@@ -14,36 +15,42 @@ interface MemberUser {
   profileImageUrl: string | null;
 }
 
-const navItems: { href: string; label: string; key: ActiveNav }[] = [
-  { href: "/resort", label: "Resorts", key: "resort" },
-  { href: "/posts", label: "Community", key: "posts" },
-  { href: "/profile", label: "Rider Card", key: "profile" },
-];
+interface NavItem {
+  href: string;
+  label: string;
+  key: string;
+}
 
-const categories = [
-  { href: "/posts", label: "전체 게시판", icon: "forum", key: "all" },
-  { href: "/posts?category=FREE", label: "자유 게시판", icon: "terrain", key: "free" },
-  { href: "/posts?category=ANONYMOUS", label: "익명 게시판", icon: "visibility_off", key: "anonymous" },
-  { href: "/posts?category=QNA", label: "장비 Q&A", icon: "help", key: "qna" },
-  { href: "/posts?category=FOOD", label: "리조트 맛집", icon: "restaurant", key: "food" },
+const navItems: NavItem[] = [
+  { href: "/posts", label: "전체글", key: "posts" },
+  { href: "/posts?sort=popular", label: "실시간 베스트", key: "best" },
+  { href: "/posts?category=FREE", label: "자유게시판", key: "free" },
+  { href: "/posts?category=ANONYMOUS", label: "익명게시판", key: "anonymous" },
+  { href: "/resort", label: "실시간 설질/웹캠", key: "resort" },
+  { href: "/posts?category=QNA", label: "장비·테크닉", key: "gear" },
+  { href: "/#carpool", label: "카풀/동행", key: "carpool" },
+  { href: "/#market", label: "중고장터", key: "market" },
 ];
 
+const mobileItems = [
+  { href: "/", label: "홈", icon: "home", key: "home" },
+  { href: "/posts?sort=popular", label: "베스트", icon: "local_fire_department", key: "best" },
+  { href: "/resort", label: "실시간 설질", icon: "ac_unit", key: "resort" },
+  { href: "/#carpool", label: "카풀", icon: "directions_car", key: "carpool" },
+  { href: "/posts?category=ANONYMOUS", label: "익명", icon: "forum", key: "anonymous" },
+] as const;
+
 export function TopNav({ active = "home" }: { active?: ActiveNav }) {
+  const router = useRouter();
   const [user, setUser] = useState<MemberUser | null>(null);
   const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
 
   useEffect(() => {
-    (async () => {
+    void (async () => {
       try {
-        const res = await fetch(API_ENDPOINTS.members.me, {
-          credentials: "include",
-        });
-        if (res.ok) {
-          const data = await res.json();
-          setUser(data);
-        } else {
-          setUser(null);
-        }
+        const response = await fetch(API_ENDPOINTS.members.me, { credentials: "include" });
+        setUser(response.ok ? await response.json() : null);
       } catch {
         setUser(null);
       } finally {
@@ -52,13 +59,15 @@ export function TopNav({ active = "home" }: { active?: ActiveNav }) {
     })();
   }, []);
 
+  const handleSearch = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const keyword = search.trim();
+    if (keyword) router.push(`/posts?keyword=${encodeURIComponent(keyword)}`);
+  };
+
   const handleLogout = async () => {
     try {
-      await csrfFetch(API_ENDPOINTS.auth.logout, {
-        method: "POST",
-      });
-    } catch {
-      // ignore
+      await csrfFetch(API_ENDPOINTS.auth.logout, { method: "POST" });
     } finally {
       setUser(null);
       window.location.href = "/";
@@ -66,107 +75,95 @@ export function TopNav({ active = "home" }: { active?: ActiveNav }) {
   };
 
   return (
-    <header className="sticky top-0 z-50 border-b border-[var(--snow-border)] bg-white">
-      <div className="snow-container flex h-16 items-center justify-between px-5 lg:px-8">
-        <div className="flex items-center gap-10">
-          <Link href="/" className="snow-brand">
-            SnowThing
-          </Link>
-          <nav className="hidden items-center gap-8 md:flex">
-            {navItems.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={`font-mono text-xs uppercase tracking-[0.22em] transition ${
-                  active === item.key
-                    ? "border-b-2 border-black pb-1 text-black"
-                    : "text-[var(--snow-ink-soft)] hover:text-black"
-                }`}
-              >
-                {item.label}
-              </Link>
-            ))}
-          </nav>
+    <>
+      <div className="community-notice">
+        <div className="community-container community-notice-inner">
+          <div className="community-notice-message">
+            <span className="notice-badge">공지</span>
+            <span className="truncate">24/25 시즌방 인원 구인 및 리조트 실시간 슬로프 제보 게시판 이용 수칙 안내</span>
+          </div>
+          <div className="community-notice-links">
+            <span>강원권 야간 정설 완료</span><i />
+            <Link href="/resort">실시간 웹캠 센터</Link><i />
+            <Link href="/login">출석체크</Link>
+          </div>
         </div>
-        <div className="flex items-center gap-4">
-          {!loading && (
-            <>
-              {user ? (
-                <div className="flex items-center gap-3">
-                  <Link
-                    href="/profile"
-                    className="font-mono text-xs font-bold text-black hover:underline"
-                  >
-                    {user.nickname}님
-                  </Link>
-                  <button
-                    onClick={handleLogout}
-                    className="font-mono text-xs uppercase tracking-[0.14em] text-[var(--snow-ink-soft)] hover:text-[#dc2626]"
-                  >
-                    Sign Out
-                  </button>
-                </div>
-              ) : (
+      </div>
+
+      <header className="community-header">
+        <div className="community-container community-header-inner">
+          <div className="community-header-left">
+            <Link href="/" aria-label="Snowthing 홈" className="alpine-logo">
+              <span className="alpine-logo-mark"><i /><i /><i /></span>
+              <span>SnowThing</span>
+            </Link>
+            <nav className="community-main-nav" aria-label="메인 메뉴">
+              {navItems.map((item) => (
                 <Link
-                  href="/login"
-                  className="font-mono text-xs uppercase tracking-[0.14em] text-[var(--snow-ink-soft)] hover:text-black sm:inline"
+                  key={item.key}
+                  href={item.href}
+                  className={active === item.key ? "nav-active" : ""}
+                  aria-current={active === item.key ? "page" : undefined}
                 >
-                  Sign In
+                  {item.label}
                 </Link>
-              )}
-            </>
-          )}
-          <Link href="/posts/create" className="snow-btn-primary min-h-9 px-4">
-            <span className="material-symbols-outlined text-[16px]">edit</span>
-            Write
-          </Link>
+              ))}
+            </nav>
+          </div>
+
+          <div className="community-header-actions">
+            <form className="header-search" onSubmit={handleSearch}>
+              <span className="material-symbols-outlined">search</span>
+              <input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="슬로프, 장비, 카풀 검색" aria-label="통합 검색" />
+            </form>
+            <Link href="/posts/create" className="header-write-button">
+              <span className="material-symbols-outlined">edit</span><span>글쓰기</span>
+            </Link>
+            <button type="button" className="header-icon-button" aria-label="알림">
+              <span className="material-symbols-outlined">notifications</span><i />
+            </button>
+            {!loading && (user ? (
+              <div className="header-profile-wrap">
+                <Link href="/profile" className="header-profile" title={`${user.nickname} 프로필`}>
+                  {user.profileImageUrl ? <img src={user.profileImageUrl} alt="" /> : <span>{user.nickname.slice(0, 1)}</span>}
+                </Link>
+                <button type="button" onClick={handleLogout} className="header-logout">로그아웃</button>
+              </div>
+            ) : (
+              <Link href="/login" className="header-login">로그인</Link>
+            ))}
+          </div>
         </div>
-      </div>
-    </header>
-  );
-}
+      </header>
 
-export function SideCategories({ active = "all" }: { active?: string }) {
-  return (
-    <aside className="hidden border-r-2 border-black bg-white px-6 py-8 lg:block">
-      <div className="mb-8">
-        <h2 className="text-2xl font-extrabold italic text-black">Categories</h2>
-        <p className="mt-1 text-sm text-[var(--snow-muted)]">Find your ride</p>
-      </div>
-      <nav className="flex flex-col gap-2">
-        {categories.map((category) => (
+      <nav className="community-mobile-nav" aria-label="모바일 메뉴">
+        {mobileItems.map((item) => (
           <Link
-            key={category.href}
-            href={category.href}
-            className={`flex items-center gap-3 rounded px-4 py-3 text-sm font-semibold transition ${
-              active === category.key
-                ? "bg-[var(--snow-surface-low)] text-black"
-                : "text-[var(--snow-ink-soft)] hover:bg-[var(--snow-background)] hover:text-black"
-            }`}
+            key={item.key}
+            href={item.href}
+            className={active === item.key ? "active" : ""}
+            aria-current={active === item.key ? "page" : undefined}
           >
-            <span className="material-symbols-outlined text-[19px]">{category.icon}</span>
-            {category.label}
+            <span className="material-symbols-outlined">{item.icon}</span><span>{item.label}</span>
           </Link>
         ))}
       </nav>
-    </aside>
+    </>
   );
 }
 
+export function SideCategories({ active = "all" }: { active?: string }) {
+  return <aside hidden data-active-category={active} aria-hidden="true" />;
+}
+
 export function Footer() {
   return (
-    <footer className="border-t border-[var(--snow-border)] bg-white">
-      <div className="snow-container flex flex-col gap-4 px-5 py-6 text-xs text-[var(--snow-muted)] md:flex-row md:items-center md:justify-between lg:px-8">
-        <Link href="/" className="snow-brand text-xl">
-          SnowThing
-        </Link>
-        <div className="flex flex-wrap gap-6 font-mono">
-          <span>© 2026 Snowthing</span>
-          <Link href="/">Privacy Policy</Link>
-          <Link href="/">Terms of Service</Link>
-          <Link href="/">Contact Support</Link>
-        </div>
+    <footer className="community-footer">
+      <div className="community-container community-footer-inner">
+        <div className="community-footer-brand"><span className="alpine-logo-mark small"><i /><i /><i /></span><strong>SNOWTHING</strong><span>대한민국 스노보드 &amp; 스키 커뮤니티</span></div>
+        <nav><Link href="/">이용약관</Link><Link href="/">개인정보처리방침</Link><Link href="/">게시판 운영원칙</Link><Link href="/">고객센터</Link></nav>
       </div>
+      <div className="community-container community-copyright">Copyright © SNOWTHING Alpine Community. All rights reserved.</div>
     </footer>
   );
 }
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 8a44625..798cdf1 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -2,20 +2,22 @@
 
 :root {
   --snow-canvas: #ffffff;
-  --snow-background: #f9f9f9;
-  --snow-surface-low: #f3f3f4;
-  --snow-surface-mid: #eeeeee;
-  --snow-ink: #111827;
-  --snow-ink-soft: #45464c;
-  --snow-muted: #6b7280;
-  --snow-faint: #9ca3af;
-  --snow-border: #e5e7eb;
-  --snow-border-strong: #111827;
-  --snow-error: #ba1a1a;
-  --snow-success: #10b981;
-  --snow-success-soft: #e6f7f0;
-  --font-hanken: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --snow-background: #f3f5f8;
+  --snow-surface-low: #f8fafc;
+  --snow-surface-mid: #f1f5f9;
+  --snow-ink: #1e293b;
+  --snow-ink-soft: #475569;
+  --snow-muted: #64748b;
+  --snow-faint: #94a3b8;
+  --snow-border: #e2e8f0;
+  --snow-border-strong: #cbd5e1;
+  --snow-error: #e11d48;
+  --snow-success: #059669;
+  --snow-success-soft: #ecfdf5;
+  --alpine-navy: #0f2942;
+  --alpine-sky: #0284c7;
+  --font-hanken: "Pretendard Variable", Pretendard, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: Inter, "Pretendard Variable", Pretendard, sans-serif;
 }
 
 * {
@@ -32,7 +34,8 @@ body {
   background: var(--snow-background);
   color: var(--snow-ink);
   font-family: var(--font-hanken);
-  letter-spacing: 0;
+  letter-spacing: -0.02em;
+  padding-bottom: 0;
 }
 
 a {
@@ -78,9 +81,9 @@ button:disabled {
 }
 
 .snow-brand {
-  color: #000000;
+  color: var(--alpine-navy);
   font-size: 24px;
-  font-style: italic;
+  font-style: normal;
   font-weight: 800;
   letter-spacing: -0.02em;
   line-height: 1;
@@ -116,7 +119,7 @@ button:disabled {
 .snow-card {
   background: var(--snow-canvas);
   border: 1px solid var(--snow-border);
-  border-radius: 4px;
+  border-radius: 8px;
 }
 
 .snow-card-hover {
@@ -131,9 +134,9 @@ button:disabled {
 
 .snow-btn-primary {
   align-items: center;
-  background: #000000;
-  border: 1px solid #000000;
-  border-radius: 4px;
+  background: var(--alpine-navy);
+  border: 1px solid var(--alpine-navy);
+  border-radius: 6px;
   color: #ffffff;
   display: inline-flex;
   font-family: var(--font-mono);
@@ -144,20 +147,20 @@ button:disabled {
   letter-spacing: 0.08em;
   min-height: 40px;
   padding: 0 18px;
-  text-transform: uppercase;
+  text-transform: none;
   transition: background 160ms ease, border-color 160ms ease;
 }
 
 .snow-btn-primary:hover {
-  background: #1f2937;
-  border-color: #1f2937;
+  background: var(--alpine-sky);
+  border-color: var(--alpine-sky);
 }
 
 .snow-btn-secondary {
   align-items: center;
   background: #ffffff;
   border: 1px solid var(--snow-border);
-  border-radius: 4px;
+  border-radius: 6px;
   color: var(--snow-ink);
   display: inline-flex;
   font-family: var(--font-mono);
@@ -168,7 +171,7 @@ button:disabled {
   letter-spacing: 0.05em;
   min-height: 40px;
   padding: 0 18px;
-  text-transform: uppercase;
+  text-transform: none;
   transition: border-color 160ms ease, background 160ms ease;
 }
 
@@ -239,7 +242,7 @@ button:disabled {
 
 .snow-grid-shell {
   display: grid;
-  grid-template-columns: 270px minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
   min-height: calc(100vh - 64px);
 }
 
@@ -248,3 +251,187 @@ button:disabled {
     display: block;
   }
 }
+
+/* Modern alpine community chrome and home */
+.community-page { min-height: 100vh; background: #f3f5f8; color: #334155; font-size: 13px; }
+.community-container { width: min(100% - 32px, 1280px); margin-inline: auto; }
+.community-notice { background: #0b1e32; border-bottom: 1px solid #1e354d; color: #cbd5e1; font-size: 12px; }
+.community-notice-inner { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 24px; }
+.community-notice-message { display: flex; min-width: 0; align-items: center; gap: 8px; color: #e2e8f0; }
+.notice-badge { flex: none; border-radius: 4px; background: #e11d48; padding: 2px 7px; color: white; font-size: 10px; font-weight: 800; }
+.community-notice-links { display: flex; flex: none; align-items: center; gap: 12px; color: #94a3b8; font-size: 11px; }
+.community-notice-links i { width: 1px; height: 11px; background: #334155; }
+.community-notice-links a:hover { color: #7dd3fc; }
+.community-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #e2e8f0; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
+.community-header-inner { display: flex; height: 58px; align-items: center; justify-content: space-between; gap: 16px; }
+.community-header-left, .community-header-actions { display: flex; min-width: 0; align-items: center; }
+.community-header-left { gap: 28px; }
+.community-header-actions { flex: none; gap: 10px; }
+.alpine-logo { display: flex; flex: none; align-items: center; gap: 8px; color: #0f2942; font-size: 20px; font-weight: 900; letter-spacing: -.05em; }
+.alpine-logo-mark { position: relative; display: inline-flex; width: 30px; height: 28px; align-items: end; justify-content: center; overflow: hidden; border: 2px solid #0f2942; border-radius: 3px; }
+.alpine-logo-mark i { position: absolute; bottom: -6px; width: 18px; height: 18px; transform: rotate(45deg); border: 2px solid #0284c7; background: white; }
+.alpine-logo-mark i:nth-child(1) { left: -7px; }
+.alpine-logo-mark i:nth-child(2) { left: 6px; bottom: -1px; border-color: #0f2942; }
+.alpine-logo-mark i:nth-child(3) { right: -9px; }
+.alpine-logo-mark.small { width: 23px; height: 21px; }
+.community-main-nav { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
+.community-main-nav a { display: flex; align-items: center; gap: 5px; border-radius: 5px; padding: 7px 8px; color: #475569; font-size: 13px; font-weight: 650; transition: .16s ease; }
+.community-main-nav a:hover { background: #f1f5f9; color: #0f2942; }
+.community-main-nav a.nav-active { position: relative; background: #f0f9ff; color: #0f2942; font-weight: 800; }
+.community-main-nav a.nav-active::after { position: absolute; right: 8px; bottom: -8px; left: 8px; height: 2px; border-radius: 999px; background: #38bdf8; content: ""; }
+.header-search { position: relative; display: flex; width: 220px; align-items: center; }
+.header-search .material-symbols-outlined { position: absolute; left: 10px; color: #94a3b8; font-size: 17px; }
+.header-search input { width: 100%; height: 34px; border: 1px solid #e2e8f0; border-radius: 5px; outline: 0; background: #f1f5f9; padding: 0 12px 0 32px; font-size: 12px; transition: .16s ease; }
+.header-search input:focus { border-color: #0284c7; background: white; box-shadow: 0 0 0 3px rgba(2,132,199,.1); }
+.header-write-button { display: inline-flex; height: 34px; align-items: center; gap: 5px; border-radius: 5px; background: #0f2942; padding: 0 13px; color: white; font-size: 12px; font-weight: 800; }
+.header-write-button:hover { background: #0369a1; }
+.header-write-button .material-symbols-outlined { font-size: 16px; }
+.header-icon-button { position: relative; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #64748b; }
+.header-icon-button:hover { background: #f1f5f9; color: #0f172a; }
+.header-icon-button i { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #e11d48; }
+.header-profile-wrap { display: flex; align-items: center; gap: 6px; }
+.header-profile { display: grid; width: 30px; height: 30px; place-items: center; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 50%; background: #e0f2fe; color: #075985; font-weight: 800; }
+.header-profile img { width: 100%; height: 100%; object-fit: cover; }
+.header-logout, .header-login { border: 0; background: transparent; color: #64748b; font-size: 11px; font-weight: 600; }
+.header-logout:hover, .header-login:hover { color: #0284c7; }
+.community-mobile-nav { display: none; }
+
+.home-main { min-height: calc(100vh - 130px); padding-block: 16px 40px; }
+.hero-banner { position: relative; height: 320px; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 8px; background: #0f2942; }
+.hero-banner > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
+.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,15,30,.9) 0%, rgba(15,41,66,.65) 44%, rgba(15,41,66,.06) 78%); }
+.hero-copy { position: absolute; inset: 0; display: flex; max-width: 720px; flex-direction: column; justify-content: center; padding: 40px; color: white; }
+.hero-eyebrow { display: flex; align-items: center; gap: 10px; }
+.hero-eyebrow span { border-radius: 999px; background: #e11d48; padding: 5px 11px; font-size: 11px; font-weight: 900; letter-spacing: .02em; }
+.hero-eyebrow b { color: #7dd3fc; font-size: 12px; }
+.hero-copy h1 { margin: 10px 0 8px; font-size: clamp(28px, 3vw, 40px); font-weight: 900; letter-spacing: -.04em; line-height: 1.22; text-shadow: 0 2px 8px rgba(0,0,0,.18); }
+.hero-copy h1 em { color: #38bdf8; font-style: normal; }
+.hero-copy p { max-width: 590px; margin: 0 0 20px; color: #e2e8f0; font-size: 14px; line-height: 1.65; }
+.hero-actions { display: flex; gap: 10px; }
+.hero-actions button { height: 39px; border: 0; border-radius: 5px; background: #0284c7; padding: 0 16px; color: white; font-size: 13px; font-weight: 800; }
+.hero-actions button:hover { background: #0369a1; }
+.hero-actions button.ghost { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
+.hero-arrow { position: absolute; top: 50%; display: grid; width: 34px; height: 34px; transform: translateY(-50%); place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(15,23,42,.55); color: white; font-size: 25px; }
+.hero-arrow.prev { left: 12px; }.hero-arrow.next { right: 12px; }
+.hero-count { position: absolute; right: 16px; bottom: 12px; border-radius: 99px; background: rgba(15,23,42,.65); padding: 5px 11px; color: #cbd5e1; font-size: 11px; }.hero-count b { color: #38bdf8; }
+.panel { border: 1px solid #dbe3ed; border-radius: 6px; background: white; box-shadow: 0 2px 5px rgba(15,23,42,.025); }
+.resort-panel { margin-top: 16px; padding: 12px; }
+.panel-heading, .mini-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f1f5f9; }
+.panel-heading { padding-bottom: 9px; }
+.panel-heading h2 { display: flex; align-items: center; margin: 0; color: #0f172a; font-size: 14px; font-weight: 800; }
+.panel-heading h2 small { margin-left: 7px; color: #64748b; font-size: 11px; font-weight: 400; }
+.status-pulse { width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px #d1fae5; }
+.panel-heading > div { display: flex; align-items: center; gap: 5px; }
+.panel-heading a { margin-right: 8px; color: #0369a1; font-size: 11px; font-weight: 700; }
+.panel-heading button { width: 26px; height: 26px; border: 1px solid #cbd5e1; border-radius: 4px; background: #f8fafc; color: #475569; }
+.resort-scroller { display: flex; gap: 10px; overflow-x: auto; padding-top: 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }.resort-scroller::-webkit-scrollbar { display: none; }
+.resort-card { flex: 0 0 255px; scroll-snap-align: start; border: 1px solid #dbe3ed; border-radius: 5px; background: #fbfcfd; padding: 10px; transition: border-color .16s ease; }.resort-card:hover { border-color: #38bdf8; }
+.resort-card header { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; }.resort-card header strong { color: #1e293b; }.resort-card header b { margin-left: auto; color: #0369a1; font-family: Inter,sans-serif; font-size: 12px; }
+.operation { border: 1px solid #a7f3d0; border-radius: 3px; background: #ecfdf5; padding: 1px 4px; color: #059669; font-size: 10px; font-weight: 800; }.operation.warn { border-color: #bae6fd; background: #f0f9ff; color: #0284c7; }.operation.busy { border-color: #fde68a; background: #fffbeb; color: #b45309; }
+.resort-card dl { margin: 0; border-top: 1px solid #f1f5f9; padding-top: 6px; }.resort-card dl div { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0; font-size: 11px; }.resort-card dt { color: #64748b; }.resort-card dd { margin: 0; color: #334155; font-weight: 650; text-align: right; }.resort-card dd em { color: #0284c7; font-size: 10px; font-style: normal; }
+.crowd { border-radius: 3px; background: #ecfdf5; padding: 2px 4px; color: #047857; font-size: 10px; }.crowd.warn { background: #fffbeb; color: #b45309; }.crowd.busy { background: #fff1f2; color: #be123c; }
+.resort-card footer { display: flex; justify-content: space-between; margin-top: 7px; border-top: 1px solid #f1f5f9; padding-top: 7px; color: #94a3b8; font-size: 10px; }.resort-card footer a { color: #0284c7; font-weight: 750; }
+.home-content-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(300px,1fr); align-items: start; gap: 16px; margin-top: 16px; }.home-feed,.home-sidebar { display: flex; flex-direction: column; gap: 12px; }
+.post-board { overflow: hidden; }.board-tabs { display: flex; min-height: 46px; align-items: end; justify-content: space-between; overflow: hidden; border-bottom: 1px solid #e2e8f0; background: #f8fafc; padding: 8px 12px 0; }.board-tabs > div { display: flex; align-items: end; overflow-x: auto; scrollbar-width: none; }.board-tabs button { flex: none; height: 37px; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 0 12px; color: #475569; font-size: 12px; font-weight: 750; }.board-tabs button:hover { background: #f1f5f9; color: #0f172a; }.board-tabs button.active { border-color: #0f2942; background: white; color: #0f2942; }.board-tabs button.hot { color: #e11d48; }.board-tabs select { height: 28px; margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; color: #64748b; font-size: 11px; }
+.compact-post-list { display: flex; flex-direction: column; }.compact-post { display: grid; grid-template-columns: 42px minmax(0,1fr) 64px; align-items: center; gap: 12px; min-height: 72px; border-bottom: 1px solid #f1f5f9; padding: 11px 13px; transition: background .16s ease; }.compact-post:hover { background: #f8fafc; }.compact-post.warning { background: #fffafa; }.vote { justify-self: center; border-radius: 4px; background: #f1f5f9; padding: 4px 6px; color: #64748b; font-family: Inter,sans-serif; font-size: 11px; font-weight: 800; }.vote.hot { border: 1px solid #fecdd3; background: #fff1f2; color: #e11d48; }
+.post-summary { min-width: 0; }.post-summary > div { display: flex; min-width: 0; align-items: center; gap: 6px; }.post-summary .category { flex: none; color: #0369a1; font-size: 12px; }.post-summary .category.danger { color: #e11d48; }.post-summary strong { overflow: hidden; color: #1e293b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.post-summary em { flex: none; color: #0284c7; font-size: 12px; font-style: normal; font-weight: 800; }.post-summary small { border-radius: 3px; background: #f1f5f9; padding: 1px 4px; color: #94a3b8; }.post-summary p { display: flex; gap: 8px; margin: 5px 0 0; color: #94a3b8; font-size: 11px; }.post-summary p b { color: #64748b; font-weight: 550; }.compact-post > img { width: 64px; height: 44px; border-radius: 4px; object-fit: cover; }
+.board-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #f8fafc; padding: 9px 12px; }.pagination { display: flex; align-items: center; gap: 3px; }.pagination button { min-width: 27px; height: 27px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #475569; font-size: 11px; }.pagination button.current { border-color: #cbd5e1; background: white; color: #0369a1; font-weight: 800; }.board-footer form { display: flex; gap: 6px; }.board-footer input { width: 175px; height: 28px; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0 9px; font-size: 11px; }.board-footer form button { border: 0; border-radius: 4px; background: #334155; padding: 0 12px; color: white; font-size: 11px; font-weight: 800; }
+.mini-heading { min-height: 39px; padding: 0 12px; }.mini-heading h2 { display: flex; align-items: center; gap: 6px; margin: 0; color: #1e293b; font-size: 12px; font-weight: 800; }.mini-heading h2 > span { border-radius: 3px; background: #e11d48; padding: 2px 5px; color: white; font-size: 9px; }.mini-heading h2 > span.blue { background: #0284c7; }.mini-heading h2 i { width: 8px; height: 8px; border-radius: 50%; background: #0284c7; }.mini-heading > a { color: #64748b; font-size: 11px; font-weight: 650; }.mini-heading > a:hover { color: #0284c7; }
+.technique-panel { padding-bottom: 12px; }.technique-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px 0; }.technique-grid > a { display: flex; gap: 10px; border: 1px solid #f1f5f9; border-radius: 4px; background: #f8fafc; padding: 8px; }.technique-grid img { width: 58px; height: 58px; border-radius: 4px; object-fit: cover; }.technique-grid div { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; }.technique-grid strong { color: #334155; font-size: 12px; line-height: 1.45; }.technique-grid span { color: #94a3b8; font-size: 10px; }
+.anonymous-widget > div:nth-child(2) { padding: 0 12px; }.anonymous-widget > div:nth-child(2) > a { display: block; border-bottom: 1px solid #f1f5f9; padding: 10px 1px; }.anonymous-widget p { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 11px; }.anonymous-widget p b { color: #475569; }.anonymous-widget p em { color: #e11d48; font-style: normal; font-weight: 800; }.anonymous-widget a > strong,.anonymous-widget a > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.anonymous-widget a > strong { color: #1e293b; font-size: 12px; }.anonymous-widget a > span { margin-top: 4px; color: #64748b; font-size: 11px; }.anonymous-widget form { display: flex; gap: 6px; padding: 10px 12px; }.anonymous-widget input { min-width: 0; flex: 1; height: 31px; border: 1px solid #e2e8f0; border-radius: 4px; background: #f8fafc; padding: 0 9px; font-size: 11px; }.anonymous-widget form button { border: 0; border-radius: 4px; background: #334155; padding: 0 12px; color: white; font-size: 11px; font-weight: 800; }
+.carpool-widget > div:nth-child(2) { padding: 0 12px; }.carpool-widget article { border-bottom: 1px solid #f1f5f9; padding: 11px 0; }.carpool-widget article:last-child { border: 0; }.carpool-widget article header,.carpool-widget article p,.carpool-widget article footer { display: flex; justify-content: space-between; gap: 8px; }.carpool-widget article header strong { color: #334155; font-size: 12px; }.carpool-widget article header i { color: #94a3b8; font-style: normal; }.carpool-widget article header em { color: #0369a1; font-style: normal; }.carpool-widget article header > span { border: 1px solid #fecdd3; border-radius: 3px; background: #fff1f2; padding: 2px 5px; color: #e11d48; font-size: 10px; font-weight: 800; }.carpool-widget article p { margin: 7px 0; color: #64748b; font-size: 11px; }.carpool-widget article p strong { color: #475569; }.carpool-widget article footer { color: #94a3b8; font-size: 10px; }.carpool-widget article footer a { flex: none; color: #0284c7; font-weight: 750; }
+.market-widget { padding-bottom: 11px; }.market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px 12px 0; }.market-grid > a { min-width: 0; border: 1px solid #e2e8f0; border-radius: 5px; background: #fbfcfd; padding: 7px; }.market-grid > a:hover { border-color: #38bdf8; }.market-grid a > div { position: relative; overflow: hidden; border-radius: 4px; }.market-grid img { width: 100%; aspect-ratio: 1.35; object-fit: cover; transition: transform .2s ease; }.market-grid a:hover img { transform: scale(1.03); }.market-grid div span { position: absolute; top: 5px; left: 5px; border-radius: 3px; background: #0f172a; padding: 2px 5px; color: white; font-size: 9px; font-weight: 800; }.market-grid > a > strong,.market-grid > a > b,.market-grid > a > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.market-grid > a > strong { margin-top: 6px; color: #334155; font-size: 11px; }.market-grid > a > b { margin-top: 2px; color: #0f172a; font-size: 12px; }.market-grid > a > small { margin-top: 2px; color: #94a3b8; font-size: 10px; }
+.community-footer { margin-top: 24px; border-top: 1px solid #e2e8f0; background: white; color: #64748b; font-size: 11px; }.community-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px 8px; }.community-footer-brand { display: flex; align-items: center; gap: 8px; }.community-footer-brand strong { color: #334155; }.community-footer-brand > span:last-child { padding-left: 8px; border-left: 1px solid #cbd5e1; }.community-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }.community-footer nav a:hover { color: #0284c7; }.community-copyright { padding-bottom: 20px; color: #94a3b8; }
+
+@media (max-width: 1180px) {
+  .community-main-nav a { padding-inline: 6px; font-size: 12px; }
+  .community-header-left { gap: 16px; }
+  .header-search { display: none; }
+}
+
+@media (max-width: 900px) {
+  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
+  .community-container { width: min(100% - 24px, 1280px); }
+  .community-notice-links,.community-main-nav,.header-logout { display: none; }
+  .community-header { top: 0; }
+  .community-header-inner { height: 54px; }
+  .community-mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 60; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #cbd5e1; background: rgba(255,255,255,.97); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px rgba(15,23,42,.06); backdrop-filter: blur(12px); }
+  .community-mobile-nav a { display: flex; min-height: 56px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #64748b; font-size: 10px; font-weight: 650; }.community-mobile-nav .material-symbols-outlined { font-size: 20px; }.community-mobile-nav a.active { background: #f0f9ff; box-shadow: inset 0 2px 0 #38bdf8; color: #0f2942; font-weight: 800; }
+  .home-content-grid { grid-template-columns: 1fr; }.home-sidebar { display: grid; grid-template-columns: 1fr 1fr; }.market-widget { grid-column: 1/-1; }
+  .community-footer { margin-bottom: 0; }.community-footer-inner { align-items: flex-start; flex-direction: column; }
+}
+
+@media (max-width: 640px) {
+  .community-container { width: calc(100% - 20px); }
+  .community-notice-inner { min-height: 28px; }.community-notice-message { font-size: 11px; }
+  .alpine-logo { font-size: 18px; }.alpine-logo-mark { width: 26px; height: 25px; }
+  .header-icon-button { display: none; }.header-write-button { width: 35px; padding: 0; justify-content: center; }.header-write-button > span:last-child { display: none; }.header-login { font-size: 11px; }
+  .home-main { padding-top: 10px; }.hero-banner { height: 290px; }.hero-copy { padding: 28px 25px; }.hero-copy h1 { font-size: 27px; }.hero-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; }.hero-arrow { display: none; }
+  .panel-heading h2 { align-items: flex-start; font-size: 12px; }.panel-heading h2 small { display: block; }.panel-heading a { display: none; }
+  .resort-card { flex-basis: 245px; }.board-tabs select { display: none; }.compact-post { grid-template-columns: 38px minmax(0,1fr); min-height: 68px; gap: 8px; padding-inline: 9px; }.compact-post > img { display: none; }.post-summary strong { font-size: 12px; }.post-summary p span:last-child { display: none; }
+  .board-footer { align-items: stretch; flex-direction: column; }.board-footer form input { flex: 1; width: auto; }.technique-grid,.home-sidebar { grid-template-columns: 1fr; }.market-widget { grid-column: auto; }.community-footer-brand > span:last-child,.community-footer nav { display: none; }
+}
+
+/* Post compose */
+.compose-page { min-height: calc(100vh - 142px); padding-block: 28px 52px; }
+.compose-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
+.compose-heading-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: #036e9f; color: white; box-shadow: 0 5px 12px rgba(3,105,161,.18); }
+.compose-heading h1 { margin: 0; color: #191c1e; font-size: 26px; font-weight: 850; letter-spacing: -.035em; }
+.compose-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,1fr); align-items: start; gap: 24px; }
+.compose-card,.compose-side-card { border: 1px solid #e2e8f0; border-radius: 16px; background: white; box-shadow: 0 4px 20px -2px rgba(14,165,233,.06),0 2px 6px -1px rgba(15,23,42,.03); }
+.compose-card { display: flex; flex-direction: column; gap: 22px; padding: 28px 32px; }
+.compose-section { display: flex; flex-direction: column; gap: 8px; }
+.compose-label { display: flex; align-items: center; gap: 5px; color: #1e293b; font-size: 13px; font-weight: 750; }
+.compose-label b { color: #e11d48; }.compose-label small { color: #64748b; font-weight: 450; }.compose-label .material-symbols-outlined { color: #036e9f; font-size: 17px; }
+.compose-select,.compose-title-input,.compose-image-input,.compose-password-field input { width: 100%; border: 1px solid transparent; border-radius: 11px; outline: 0; background: #f1f3f5; color: #1e293b; transition: .16s ease; }
+.compose-select,.compose-title-input { height: 48px; padding: 0 15px; }.compose-title-input { font-size: 16px; font-weight: 600; }.compose-image-input { height: 46px; padding: 0 14px; font-size: 12px; }
+.compose-select:focus,.compose-title-input:focus,.compose-image-input:focus,.compose-password-field input:focus { border-color: #0891b2; background: white; box-shadow: 0 0 0 3px rgba(8,145,178,.14); }
+.compose-select:disabled { opacity: .72; }.compose-help { margin: 0; color: #94a3b8; font-size: 10px; }
+.compose-author-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-radius: 12px; background: #f1f3f5; padding: 15px 16px; }
+.compose-author { display: flex; align-items: center; gap: 10px; }.compose-author > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #e0e3e5; color: #036e9f; }.compose-author strong { color: #334155; font-size: 13px; }
+.compose-password { display: flex; align-items: center; gap: 10px; color: #475569; font-size: 11px; font-weight: 750; }.compose-password-field { position: relative; display: flex; width: 220px; align-items: center; }.compose-password-field input { height: 44px; background: white; padding: 0 38px 0 13px; font-size: 12px; }.compose-password-field > span { position: absolute; right: 12px; color: #94a3b8; font-size: 16px; }
+.compose-editor { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: white; }.compose-editor .toastui-editor-defaultUI { border: 0; }.compose-editor .toastui-editor-toolbar { background: #e9ecef; }.compose-editor .toastui-editor-main { background: white; }
+.compose-error { display: flex; align-items: center; gap: 7px; border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; padding: 11px 13px; color: #dc2626; font-size: 12px; font-weight: 700; }.compose-error .material-symbols-outlined { font-size: 18px; }
+.compose-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #f1f5f9; padding-top: 20px; }.compose-cancel,.compose-submit { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 12px; padding: 0 18px; font-size: 12px; font-weight: 800; }.compose-cancel { background: #e5e7eb; color: #475569; }.compose-submit { margin-left: auto; background: #036e9f; color: white; box-shadow: 0 5px 12px rgba(3,105,161,.16); }.compose-submit:hover { background: #075985; }.compose-actions .material-symbols-outlined { font-size: 17px; }
+.compose-sidebar { display: flex; flex-direction: column; gap: 9px; }.compose-side-card { padding: 16px; }.compose-side-card > header { display: flex; align-items: center; gap: 7px; color: #334155; }.compose-side-card > header .material-symbols-outlined { color: #036e9f; font-size: 17px; }.compose-side-card > header strong { font-size: 12px; }.compose-side-card > header small { margin-left: auto; color: #94a3b8; font-size: 9px; }
+.compose-weather-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }.compose-weather-grid article { display: flex; flex-direction: column; gap: 3px; border-radius: 9px; background: #f1f3f5; padding: 11px; }.compose-weather-grid span { color: #475569; font-size: 10px; }.compose-weather-grid b { color: #0369a1; font-family: Inter,sans-serif; font-size: 18px; }.compose-weather-grid small { color: #64748b; font-size: 9px; }.compose-side-note { margin: 0; padding-inline: 5px; color: #94a3b8; font-size: 9px; }
+
+@media (max-width: 960px) { .compose-layout { grid-template-columns: 1fr; }.compose-sidebar { order: 2; }.compose-weather-grid { max-width: 540px; } }
+@media (max-width: 640px) { .compose-page { padding-block: 18px 34px; }.compose-heading { margin-bottom: 16px; }.compose-heading-icon { width: 42px; height: 42px; }.compose-heading h1 { font-size: 21px; }.compose-card { gap: 18px; padding: 20px 16px; }.compose-author-box,.compose-password { align-items: stretch; flex-direction: column; }.compose-password-field { width: 100%; }.compose-actions { align-items: stretch; flex-direction: column-reverse; }.compose-cancel,.compose-submit { width: 100%; margin: 0; }.compose-weather-grid { grid-template-columns: 1fr 1fr; } }
+
+/* Post detail and comments */
+.post-detail-page { min-height: calc(100vh - 142px); padding-block: 18px 48px; }
+.post-detail-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }.post-detail-toolbar a,.post-detail-toolbar button { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; border: 0; border-radius: 8px; background: white; padding: 0 11px; color: #64748b; font-size: 11px; font-weight: 700; box-shadow: 0 2px 7px rgba(15,23,42,.04); }.post-detail-toolbar .material-symbols-outlined { font-size: 16px; }
+.post-detail-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(270px,1fr); align-items: start; gap: 20px; }.post-detail-primary { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
+.post-detail-card,.post-comments-card,.detail-carpool-card { border: 1px solid #e2e8f0; border-radius: 14px; background: white; box-shadow: 0 4px 20px -2px rgba(14,165,233,.05),0 2px 6px -1px rgba(15,23,42,.03); }
+.post-detail-card { padding: 24px; }.post-detail-meta-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.post-detail-meta-top > span { border-radius: 5px; background: #f1f5f9; padding: 4px 7px; color: #64748b; font-size: 10px; font-weight: 750; }.post-detail-meta-top > div { display: flex; align-items: center; gap: 5px; color: #94a3b8; font-family: Inter,sans-serif; font-size: 10px; }.post-detail-meta-top .material-symbols-outlined { margin-left: 5px; font-size: 14px; }
+.post-detail-card > h1 { margin: 12px 0; color: #036e9f; font-size: clamp(22px,3vw,30px); font-weight: 850; letter-spacing: -.04em; line-height: 1.3; }.post-detail-author { display: flex; align-items: center; gap: 10px; border-radius: 10px; background: #f1f3f5; padding: 11px 12px; }.post-detail-author > .material-symbols-outlined { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #0284c7; color: white; font-size: 18px; }.post-detail-author > div:not(.post-detail-owner-actions) { display: flex; flex-direction: column; gap: 2px; }.post-detail-author strong { color: #475569; font-size: 11px; }.post-detail-author small { color: #94a3b8; font-size: 9px; }.post-detail-owner-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }.post-detail-owner-actions a,.post-detail-owner-actions button { border: 0; background: none; color: #64748b; font-size: 10px; font-weight: 750; }.post-detail-owner-actions button { color: #e11d48; }
+.post-detail-content { min-height: 220px; padding: 28px 2px; color: #334155; font-size: 14px; line-height: 1.8; }.post-detail-images { display: grid; gap: 12px; }.post-detail-images img { width: 100%; max-height: 720px; border-radius: 10px; object-fit: contain; }.post-detail-reactions { display: flex; flex-direction: column; align-items: center; gap: 9px; border-top: 1px solid #f1f5f9; padding-top: 20px; }.post-detail-reactions > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }.post-detail-reactions button { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; border: 0; border-radius: 10px; background: #f1f3f5; padding: 0 13px; color: #64748b; font-size: 11px; font-weight: 750; }.post-detail-reactions button.active { background: #0284c7; color: white; }.post-detail-reactions .material-symbols-outlined { font-size: 16px; }.post-detail-reactions p { margin: 0; }
+.post-comments-card { padding: 22px 24px; }.post-comments-card > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }.post-comments-card > header h2 { margin: 0; color: #036e9f; font-size: 15px; font-weight: 850; }.post-comments-card > header h2 span { display: inline-flex; min-width: 24px; height: 20px; align-items: center; justify-content: center; border-radius: 99px; background: #e0e7ff; color: #64748b; font-family: Inter,sans-serif; font-size: 10px; }
+.post-comment-compose { border-radius: 11px; background: #f1f3f5; padding: 13px; }.post-comment-identity { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }.post-comment-identity > span { display: inline-flex; height: 25px; align-items: center; gap: 4px; border-radius: 7px; background: white; padding: 0 8px; color: #036e9f; font-size: 10px; font-weight: 800; }.post-comment-identity .material-symbols-outlined { font-size: 14px; }.post-comment-identity input { width: 105px; height: 25px; border: 0; border-radius: 7px; outline: 0; padding: 0 8px; font-size: 10px; }.post-comment-textarea { width: 100%; min-height: 95px; resize: vertical; border: 0; border-radius: 9px; outline: 0; background: white; padding: 12px; color: #334155; font-size: 12px; }.post-comment-textarea:focus { box-shadow: 0 0 0 2px #0891b2; }.post-comment-submit-row { display: flex; justify-content: flex-end; margin-top: 9px; }.post-comment-submit-row button { display: inline-flex; min-height: 36px; align-items: center; gap: 5px; border: 0; border-radius: 8px; background: #0284c7; padding: 0 14px; color: white; font-size: 11px; font-weight: 800; }.post-comment-submit-row .material-symbols-outlined { font-size: 15px; }.post-comment-login-note { display: block; margin-top: 7px; color: #94a3b8; font-size: 10px; }.post-comment-list { display: grid; gap: 15px; margin-top: 20px; }.post-comments-more { display: grid; justify-items: center; gap: 6px; margin-top: 20px; }.post-comments-more-button { min-height: 38px; border: 0; border-radius: 9px; background: #f1f3f5; padding: 0 18px; color: #64748b; font-size: 11px; font-weight: 750; }
+.post-detail-sidebar { display: flex; flex-direction: column; gap: 6px; }.post-detail-sidebar > p { margin: 0; padding-inline: 5px; color: #94a3b8; font-size: 9px; }.detail-carpool-card { padding: 15px; }.detail-carpool-card > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; }.detail-carpool-card h2 { display: flex; align-items: center; gap: 5px; margin: 0; color: #036e9f; font-size: 12px; }.detail-carpool-card h2 .material-symbols-outlined { font-size: 16px; }.detail-carpool-card header small { color: #94a3b8; font-size: 9px; }.detail-carpool-card article { border-bottom: 1px solid #f1f5f9; padding-block: 12px; }.detail-carpool-card article:last-child { border-bottom: 0; padding-bottom: 2px; }.detail-carpool-card article div,.detail-carpool-card article p { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.detail-carpool-card article div b { border-radius: 4px; background: #475569; padding: 3px 6px; color: white; font-size: 8px; }.detail-carpool-card time { color: #94a3b8; font-size: 9px; }.detail-carpool-card article > strong { display: block; margin-top: 8px; color: #036e9f; font-size: 10px; }.detail-carpool-card article > strong span { color: #94a3b8; }.detail-carpool-card article p { margin: 6px 0 0; color: #94a3b8; font-size: 9px; }.detail-carpool-card article p b { color: #334155; }
+
+@media (max-width: 960px) { .post-detail-layout { grid-template-columns: 1fr; }.post-detail-sidebar { order: 2; } }
+@media (max-width: 640px) { .post-detail-page { padding-block: 12px 32px; }.post-detail-card,.post-comments-card { padding: 17px 14px; }.post-detail-card > h1 { font-size: 21px; }.post-detail-meta-top > div { gap: 3px; }.post-detail-content { min-height: 160px; padding-block: 22px; }.post-comment-compose { padding: 10px; } }
+
+/* Shared board list */
+.board-page { min-height: calc(100vh - 142px); padding-block: 20px 48px; }
+.board-identity { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #dbe3ed; border-radius: 12px; background: white; padding: 15px 17px; box-shadow: 0 2px 6px rgba(15,23,42,.035); }
+.board-identity-copy { display: flex; min-width: 0; align-items: center; gap: 12px; }.board-icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border: 1px solid #bae6fd; border-radius: 9px; background: #f0f9ff; color: #0284c7; font-size: 25px; }.board-title-line { display: flex; align-items: center; gap: 8px; }.board-title-line h1 { margin: 0; color: #0f172a; font-size: 19px; font-weight: 850; }.board-identity-copy p { margin: 3px 0 0; color: #94a3b8; font-size: 11px; }.anonymous-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; background: #1e293b; padding: 4px 8px; color: #7dd3fc; font-family: Inter,sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .02em; }.anonymous-badge i { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; }
+.board-write-button { display: inline-flex; height: 34px; flex: none; align-items: center; gap: 6px; border-radius: 7px; background: #0f2942; padding: 0 13px; color: white; font-size: 12px; font-weight: 800; }.board-write-button:hover { background: #0369a1; }.board-write-button .material-symbols-outlined { color: #7dd3fc; font-size: 16px; }
+.board-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(290px,1fr); align-items: start; gap: 20px; margin-top: 20px; }.board-primary,.board-sidebar { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
+.board-filter-panel { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #dbe3ed; border-radius: 12px; background: white; padding: 10px 12px; box-shadow: 0 2px 5px rgba(15,23,42,.025); }.board-category-tabs { display: flex; min-width: 0; gap: 5px; overflow-x: auto; scrollbar-width: none; }.board-category-tabs button { height: 32px; flex: none; border: 0; border-radius: 7px; background: transparent; padding: 0 12px; color: #475569; font-size: 12px; font-weight: 700; }.board-category-tabs button:hover { background: #f1f5f9; }.board-category-tabs button.active { background: #0f2942; color: white; }.board-sort { display: flex; flex: none; align-items: center; gap: 8px; }.board-sort button { border: 0; background: transparent; padding: 2px 0; color: #64748b; font-size: 11px; }.board-sort button.active { color: #1e293b; font-weight: 800; }.board-sort button:disabled { cursor: default; opacity: .48; }.board-sort i { width: 1px; height: 11px; background: #cbd5e1; }
+.board-notices { overflow: hidden; border: 1px solid #f6d57a; border-radius: 12px; background: rgba(255,251,235,.78); }.board-notices article { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #fef3c7; padding: 9px 15px; }.board-notices article:last-child { border-bottom: 0; }.board-notices article > div { display: flex; min-width: 0; align-items: center; gap: 8px; }.board-notices article > div span { flex: none; border-radius: 4px; background: #f59e0b; padding: 3px 6px; color: white; font-size: 10px; font-weight: 800; }.board-notices article strong { overflow: hidden; color: #334155; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.board-notices article p { display: flex; flex: none; gap: 12px; margin: 0; color: #94a3b8; font-size: 10px; }.board-notices article p b { color: #64748b; }
+.board-post-list { overflow: hidden; min-height: 200px; border: 1px solid #dbe3ed; border-radius: 12px; background: white; box-shadow: 0 2px 6px rgba(15,23,42,.03); }.board-post-row { display: grid; grid-template-columns: 45px minmax(0,1fr) 58px; min-height: 74px; align-items: center; gap: 12px; border-bottom: 1px solid #f1f5f9; padding: 10px 16px; }.board-post-row:last-child { border-bottom: 0; }.board-post-row:hover { background: #f8fafc; }.board-post-row.unavailable { opacity: .6; }.board-vote { display: flex; min-height: 43px; flex-direction: column; align-items: center; justify-content: center; border-radius: 9px; background: #f1f5f9; color: #64748b; }.board-vote.hot { border: 1px solid #bae6fd; background: #f0f9ff; color: #0284c7; }.board-vote .material-symbols-outlined { height: 12px; font-size: 20px; line-height: 15px; }.board-vote b { font-family: Inter,sans-serif; font-size: 12px; }.board-post-copy { min-width: 0; }.board-post-title { display: flex; min-width: 0; align-items: center; gap: 6px; }.board-post-title > span:first-child { flex: none; border-radius: 4px; background: #f1f5f9; padding: 2px 5px; color: #475569; font-size: 10px; font-weight: 650; }.board-post-title em { flex: none; border-radius: 3px; background: #fffbeb; padding: 2px 4px; color: #d97706; font-size: 9px; font-style: normal; font-weight: 800; }.board-post-title strong { overflow: hidden; color: #1e293b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.board-post-title > b { flex: none; color: #0284c7; font-size: 12px; }.board-post-title .image-mark { flex: none; background: none; padding: 0; color: #94a3b8; font-size: 14px; }.board-post-copy p { display: flex; gap: 8px; margin: 6px 0 0; color: #94a3b8; font-size: 10px; }.board-post-copy p b { color: #64748b; font-weight: 600; }.board-post-row > img { width: 58px; height: 52px; border: 1px solid #e2e8f0; border-radius: 8px; object-fit: cover; }
+.board-state { display: flex; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #64748b; }.board-state .material-symbols-outlined { color: #38bdf8; font-size: 30px; }.board-state strong { font-size: 13px; }.board-state a,.board-state button { border: 0; border-radius: 6px; background: #0f2942; padding: 7px 11px; color: white; font-size: 11px; }.board-state.error .material-symbols-outlined { color: #e11d48; }.spin { animation: board-spin .8s linear infinite; }@keyframes board-spin { to { transform: rotate(360deg); } }
+.board-navigation { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 2px; }.board-pagination { display: flex; align-items: center; gap: 5px; }.board-pagination button { display: grid; min-width: 32px; height: 32px; place-items: center; border: 1px solid #dbe3ed; border-radius: 5px; background: white; color: #64748b; font-size: 11px; }.board-pagination button.current { border-color: #0f2942; background: #0f2942; color: white; font-weight: 800; }.board-pagination button:disabled { opacity: .4; }.board-pagination .material-symbols-outlined { font-size: 16px; }.board-search { display: flex; align-items: center; gap: 6px; }.board-search select,.board-search input { height: 32px; border: 1px solid #dbe3ed; border-radius: 5px; background: white; padding: 0 9px; color: #475569; font-size: 11px; outline: 0; }.board-search input { width: 175px; }.board-search select:focus,.board-search input:focus { border-color: #0284c7; }.board-search button { height: 32px; border: 0; border-radius: 5px; background: #1e293b; padding: 0 12px; color: white; font-size: 11px; font-weight: 750; }
+.board-widget { border: 1px solid #dbe3ed; border-radius: 12px; background: white; padding: 14px; box-shadow: 0 2px 6px rgba(15,23,42,.03); }.board-widget > header { display: flex; min-height: 29px; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid #f1f5f9; }.board-widget > header h2 { display: flex; align-items: center; gap: 5px; margin: 0; color: #1e293b; font-size: 11px; font-weight: 800; }.board-widget > header h2 .material-symbols-outlined { color: #ef4444; font-size: 16px; }.board-widget > header small,.board-widget > header > a { color: #94a3b8; font-size: 10px; }.topic-widget ol { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }.topic-widget li { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 5px; }.topic-widget li > b { color: #64748b; font-family: Inter,sans-serif; font-size: 11px; text-align: center; }.topic-widget li:nth-child(-n+2) > b { color: #0284c7; }.topic-widget li a { overflow: hidden; color: #475569; font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }.topic-widget li a:hover { color: #0284c7; }.topic-widget li span { border-radius: 3px; background: #f0f9ff; padding: 1px 4px; color: #0284c7; font-family: Inter,sans-serif; font-size: 9px; font-weight: 800; }
+.board-carpool header h2 em { border-radius: 3px; background: #0284c7; padding: 2px 5px; color: white; font-size: 9px; font-style: normal; }.board-carpool article { margin-top: 10px; border: 1px solid #f1f5f9; border-radius: 8px; background: #f8fafc; padding: 10px; }.board-carpool article > div,.board-carpool article p { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.board-carpool article > div strong { color: #334155; font-size: 11px; }.board-carpool article > div strong span { color: #94a3b8; }.board-carpool article > div strong em { color: #0369a1; font-style: normal; }.board-carpool article > div > b { border-radius: 3px; background: #fff1f2; padding: 2px 5px; color: #e11d48; font-size: 9px; }.board-carpool article p { margin: 7px 0 0; color: #64748b; font-size: 10px; }.board-carpool article p strong { color: #475569; }
+
+@media (max-width: 960px) {
+  .board-layout { grid-template-columns: 1fr; }.board-sidebar { display: grid; grid-template-columns: 1fr 1fr; }.board-filter-panel { align-items: flex-start; flex-direction: column; }.board-sort { align-self: flex-end; }
+}
+@media (max-width: 640px) {
+  .board-page { padding-block: 12px 32px; }.board-identity { align-items: flex-start; padding: 13px; }.board-identity-copy { align-items: flex-start; }.board-icon { width: 38px; height: 38px; }.board-title-line { flex-wrap: wrap; }.board-title-line h1 { font-size: 17px; }.board-identity-copy p { display: none; }.board-write-button { width: 36px; overflow: hidden; padding: 0 10px; color: transparent; gap: 0; }.board-write-button .material-symbols-outlined { color: white; }
+  .board-layout { margin-top: 12px; gap: 12px; }.board-primary { gap: 12px; }.board-filter-panel { padding: 8px; }.board-category-tabs { width: 100%; }.board-sort { align-self: flex-start; padding-left: 5px; }.board-notices article { padding-inline: 10px; }.board-notices article p time,.board-notices article p span { display: none; }.board-post-row { grid-template-columns: 40px minmax(0,1fr); gap: 8px; padding: 10px; }.board-post-row > img { display: none; }.board-post-copy p span:last-child { display: none; }.board-post-title strong { font-size: 12px; }.board-navigation { align-items: stretch; flex-direction: column; }.board-pagination { justify-content: center; }.board-search { width: 100%; }.board-search input { min-width: 0; flex: 1; }.board-sidebar { grid-template-columns: 1fr; }
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 36c9566..65c37d9 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -18,9 +18,14 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400..800;1,400..800&family=JetBrains+Mono:wght@400;500;700&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
           rel="stylesheet"
         />
+        <link
+          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
+          rel="stylesheet"
+          crossOrigin="anonymous"
+        />
         <link
           href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
           rel="stylesheet"
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
index ab7967d..3fd8c1c 100644
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { Footer, TopNav } from "../components/SiteChrome";
-import { csrfFetch } from "../lib/csrfFetch";
 import { API_ENDPOINTS } from "../lib/api";
+import { csrfFetch } from "../lib/csrfFetch";
 
 const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
 
@@ -26,20 +26,20 @@ export default function LoginPage() {
     setErrorMsg("");
 
     if (!EMAIL_REGEX.test(email)) {
-      setErrorMsg("올바른 이메일 형식으로 입력해주세요. 예: user@snowthing.com");
+      setErrorMsg("올바른 이메일 형식으로 입력해 주세요. 예: user@snowthing.com");
       return;
     }
 
     setLoading(true);
     try {
-      const res = await csrfFetch(API_ENDPOINTS.auth.login, {
+      const response = await csrfFetch(API_ENDPOINTS.auth.login, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ email, password, rememberMe }),
       });
 
-      if (!res.ok) {
-        const errorData = await res.json();
+      if (!response.ok) {
+        const errorData = await response.json();
         throw new Error(errorData.message || errorData.error || "이메일 또는 비밀번호가 올바르지 않습니다.");
       }
 
@@ -52,49 +52,35 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[var(--snow-background)]">
+    <div className="community-page">
       <TopNav active="login" />
-      <main className="snow-container flex min-h-[calc(100vh-129px)] items-center justify-center px-5 py-12">
-        <section className="snow-card w-full max-w-md bg-white p-7 md:p-8">
-          <div className="mb-7 text-center">
-            <span className="snow-chip snow-chip-dark mb-4">Snowthing Login</span>
-            <h1 className="text-3xl font-extrabold italic text-black">로그인</h1>
-            <p className="mt-3 text-sm leading-6 text-[var(--snow-muted)]">스노보더 커뮤니티에 다시 접속합니다.</p>
+      <main className="community-container flex min-h-[calc(100vh-160px)] items-center py-10 md:py-16">
+        <section className="grid w-full overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_18px_50px_rgba(15,41,66,0.08)] lg:grid-cols-[1.05fr_0.95fr]">
+          <div className="relative hidden min-h-[560px] overflow-hidden bg-[#0b1e32] p-10 text-white lg:flex lg:flex-col lg:justify-between">
+            <div className="absolute -right-24 -top-24 h-72 w-72 rounded-full border-[34px] border-[#1e4668] opacity-70" />
+            <div className="absolute -bottom-32 -left-24 h-80 w-80 rounded-full border-[44px] border-[#123b5c] opacity-80" />
+            <div className="relative z-10">
+              <span className="mb-8 inline-flex items-center gap-2 rounded-full border border-sky-300/30 bg-sky-200/10 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.16em] text-sky-200">SnowThing Community</span>
+              <h1 className="max-w-md text-5xl font-black leading-[1.05] tracking-[-0.06em]">다시 슬로프에<br />오를 준비를 해요.</h1>
+              <p className="mt-6 max-w-sm text-sm leading-7 text-slate-300">리조트 정보부터 장비 세팅, 라이딩 동행까지<br />겨울을 기다리는 사람들의 이야기를 만나보세요.</p>
+            </div>
+            <div className="relative z-10 flex items-end justify-between gap-6 text-xs text-slate-400"><span>RIDE MORE · WAIT LESS</span><span className="text-sky-200">01 / 24</span></div>
           </div>
 
-          {errorMsg && (
-            <div className="mb-5 rounded border border-[#fecaca] bg-[#fef2f2] p-4 text-sm font-semibold text-[#dc2626]">
-              {errorMsg}
+          <div className="flex items-center justify-center p-6 sm:p-10 lg:p-14">
+            <div className="w-full max-w-[390px]">
+              <div className="mb-9"><p className="mb-3 text-xs font-bold uppercase tracking-[0.18em] text-sky-600">Welcome back</p><h2 className="text-3xl font-black tracking-[-0.06em] text-[#0b1e32]">로그인</h2><p className="mt-3 text-sm leading-6 text-slate-500">SnowThing에서 라이딩 이야기를 계속 이어가세요.</p></div>
+              {errorMsg && <div className="mb-5 rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold leading-6 text-rose-700" role="alert">{errorMsg}</div>}
+              <form onSubmit={handleSubmit} className="grid gap-5">
+                <label className="grid gap-2"><span className="text-xs font-bold text-slate-600">이메일</span><input type="email" value={email} onChange={(event) => setEmail(event.target.value)} placeholder="user@snowthing.com" className="h-12 rounded-lg border border-slate-200 bg-slate-50 px-4 text-sm text-slate-800 outline-none transition placeholder:text-slate-400 focus:border-sky-500 focus:bg-white focus:ring-4 focus:ring-sky-100" autoComplete="email" required /></label>
+                <label className="grid gap-2"><span className="text-xs font-bold text-slate-600">비밀번호</span><input type="password" value={password} onChange={(event) => setPassword(event.target.value)} placeholder="비밀번호를 입력하세요" className="h-12 rounded-lg border border-slate-200 bg-slate-50 px-4 text-sm text-slate-800 outline-none transition placeholder:text-slate-400 focus:border-sky-500 focus:bg-white focus:ring-4 focus:ring-sky-100" autoComplete="current-password" required /></label>
+                <label className="flex cursor-pointer items-center gap-2 text-sm text-slate-500"><input type="checkbox" checked={rememberMe} onChange={(event) => setRememberMe(event.target.checked)} className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500" />로그인 상태 유지</label>
+                <button type="submit" className="mt-1 flex h-12 items-center justify-center rounded-lg bg-[#0b1e32] px-5 text-sm font-bold text-white transition hover:bg-sky-700 disabled:cursor-not-allowed disabled:opacity-50" disabled={loading}>{loading ? "로그인 중..." : "로그인"}</button>
+              </form>
+              <div className="my-8 flex items-center gap-3 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-300"><span className="h-px flex-1 bg-slate-200" />SnowThing<span className="h-px flex-1 bg-slate-200" /></div>
+              <p className="text-center text-sm text-slate-500">아직 계정이 없나요? <Link href="/signup" className="font-bold text-sky-700 underline decoration-sky-300 underline-offset-4 hover:text-sky-900">회원가입</Link></p>
             </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="grid gap-5">
-            <label className="grid gap-2">
-              <span className="snow-label">Email</span>
-              <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} placeholder="user@snowthing.com" className="snow-input" required />
-            </label>
-
-            <label className="grid gap-2">
-              <span className="snow-label">Password</span>
-              <input type="password" value={password} onChange={(event) => setPassword(event.target.value)} placeholder="비밀번호" className="snow-input" required />
-            </label>
-
-            <label className="flex items-center gap-2 text-sm text-[var(--snow-muted)]">
-              <input type="checkbox" checked={rememberMe} onChange={(event) => setRememberMe(event.target.checked)} />
-              로그인 상태 유지
-            </label>
-
-            <button type="submit" className="snow-btn-primary w-full" disabled={loading}>
-              {loading ? "로그인 중" : "로그인"}
-            </button>
-          </form>
-
-          <p className="mt-6 text-center text-sm text-[var(--snow-muted)]">
-            아직 계정이 없나요?{" "}
-            <Link href="/signup" className="font-bold text-black underline">
-              회원가입
-            </Link>
-          </p>
+          </div>
         </section>
       </main>
       <Footer />
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 94b77bf..f79443a 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,171 +1,131 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Link from "next/link";
-import { Footer, SideCategories, TopNav } from "./components/SiteChrome";
-import { API_ENDPOINTS } from "./lib/api";
+import { useRef, useState } from "react";
+import { Footer, TopNav } from "./components/SiteChrome";
 
-interface MemberProfile {
-  publicId: string;
-  email: string;
-  nickname: string;
-  role: string;
-}
+const HERO_IMAGES = [
+  "https://lh3.googleusercontent.com/aida/AEtjO1UbsQy3vUnB80P1wDDnbGosvZS9vqvYFfKYsbt-ATgRpqmc2zAPzC52mv7kE-dFt3s-FEwC34VCTJRYlYi_Rv20X4gbV1Ot4EXHI4_0yNB7xgvC-4jj_0S5zRoyhDgx6tmmOf3WlnzXxe1_njPrVcsEQvpsjpP-uLoumLkQrGk_Sl87eNShpSVr4YpqH1lzrGDTFYJBa1ek0ZngAq1VNj9Hp9K8uVOjTkHDEFp6cfh7IlqT2pMxpgODiMr9",
+  "https://lh3.googleusercontent.com/aida/AEtjO1Vcno6No205vArthV-VYm_1xWKA9tsOEYUO3gVlGWnI5gZTow2ELVmgfr8pg185_aUMpvVZ8e4z4F1PbMyRxb3M7hGNaZtOc5set_3eOhXq7bWRfEt2wrA2p8NYhZJHoVinT-4qax2j-zrOhbTWQ0yXmg6rzznW_92J_zQJ-rcSAncKtYkzAsWdayvEpFAYDbpp_Q2WsQeagnmchLIQKsY5uzWyAbfa4iaRW8TVldr_G1j_UNfHRcspz22v",
+];
 
-const trendingCards = [
-  {
-    label: "Gear Review",
-    title: "24/25 시즌 바인딩 세팅 팁",
-    image: "https://images.unsplash.com/photo-1551524164-687a55dd1126?w=900&auto=format&fit=crop&q=80",
-  },
-  {
-    label: "Discussion",
-    title: "라이딩 자세가 무너질 때 체크할 것들",
-    image: "https://images.unsplash.com/photo-1605540436563-5bca919ae766?w=900&auto=format&fit=crop&q=80",
-  },
-  {
-    label: "Resort",
-    title: "주말 강원권 리조트 혼잡도 공유",
-    image: "https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=900&auto=format&fit=crop&q=80",
-  },
-  {
-    label: "Question",
-    title: "첫 데크를 고를 때 플렉스 기준",
-    image: "https://images.unsplash.com/photo-1518602164578-cd0074062767?w=900&auto=format&fit=crop&q=80",
-  },
+const resorts = [
+  { name: "휘닉스 평창", status: "정상운영", temp: "-4.5°C", open: "12 / 18면", detail: "야간 8", snow: "+4cm (압설 양호)", crowd: "쾌적 (대기 3분)", slopes: "펭귄/챔피언 슬로프", tone: "good" },
+  { name: "비발디파크", status: "정상운영", temp: "-2.1°C", open: "9 / 12면", detail: "새벽운영", snow: "강설 (하단 아이스 약간)", crowd: "보통 (초급 혼잡)", slopes: "발라드/테크노", tone: "warn" },
+  { name: "하이원 리조트", status: "전면개방", temp: "-6.8°C", open: "18 / 18면", detail: "전코스", snow: "+6cm (극상 파우더)", crowd: "쾌적 (대기 없음)", slopes: "마운틴탑/아테나", tone: "good" },
+  { name: "모나 용평", status: "정상운영", temp: "-5.2°C", open: "22 / 28면", detail: "", snow: "강설 하드팩 (엣징 양호)", crowd: "쾌적 (레인보우 여유)", slopes: "레드/골드/레인보우", tone: "good" },
+  { name: "웰리힐리파크", status: "정상운영", temp: "-5.0°C", open: "14 / 19면", detail: "", snow: "압설 (C3 모글밭 주의)", crowd: "쾌적 (대기 2분)", slopes: "에코/챌린지", tone: "good" },
+  { name: "지산 포레스트", status: "야간운영", temp: "-1.5°C", open: "6 / 7면", detail: "", snow: "인공설 압설 (슬러시 약간)", crowd: "혼잡 (대기 10분)", slopes: "1/2/3번 슬로프", tone: "busy" },
 ];
 
-const topPosts = [
-  ["FREE", "웰리힐리 야간 타보신 분 있나요?", 45],
-  ["GEAR", "부츠 열성형 전후 차이가 큰가요?", 32],
-  ["QNA", "초보가 전향각 바로 가도 될까요?", 28],
-  ["FOOD", "용평 근처 아침 식사 추천", 19],
-  ["RESORT", "하이원 리프트 대기 공유", 15],
+const posts = [
+  { vote: 88, category: "휘팍", title: "오늘 챔피언 실시간 설질 뜸 (감자 없음, 찹쌀떡 파우더)", comments: 42, author: "파우더헌터_민우", time: "18분 전", views: "1,840", hot: true, image: HERO_IMAGES[1] },
+  { vote: 54, category: "장비/리뷰", title: "2425 살로몬 하이랜드 바인딩 세팅값 +21/-6 후기", comments: 31, author: "카빙마스터99", time: "42분 전", views: "1,209", image: HERO_IMAGES[0] },
+  { vote: 37, category: "팁/강좌", title: "야간 하이원 아폴로 렌즈 클리어 vs 옐로우 실착 비교", comments: 19, author: "설원산책러", time: "1시간 전", views: "892", image: HERO_IMAGES[1] },
+  { vote: 112, category: "안전주의", title: "웰팍 C3 슬로프 모글밭 됐네요 안전 라이딩 하세요", comments: 65, author: "둔내패트롤조언자", time: "2시간 전", views: "3,410", hot: true },
+  { vote: 18, category: "묻고답하기", title: "오가사카 FC-S 160 vs 에이펙스 티탄날 고민입니다", comments: 24, author: "해머초보7년차", time: "3시간 전", views: "740" },
+  { vote: 22, category: "자유게시판", title: "초보자 엉덩이 보호대 플렉시 지폼 vs 파워텍터 추천", comments: 16, author: "안전라이더Kim", time: "3시간 전", views: "980" },
+  { vote: 41, category: "자유게시판", title: "주말 강원도권 고속도로 제설 상황 및 미시령 터널 소통 원활합니다", comments: 13, author: "용평지박령", time: "4시간 전", views: "1,120" },
 ];
 
-export default function HomePage() {
-  const [profile, setProfile] = useState<MemberProfile | null>(null);
+const anonymousPosts = [
+  { author: "익명보더", vote: 45, title: "솔직히 주말에 셔틀버스 안에서 냄새나는 장비 방치 좀 하지 맙시다", body: "젖은 부츠랑 땀 찬 장갑 통로 바닥에 굴러다니는데 매너 좀 지키세요." },
+  { author: "시즌방총무", vote: 92, title: "시즌방 3년 차가 털어놓는 시즌방 빌런 유형 TOP 5", body: "1위: 장보기 비용 정산 담당 가족 셀프 리포트부터 시작합니다." },
+  { author: "익명라이더", vote: 28, title: "곤돌라 같이 타고 올라가다가 데크 그래픽으로 말 튼 번호 땄다", body: "서로 같은 라인 타는 거 보고 정상 휴게소에서 커피 한잔하자고 함." },
+];
+
+const carpools = [
+  { from: "서울 사당", to: "하이원", date: "12/28(토) 05:00 출발", price: "기름/톨비 N빵", seat: "2석 남음", note: "루프박스 데크 4장 적재 가능 · 비흡연" },
+  { from: "경기 분당(서현)", to: "휘닉스파크", date: "12/28(토) 18:00 야간", price: "편도 1.5만원", seat: "1석 남음", note: "SUV 4륜 운행 · 장비 실어드립니다" },
+];
 
-  useEffect(() => {
-    const timer = window.setTimeout(() => {
-      void (async () => {
-        try {
-          const res = await fetch(API_ENDPOINTS.members.me, {
-            credentials: "include",
-          });
-          if (res.ok) {
-            const data: MemberProfile = await res.json();
-            setProfile(data);
-          }
-        } catch {
-          setProfile(null);
-        }
-      })();
-    }, 0);
+const gearItems = [
+  { title: "버튼 스텝온 포토 270", price: "220,000원", note: "휘팍 직거래 가능", image: "https://lh3.googleusercontent.com/aida-public/AB6AXuBWec9rQzVJ3kYEXI-fsoR63FF7wuSFgqNUS8T0VmDNiZ8-QjTufr_5psAgEV_2uHBFUeRwSn6wvt-RapWGnaW3xcep_v7VAT0xpFiwRV1Jjof4wgDQBk2cO1e_5qbwpISaipedws-0etM9Ve3aDtjwvEJLve_GiH_maY3rfjkyLqNO3GH2hmLV5yYpFoHsZMdZYl2AYZl0XizOc_0oluIr5SIoX34Rg0BUruWSAPc_itY7_kEvwhJwYw" },
+  { title: "스미스 4D MAG 고글", price: "180,000원", note: "렌즈 2종 · 상태 S급", image: "https://lh3.googleusercontent.com/aida-public/AB6AXuDRFUeNNwG_jiLzZL8yhifJtFTGjEduHPIXrXgOtSXheWa1zJRqPTOsMmqSwMN5SwLCE9ObUY4CIcE8ZeodhrmbwAzIK2WBoxo7RZIcI2lqj-GeL2msYYbGTBv4R0skSaz9TL0ZippD8Aw4j_aOdVYd4ppFqmQe258KGppZR0DGxvTSNS0wrnh_-Yoc0t15VRs36PZCydGyPl56-ky_C8vjPtH39jzaKEQYDMiSBD3pBMMadCkT48BxSQ" },
+];
 
-    return () => window.clearTimeout(timer);
-  }, []);
+export default function HomePage() {
+  const [hero, setHero] = useState(0);
+  const resortRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="min-h-screen bg-[var(--snow-background)] text-[var(--snow-ink)]">
+    <div className="community-page">
       <TopNav active="home" />
-      <div className="border-b border-[var(--snow-border)] bg-[var(--snow-surface-mid)] py-2">
-        <div className="snow-container overflow-hidden px-5 lg:px-8">
-          <p className="whitespace-nowrap font-mono text-xs uppercase tracking-[0.16em] text-[var(--snow-ink-soft)]">
-            Yongpyong: -5°C, fresh powder <span className="mx-5 text-[var(--snow-faint)]">|</span>
-            High1: -3°C, clear <span className="mx-5 text-[var(--snow-faint)]">|</span>
-            Welli Hilli: -4°C, snowing <span className="mx-5 text-[var(--snow-faint)]">|</span>
-            Phoenix: -2°C, overcast
-          </p>
-        </div>
-      </div>
+      <main className="community-container home-main">
+        <section className="hero-banner" aria-label="시즌 이벤트 프로모션">
+          <img src={HERO_IMAGES[hero]} alt="파우더 슬로프를 라이딩하는 스노보더" />
+          <div className="hero-shade" />
+          <div className="hero-copy">
+            <div className="hero-eyebrow"><span>SEASON EVENT</span><b>24/25 얼리버드 기획전</b></div>
+            <h1>첫 파우더를 가르는 설렘,<br /><em>최대 45% 시즌 오픈</em> 스페셜 할인</h1>
+            <p>살로몬, 버튼, 오가사카 프리미엄 데크부터 고어텍스 아우터웨어까지. 오직 스노우띵 회원만을 위한 특가 혜택을 놓치지 마세요.</p>
+            <div className="hero-actions"><button type="button">기획전 바로가기 <span>›</span></button><button type="button" className="ghost">쿠폰팩 받기</button></div>
+          </div>
+          <button type="button" className="hero-arrow prev" aria-label="이전 배너" onClick={() => setHero((hero + HERO_IMAGES.length - 1) % HERO_IMAGES.length)}>‹</button>
+          <button type="button" className="hero-arrow next" aria-label="다음 배너" onClick={() => setHero((hero + 1) % HERO_IMAGES.length)}>›</button>
+          <span className="hero-count"><b>{hero + 1}</b> / {HERO_IMAGES.length}</span>
+        </section>
 
-      <div className="snow-container snow-grid-shell bg-[var(--snow-background)]">
-        <SideCategories active="all" />
-        <main className="px-5 py-8 lg:px-8 lg:py-10">
-          <section className="snow-card relative min-h-[330px] overflow-hidden p-8 md:p-10">
-            <img
-              src="https://images.unsplash.com/photo-1482867996988-29ec3a0f1acd?w=1600&auto=format&fit=crop&q=80"
-              alt="눈 덮인 산맥"
-              className="absolute inset-0 h-full w-full object-cover opacity-20 grayscale"
-            />
-            <div className="relative z-10 flex min-h-[260px] flex-col justify-end gap-8 md:flex-row md:items-end md:justify-between">
-              <div className="max-w-3xl">
-                <span className="snow-chip snow-chip-dark mb-6">Community Board</span>
-                <h1 className="snow-heading-xl">SHRED-TALK</h1>
-                <p className="mt-5 max-w-2xl text-lg leading-8 text-[var(--snow-ink-soft)]">
-                  장비 이야기, 리조트 상황, 익명 고민, 라이딩 질문을 한곳에서 나누는 스노보더 커뮤니티입니다.
-                </p>
-              </div>
-              <Link href="/posts/create" className="snow-btn-primary shrink-0">
-                <span className="material-symbols-outlined text-[17px]">add_box</span>
-                Create Post
-              </Link>
-            </div>
-          </section>
+        <section className="panel resort-panel">
+          <div className="panel-heading">
+            <h2><span className="status-pulse" />전국 주요 스키장 실시간 슬로프 &amp; 설질 현황 <small>(10분 주기 갱신)</small></h2>
+            <div><Link href="/resort">캠 전체보기 ›</Link><button onClick={() => resortRef.current?.scrollBy({ left: -280, behavior: "smooth" })}>‹</button><button onClick={() => resortRef.current?.scrollBy({ left: 280, behavior: "smooth" })}>›</button></div>
+          </div>
+          <div className="resort-scroller" ref={resortRef}>
+            {resorts.map((resort) => (
+              <article className="resort-card" key={resort.name}>
+                <header><strong>{resort.name}</strong><span className={`operation ${resort.tone}`}>{resort.status}</span><b>{resort.temp}</b></header>
+                <dl><div><dt>슬로프 오픈</dt><dd>{resort.open} <em>{resort.detail && `(${resort.detail})`}</em></dd></div><div><dt>신설 / 설질</dt><dd>{resort.snow}</dd></div><div><dt>리프트 혼잡도</dt><dd><span className={`crowd ${resort.tone}`}>{resort.crowd}</span></dd></div></dl>
+                <footer><span>{resort.slopes}</span><Link href="/resort">웹캠 보기 ›</Link></footer>
+              </article>
+            ))}
+          </div>
+        </section>
 
-          <section className="mt-10 grid gap-8 xl:grid-cols-[minmax(0,1fr)_280px]">
-            <div>
-              <div className="mb-6 flex items-end justify-between border-b-2 border-black pb-3">
-                <h2 className="flex items-center gap-2 text-2xl font-extrabold text-black">
-                  <span className="material-symbols-outlined text-[22px] text-[var(--snow-error)]">local_fire_department</span>
-                  Trending Topics
-                </h2>
-                <Link href="/posts" className="snow-label text-black">
-                  View all
-                </Link>
-              </div>
-              <div className="grid gap-4 md:grid-cols-2">
-                {trendingCards.map((card) => (
-                  <Link key={card.title} href="/posts" className="snow-card snow-card-hover group relative min-h-[210px] overflow-hidden p-5">
-                    <img src={card.image} alt="" className="absolute inset-0 h-full w-full object-cover opacity-[0.22] grayscale transition group-hover:opacity-[0.32]" />
-                    <div className="relative z-10 flex h-full min-h-[170px] flex-col justify-between">
-                      <span className="snow-chip bg-white">{card.label}</span>
-                      <h3 className="max-w-[85%] text-2xl font-extrabold leading-tight text-black">{card.title}</h3>
-                    </div>
+        <div className="home-content-grid">
+          <section className="home-feed">
+            <div className="panel post-board">
+              <div className="board-tabs"><div><button className="active">전체글</button><button>실시간 베스트</button><button>자유게시판</button><button>장비·왁싱</button><button>슬로프 갤러리</button><button>묻고답하기</button></div><select aria-label="게시글 정렬"><option>최신순</option><option>추천순</option><option>댓글순</option></select></div>
+              <div className="compact-post-list">
+                {posts.map((post) => (
+                  <Link href="/posts" className={post.category === "안전주의" ? "compact-post warning" : "compact-post"} key={post.title}>
+                    <span className={post.hot ? "vote hot" : "vote"}>▲ {post.vote}</span>
+                    <div className="post-summary"><div><b className={post.category === "안전주의" ? "category danger" : "category"}>[{post.category}]</b><strong>{post.title}</strong><em>[{post.comments}]</em>{post.image && <small>사진</small>}</div><p><b>{post.author}</b><span>·</span><span>{post.time}</span><span>·</span><span>조회 {post.views}</span></p></div>
+                    {post.image && <img src={post.image} alt="" />}
                   </Link>
                 ))}
               </div>
+              <div className="board-footer"><div className="pagination"><button className="current">1</button><button>2</button><button>3</button><button>4</button><button>5</button><span>…</span><button>다음 ›</button></div><form onSubmit={(event) => event.preventDefault()}><input placeholder="게시판 내 검색"/><button>검색</button></form></div>
             </div>
 
-            <aside className="space-y-6">
-              <div className="snow-card p-6">
-                <h3 className="text-2xl font-extrabold italic text-black">Quick Actions</h3>
-                <div className="mt-5 grid gap-3">
-                  <Link href="/posts" className="snow-btn-primary w-full">
-                    게시판 보기
-                  </Link>
-                  {profile ? (
-                    <Link href="/profile" className="snow-btn-secondary w-full">
-                      {profile.nickname} 프로필
-                    </Link>
-                  ) : (
-                    <Link href="/signup" className="snow-btn-secondary w-full">
-                      회원가입
-                    </Link>
-                  )}
-                </div>
-              </div>
-
-              <div className="snow-card p-6">
-                <div className="mb-4 flex items-center justify-between">
-                  <h3 className="text-2xl font-extrabold text-black">Top Posts</h3>
-                  <span className="snow-label">Real-time</span>
-                </div>
-                <div className="divide-y divide-[var(--snow-border)]">
-                  {topPosts.map(([category, title, count]) => (
-                    <Link key={title} href="/posts" className="grid grid-cols-[56px_minmax(0,1fr)_42px] gap-3 py-3 text-sm">
-                      <span className="snow-label">{category}</span>
-                      <span className="truncate font-semibold text-black">{title}</span>
-                      <span className="font-mono text-xs text-[var(--snow-error)]">[{count}]</span>
-                    </Link>
-                  ))}
-                </div>
+            <section className="panel technique-panel">
+              <div className="mini-heading"><h2><i />장비 관리 &amp; 왁싱 핫클립</h2><Link href="/posts?category=QNA">더보기 ›</Link></div>
+              <div className="technique-grid">
+                <Link href="/posts"><img src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbp7QUQV_wwAbh0m-xJVicOCADfBGbw42xSkNMgZvcsBs5Unb35kdxi5fefIb-tXBvBMUl6rncUTNmIYxNg-81L6a_EQpSVrRR6cgS18D6sKJG7DetKGDCG14GXTKugzgnj3yCuIK9wfW0wmA5zCB8tsnMmeC0WJn1q0-dMH1EVa344m4jnhuPEXknzEtKdfuVmETtjLCc3EWh3PhfyXKLnQavY-ytAeHb0I4x8BzOJPAWAw9oAD7nKw" alt="스노보드 정비"/><div><strong>영하 10도 이하 극저온 핫왁싱 블렌딩 및 스크래핑 정석</strong><span>추천 76 · 댓글 28</span></div></Link>
+                <Link href="/posts"><img src="https://lh3.googleusercontent.com/aida-public/AB6AXuCGv-BInEpAeyLpvevZNGu1lq_lcRmTxFguVxcRASFgYmnv_oLNeZCjBRGEgYb22037ZT8d2lXjKhMK1Mlr8d8rcgG_5kCbDXQpG2uJNWgyoVor5Aww4XTiXgu4XJjEYIIq-kNaHNAVhxf6frb8EOxL07nX8Jn5hD6QG6m3o2lPtHHottuKmDARxbHW9jvda6R4sMRQDZHQ8Y0PgkA_5ffFwJowOx8X_ahk0fxsVj61cfGO3PNwZjyTqg" alt="스노보드 엣지"/><div><strong>사이드 88도 베이스 1도 엣지 홈 다이아몬드 스톤 피니싱 후기</strong><span>추천 49 · 댓글 15</span></div></Link>
               </div>
-            </aside>
+            </section>
           </section>
-        </main>
-      </div>
+
+          <aside className="home-sidebar">
+            <section className="panel anonymous-widget">
+              <div className="mini-heading"><h2><span>HOT</span>익명게시판</h2><Link href="/posts?category=ANONYMOUS">전체보기 ›</Link></div>
+              <div>{anonymousPosts.map((post) => <Link href="/posts?category=ANONYMOUS" key={post.title}><p><b>{post.author}</b><em>추천 {post.vote}</em></p><strong>{post.title}</strong><span>{post.body}</span></Link>)}</div>
+              <form onSubmit={(event) => event.preventDefault()}><input placeholder="익명으로 글 남기기..."/><button>등록</button></form>
+            </section>
+
+            <section className="panel carpool-widget" id="carpool">
+              <div className="mini-heading"><h2><span className="blue">실시간</span>급구! 카풀 &amp; 동행</h2><Link href="#carpool">+ 등록</Link></div>
+              <div>{carpools.map((item) => <article key={item.from}><header><strong>{item.from} <i>→</i> <em>{item.to}</em></strong><span>{item.seat}</span></header><p><b>{item.date}</b><strong>{item.price}</strong></p><footer><span>{item.note}</span><a href="#carpool">신청 ›</a></footer></article>)}</div>
+            </section>
+
+            <section className="panel market-widget" id="market">
+              <div className="mini-heading"><h2>중고장터 실시간 매물</h2><Link href="#market">장터 바로가기 ›</Link></div>
+              <div className="market-grid">{gearItems.map((item) => <a href="#market" key={item.title}><div><img src={item.image} alt={item.title}/><span>판매중</span></div><strong>{item.title}</strong><b>{item.price}</b><small>{item.note}</small></a>)}</div>
+            </section>
+          </aside>
+        </div>
+      </main>
       <Footer />
     </div>
   );
diff --git a/frontend/app/posts/[publicId]/page.tsx b/frontend/app/posts/[publicId]/page.tsx
index 7fd1194..d02847b 100644
--- a/frontend/app/posts/[publicId]/page.tsx
+++ b/frontend/app/posts/[publicId]/page.tsx
@@ -340,6 +340,15 @@ export default function PostDetailPage({ params }: { params: Promise<{ publicId:
     }
   };
 
+  const handleShare = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      setReactionMsg("게시글 주소를 복사했습니다.");
+    } catch {
+      setReactionMsg("주소를 복사하지 못했습니다.");
+    }
+  };
+
   const isAnonymousPost = Boolean(post?.isAnonymous || post?.categoryCode === "ANONYMOUS");
 
   const handleCreateComment = async (parentId: string | null) => {
@@ -566,38 +575,38 @@ export default function PostDetailPage({ params }: { params: Promise<{ publicId:
   return (
     <div className="min-h-screen bg-[var(--snow-background)]">
       <TopNav active="posts" />
-      <main className="snow-container px-5 py-8 lg:px-8 lg:py-10">
-        <div className="mx-auto max-w-4xl">
-          <article className="snow-card bg-white p-6 md:p-8">
-            <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
-              <span className="snow-chip snow-chip-dark">{post.categoryName}</span>
-              <span className="font-mono text-xs text-[var(--snow-muted)]">{new Date(post.createdAt).toLocaleString()}</span>
+      <main className="post-detail-page community-container">
+        <div className="post-detail-toolbar">
+          <Link href={`/posts?category=${post.categoryCode}`}><span className="material-symbols-outlined">arrow_back</span> 목록으로 돌아가기</Link>
+          <button type="button" onClick={() => window.location.reload()} aria-label="새로고침"><span className="material-symbols-outlined">refresh</span></button>
+        </div>
+        <div className="post-detail-layout">
+          <div className="post-detail-primary">
+          <article className="post-detail-card">
+            <div className="post-detail-meta-top">
+              <span>#{post.categoryName}</span>
+              <div><span className="material-symbols-outlined">visibility</span>{post.viewCount}<span className="material-symbols-outlined">chat_bubble</span>{post.commentCount}<span className="material-symbols-outlined">thumb_up</span>{post.likeCount}</div>
             </div>
 
-            <h1 className="text-4xl font-extrabold leading-tight text-black">{post.title}</h1>
+            <h1>{post.title}</h1>
 
-            <div className="mt-6 flex flex-wrap items-center gap-4 border-y border-[var(--snow-border)] py-4 font-mono text-xs text-[var(--snow-muted)]">
-              <span>
-                작성자 <strong className="text-black">{post.writer.nickname}</strong>
-              </span>
-              <span>조회 {post.viewCount}</span>
-              <span>댓글 {post.commentCount}</span>
-              <span>추천 {post.likeCount}</span>
-              <span>비추천 {post.dislikeCount}</span>
+            <div className="post-detail-author">
+              <span className="material-symbols-outlined">{post.isAnonymous ? "theater_comedy" : "person"}</span>
+              <div><strong>{post.writer.nickname}</strong><small>작성 {new Date(post.createdAt).toLocaleString()}</small></div>
               {(() => {
                 const canEdit = Boolean(post.isAnonymous || post.categoryCode === "ANONYMOUS" || (currentUserPublicId && post.writer?.publicId === currentUserPublicId));
                 const canDelete = Boolean(isAdmin || canEdit);
                 if (!canEdit && !canDelete) return null;
 
                 return (
-                  <div className="ml-auto flex items-center gap-3 font-bold">
+                  <div className="post-detail-owner-actions">
                     {canEdit && (
-                      <Link href={`/posts/${publicId}/edit`} className="text-black hover:underline">
+                      <Link href={`/posts/${publicId}/edit`}>
                         수정
                       </Link>
                     )}
                     {canDelete && (
-                      <button onClick={handleOpenDeleteModal} className="text-[#dc2626] hover:underline">
+                      <button onClick={handleOpenDeleteModal}>
                         삭제
                       </button>
                     )}
@@ -606,77 +615,60 @@ export default function PostDetailPage({ params }: { params: Promise<{ publicId:
               })()}
             </div>
 
-            <div className="mt-8 border-t border-b border-[var(--snow-border)] py-6">
+            <div className="post-detail-content">
               <ToastViewer content={post.content} />
             </div>
 
             {post.images?.length > 0 && (
-              <div className="mt-8 grid gap-4">
+              <div className="post-detail-images">
                 {post.images.map((imageUrl) => (
-                  <img key={imageUrl} src={imageUrl} alt="첨부 이미지" className="w-full rounded border border-[var(--snow-border)] object-cover grayscale" />
+                  <img key={imageUrl} src={imageUrl} alt="첨부 이미지" />
                 ))}
               </div>
             )}
 
-            <div className="mt-8 flex flex-col items-center gap-3 border-t border-[var(--snow-border)] pt-6">
-              <div className="flex flex-wrap justify-center gap-3">
-                <button onClick={() => handleReaction("LIKE")} className="snow-btn-secondary">
+            <div className="post-detail-reactions">
+              <div>
+                <button onClick={() => handleReaction("LIKE")} className="active">
                   <span className="material-symbols-outlined text-[17px]">thumb_up</span>
                   추천 {post.likeCount}
                 </button>
-                <button onClick={() => handleReaction("DISLIKE")} className="snow-btn-secondary">
+                <button onClick={() => handleReaction("DISLIKE")}>
                   <span className="material-symbols-outlined text-[17px]">thumb_down</span>
                   비추천 {post.dislikeCount}
                 </button>
+                <button type="button" onClick={() => void handleShare()}><span className="material-symbols-outlined">share</span>공유</button>
               </div>
               {reactionMsg && <p className="text-sm font-semibold text-[var(--snow-muted)]">{reactionMsg}</p>}
             </div>
           </article>
 
-          <section className="snow-card mt-8 bg-white p-6 md:p-8">
-            <h2 className="mb-6 flex items-center gap-2 text-2xl font-extrabold text-black">
-              <span className="material-symbols-outlined">chat_bubble</span>
-              댓글 {totalCommentCount}
-            </h2>
+          <section className="post-comments-card">
+            <header><h2>{isAnonymousPost ? "익명 댓글" : "댓글"} <span>{totalCommentCount}</span></h2></header>
 
-            <div className="mb-7 border-b border-[var(--snow-border)] pb-7">
+            <div className="post-comment-compose">
+              {isAnonymousPost && (
+                <div className="post-comment-identity">
+                  <span><span className="material-symbols-outlined">theater_comedy</span>익명</span>
+                  {!currentUserPublicId && <input type="password" placeholder="****" value={commentAnonPassword} onChange={(event) => setCommentAnonPassword(event.target.value)} />}
+                </div>
+              )}
               <textarea
                 rows={3}
                 placeholder={isAnonymousPost ? "익명으로 댓글을 작성해보세요." : currentUserPublicId ? "댓글을 작성해보세요." : "로그인 후 댓글을 작성할 수 있습니다."}
                 value={newCommentText}
                 onChange={(event) => setNewCommentText(event.target.value)}
-                className="snow-textarea min-h-[110px]"
+                className="post-comment-textarea"
               />
-              <div className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                {isAnonymousPost ? (
-                  <div className="flex items-center gap-2">
-                    <span className="snow-chip snow-chip-dark text-xs">익명</span>
-                    {!currentUserPublicId && (
-                      <input
-                        type="password"
-                        placeholder="익명 비밀번호 입력"
-                        value={commentAnonPassword}
-                        onChange={(event) => setCommentAnonPassword(event.target.value)}
-                        className="snow-input sm:w-52"
-                      />
-                    )}
-                  </div>
-                ) : (
-                  <div>
-                    {!currentUserPublicId && (
-                      <span className="text-xs text-[var(--snow-muted)]">
-                        * 댓글 작성을 위해 로그인이 필요합니다.
-                      </span>
-                    )}
-                  </div>
-                )}
-                <button disabled={submittingComment} onClick={() => void handleCreateComment(null)} className="snow-btn-primary sm:ml-auto">
-                  댓글 등록
+              {!isAnonymousPost && !currentUserPublicId && <span className="post-comment-login-note">댓글 작성을 위해 로그인이 필요합니다.</span>}
+              <div className="post-comment-submit-row">
+                <button disabled={submittingComment} onClick={() => void handleCreateComment(null)}>
+                  댓글 등록 <span className="material-symbols-outlined">send</span>
                 </button>
               </div>
             </div>
 
-            <div className="grid gap-4">
+            <div className="post-comment-list">
               {isLoadingComments ? (
                 <p role="status" className="py-8 text-center text-sm text-[var(--snow-muted)]">
                   댓글을 불러오는 중입니다.
@@ -735,7 +727,7 @@ export default function PostDetailPage({ params }: { params: Promise<{ publicId:
             </div>
 
             {!isLoadingComments && !commentLoadError && hasNextComments && (
-              <div className="mt-6 grid gap-2">
+              <div className="post-comments-more">
                 {loadMoreCommentError && (
                   <p role="alert" className="text-center text-sm text-red-600">
                     {loadMoreCommentError}
@@ -745,7 +737,7 @@ export default function PostDetailPage({ params }: { params: Promise<{ publicId:
                   type="button"
                   disabled={isLoadingMoreComments}
                   onClick={() => void handleLoadMoreComments()}
-                  className="snow-btn-secondary w-full"
+                  className="post-comments-more-button"
                 >
                   {isLoadingMoreComments
                     ? "댓글을 불러오는 중..."
@@ -756,6 +748,15 @@ export default function PostDetailPage({ params }: { params: Promise<{ publicId:
               </div>
             )}
           </section>
+          </div>
+          <aside className="post-detail-sidebar">
+            <section className="detail-carpool-card">
+              <header><h2><span className="material-symbols-outlined">directions_car</span>실시간 카풀/동행</h2><small>전체보기</small></header>
+              <article><div><b>모집중 2석</b><time>내일(토) 05:30</time></div><strong>잠실역 <span>→</span> 휘닉스파크</strong><p>카니발 4세대 · 보드백 수납 가능 <b>15,000원</b></p></article>
+              <article><div><b>모집중 1석</b><time>일요일 17:00</time></div><strong>하이원 밸리 <span>→</span> 신분당 판교역</strong><p>쏘렌토 하이브리드 · 비흡연 <b>18,000원</b></p></article>
+            </section>
+            <p>카풀·동행 영역은 현재 화면 구성을 위한 예시입니다.</p>
+          </aside>
         </div>
       </main>
 
diff --git a/frontend/app/posts/anonymous/page.tsx b/frontend/app/posts/anonymous/page.tsx
index b0e61bd..bf8ba13 100644
--- a/frontend/app/posts/anonymous/page.tsx
+++ b/frontend/app/posts/anonymous/page.tsx
@@ -1,122 +1,5 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { Footer, SideCategories, TopNav } from "../../components/SiteChrome";
-import { API_ENDPOINTS } from "../../lib/api";
-
-interface PostItem {
-  publicId: string;
-  categoryName: string;
-  categoryCode: string;
-  title: string;
-  writerNickname: string;
-  hasImage: boolean;
-  commentCount: number;
-  likeCount: number;
-  isDeleted: boolean;
-  status: string;
-  createdAt: string;
-}
+import { redirect } from "next/navigation";
 
 export default function AnonymousBoardPage() {
-  const [posts, setPosts] = useState<PostItem[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const timer = window.setTimeout(() => {
-      void (async () => {
-        try {
-          const res = await fetch(`${API_ENDPOINTS.posts.list}?categoryCode=ANONYMOUS&page=1&size=15`, {
-            credentials: "include",
-          });
-          if (res.ok) {
-            const data = await res.json();
-            setPosts(Array.isArray(data.content) ? data.content : []);
-          }
-        } catch (error) {
-          console.error("익명 게시글 로드 실패:", error);
-        } finally {
-          setLoading(false);
-        }
-      })();
-    }, 0);
-
-    return () => window.clearTimeout(timer);
-  }, []);
-
-  const handlePostClick = (event: React.MouseEvent, post: PostItem) => {
-    if (post.isDeleted || post.status === "DELETED") {
-      event.preventDefault();
-      alert("삭제된 게시글입니다.");
-      return;
-    }
-
-    if (post.status === "BLOCKED") {
-      event.preventDefault();
-      alert("관리자에 의해 차단된 게시글입니다.");
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-[var(--snow-background)]">
-      <TopNav active="posts" />
-      <div className="snow-container snow-grid-shell">
-        <SideCategories active="anonymous" />
-        <main className="px-5 py-8 lg:px-8 lg:py-10">
-          <section className="mb-10 border-b-2 border-black pb-7">
-            <h1 className="snow-heading-lg">Speak Freely.</h1>
-            <p className="mt-4 max-w-3xl text-lg leading-8 text-[var(--snow-ink-soft)]">
-              익명 게시판입니다. 닉네임과 프로필 없이 솔직한 질문과 의견을 남길 수 있습니다.
-            </p>
-          </section>
-
-          <div className="mb-6 flex items-center justify-between gap-4 border-b border-[var(--snow-border)] pb-4">
-            <div className="flex gap-5 font-mono text-xs font-bold uppercase tracking-[0.08em]">
-              <button className="border-b-2 border-black pb-1 text-black">Newest</button>
-              <button className="text-[var(--snow-muted)]">Top</button>
-              <button className="text-[var(--snow-muted)]">Controversial</button>
-            </div>
-            <Link href="/posts/create?category=ANONYMOUS" className="snow-btn-primary">
-              <span className="material-symbols-outlined text-[17px]">edit</span>
-              Write Post
-            </Link>
-          </div>
-
-          <section className="snow-card bg-white">
-            <div className="divide-y divide-[var(--snow-border)]">
-              {loading ? (
-                <div className="p-12 text-center text-sm text-[var(--snow-muted)]">익명 게시글을 불러오는 중입니다.</div>
-              ) : posts.length === 0 ? (
-                <div className="p-12 text-center text-sm text-[var(--snow-muted)]">작성된 익명 게시글이 없습니다.</div>
-              ) : (
-                posts.map((post) => (
-                  <Link
-                    key={post.publicId}
-                    href={`/posts/${post.publicId}`}
-                    onClick={(event) => handlePostClick(event, post)}
-                    className="block p-6 transition hover:bg-[var(--snow-surface-low)]"
-                  >
-                    <div className="mb-3 flex flex-wrap items-center gap-2 font-mono text-xs text-[var(--snow-muted)]">
-                      <span className="snow-chip">익명 보더</span>
-                      <span>{new Date(post.createdAt).toLocaleDateString()}</span>
-                      {post.hasImage && <span className="snow-chip snow-chip-green">이미지</span>}
-                    </div>
-                    <h2 className={`text-2xl font-extrabold text-black ${post.isDeleted ? "text-[var(--snow-faint)] line-through" : ""}`}>
-                      {post.isDeleted || post.status === "DELETED" ? "[삭제된 게시글입니다]" : post.title}
-                    </h2>
-                    <div className="mt-4 flex gap-5 font-mono text-xs text-[var(--snow-muted)]">
-                      <span>댓글 {post.commentCount}</span>
-                      <span>추천 {post.likeCount}</span>
-                    </div>
-                  </Link>
-                ))
-              )}
-            </div>
-          </section>
-        </main>
-      </div>
-      <Footer />
-    </div>
-  );
+  redirect("/posts?category=ANONYMOUS");
 }
diff --git a/frontend/app/posts/create/page.tsx b/frontend/app/posts/create/page.tsx
index 741e6cb..0f13c99 100644
--- a/frontend/app/posts/create/page.tsx
+++ b/frontend/app/posts/create/page.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useRef, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import dynamic from "next/dynamic";
+import { Footer, TopNav } from "../../components/SiteChrome";
 import { ToastEditorHandle } from "../../components/ToastEditor";
 import { csrfFetch } from "../../lib/csrfFetch";
 import { API_ENDPOINTS } from "../../lib/api";
@@ -26,7 +27,6 @@ function PostCreateForm() {
 
   const [categoryCode, setCategoryCode] = useState(initialCat);
   const [title, setTitle] = useState("");
-  const [content, setContent] = useState("");
   const [anonymousPassword, setAnonymousPassword] = useState("");
   const [imageUrl, setImageUrl] = useState("");
 
@@ -38,14 +38,6 @@ function PostCreateForm() {
   const editorRef = useRef<ToastEditorHandle>(null);
   const hasAlertedRef = useRef(false);
 
-  // URL 카테고리 동기화
-  useEffect(() => {
-    const catFromUrl = searchParams.get("category");
-    if (catFromUrl) {
-      setCategoryCode(catFromUrl);
-    }
-  }, [searchParams]);
-
   // 로그인 상태 확인 & 권한 라우트 가드 (Route Guard - 중복 알림 방지 적용)
   useEffect(() => {
     let isSubscribed = true;
@@ -105,7 +97,7 @@ function PostCreateForm() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const editorContent = editorRef.current?.getInstance().getMarkdown() || content;
+    const editorContent = editorRef.current?.getInstance().getMarkdown() || "";
 
     if (!title.trim()) {
       setErrorMsg("제목을 입력해 주세요.");
@@ -163,34 +155,31 @@ function PostCreateForm() {
     );
   }
 
+  const boardName = categoryCode === "ANONYMOUS" ? "익명게시판" : categoryCode === "QNA" ? "장비·테크닉" : categoryCode === "FOOD" ? "리조트 맛집" : "자유게시판";
+
   return (
-    <main className="max-w-4xl mx-auto px-6 py-8">
-      <div className="mb-6">
-        <h1 className="text-2xl font-black italic tracking-wide text-[#111827]">
-          {isAnonCategory ? "🕵️ 익명 게시판 게시글 작성" : "NEW POST"}
-        </h1>
-        <p className="text-xs text-[#6b7280] mt-1 font-mono">
-          {isAnonCategory
-            ? "작성자 닉네임이 외부 화면에 노출되지 않는 익명 글쓰기 공간"
-            : "자유게시판 및 장비 Q&A 본문 작성"}
-        </p>
-      </div>
+    <main className="compose-page community-container">
+      <header className="compose-heading">
+        <span className="compose-heading-icon material-symbols-outlined">edit_square</span>
+        <h1>{boardName} 글쓰기</h1>
+      </header>
 
-      <form onSubmit={handleSubmit} className="bg-white border border-[#e5e7eb] rounded p-6 shadow-sm space-y-5">
+      <div className="compose-layout">
+        <form onSubmit={handleSubmit} className="compose-card">
         {errorMsg && (
-          <div className="bg-[#fef2f2] border border-[#fecaca] p-3 rounded text-xs text-[#dc2626] font-semibold">
-            🚨 {errorMsg}
+          <div className="compose-error" role="alert">
+            <span className="material-symbols-outlined">error</span>{errorMsg}
           </div>
         )}
 
-        {/* Category Selection */}
-        <div className="space-y-1">
-          <label className="text-xs font-mono font-bold text-[#45464c]">카테고리</label>
+        <section className="compose-section">
+          <label htmlFor="post-category" className="compose-label">주제 분류 <b>*필수선택</b></label>
           <select
+            id="post-category"
             value={categoryCode}
             disabled={isCategoryLocked}
             onChange={(e) => handleCategoryChange(e.target.value)}
-            className="w-full bg-[#f9f9f9] border border-[#e5e7eb] rounded px-3 py-2 text-xs font-bold text-[#111827] focus:outline-none focus:border-[#111827] disabled:opacity-80 disabled:cursor-not-allowed"
+            className="compose-select"
           >
             <option value="FREE">자유게시판</option>
             <option value="ANONYMOUS">익명 게시판</option>
@@ -198,120 +187,100 @@ function PostCreateForm() {
             <option value="FOOD">리조트 맛집</option>
           </select>
           {isCategoryLocked && (
-            <p className="text-[11px] font-mono text-[#6b7280]">
-              * 진입 게시판 카테고리로 작성 위치가 고정되었습니다.
-            </p>
+            <p className="compose-help">현재 게시판으로 작성 위치가 고정되어 있습니다.</p>
           )}
-        </div>
+        </section>
 
-        {/* Title */}
-        <div className="space-y-1">
-          <label className="text-xs font-mono font-bold text-[#45464c]">게시글 제목</label>
+        <section className="compose-author-box">
+          <div className="compose-author">
+            <span className="material-symbols-outlined">{isAnonCategory ? "theater_comedy" : "person"}</span>
+            <strong>{isAnonCategory ? "익명의 사용자" : userProfile?.nickname || "로그인 사용자"}</strong>
+          </div>
+          {isAnonCategory && !userProfile && (
+            <label className="compose-password">
+              <span>글 수정/삭제 비밀번호</span>
+              <span className="compose-password-field">
+                <input type="password" placeholder="비밀번호 입력" value={anonymousPassword} onChange={(e) => setAnonymousPassword(e.target.value)} />
+                <span className="material-symbols-outlined">lock</span>
+              </span>
+            </label>
+          )}
+        </section>
+
+        <section className="compose-section">
+          <label htmlFor="post-title" className="compose-label">글 제목</label>
           <input
+            id="post-title"
             type="text"
-            placeholder="제목을 입력하세요..."
+            maxLength={200}
+            placeholder="글 제목을 입력해주세요."
             value={title}
             onChange={(e) => setTitle(e.target.value)}
-            className="w-full bg-white border border-[#e5e7eb] rounded px-3 py-2 text-sm text-[#111827] focus:outline-none focus:border-[#111827]"
+            className="compose-title-input"
           />
-        </div>
+        </section>
 
-        {/* Content - Toast UI Editor */}
-        <div className="space-y-1">
-          <label className="text-xs font-mono font-bold text-[#45464c]">본문 내용 (스마트 에디터 / 마크다운 듀얼)</label>
-          <div className="rounded border border-[#e5e7eb] bg-white p-1">
+        <section className="compose-section">
+          <label className="compose-label">본문 내용</label>
+          <div className="compose-editor">
             <ToastEditor ref={editorRef} initialValue="" height="500px" />
           </div>
-        </div>
+        </section>
 
-        {/* Image URL Optional */}
-        <div className="space-y-1">
-          <label className="text-xs font-mono font-bold text-[#45464c]">첨부 이미지 URL (선택)</label>
+        <section className="compose-section">
+          <label htmlFor="post-image" className="compose-label"><span className="material-symbols-outlined">attach_file</span> 사진 첨부 <small>(이미지 URL, 선택)</small></label>
           <input
+            id="post-image"
             type="text"
             placeholder="https://cdn.example.com/image.jpg"
             value={imageUrl}
             onChange={(e) => setImageUrl(e.target.value)}
-            className="w-full bg-white border border-[#e5e7eb] rounded px-3 py-2 text-xs font-mono text-[#111827] focus:outline-none focus:border-[#111827]"
+            className="compose-image-input"
           />
-        </div>
-
-        {/* Anonymous Category Condition Handling */}
-        {isAnonCategory && (
-          <div className="bg-[#e6f7f0] border border-[#a7f3d0] rounded p-4 space-y-3">
-            <div className="text-xs font-bold text-[#10b981] flex items-center gap-1">
-              <span className="material-symbols-outlined text-sm">visibility_off</span>
-              <span>익명 게시판 작성 안내</span>
-            </div>
+          <p className="compose-help">현재는 이미지 주소 1개를 첨부할 수 있습니다.</p>
+        </section>
 
-            {userProfile ? (
-              <div className="text-xs text-[#065f46] space-y-1">
-                <p className="font-bold">
-                  🟢 로그인 상태입니다 ({userProfile.nickname} 님).
-                </p>
-                <p>
-                  작성자 닉네임은 외부 화면에서 완전히 숨겨져 "익명 보더"로 표시되며, 본인 계정 정보는 안전하게 DB에 보존되어 비밀번호 입력 없이 즉시 등록 및 삭제가 가능합니다.
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-2">
-                <p className="text-xs text-[#065f46]">
-                  비로그인 사용자로 익명글을 작성합니다. 글 수정 및 삭제에 필요한 비밀번호를 설정해 주세요.
-                </p>
-                <input
-                  type="password"
-                  placeholder="익명 글 수정/삭제용 비밀번호 (4자리 이상)"
-                  value={anonymousPassword}
-                  onChange={(e) => setAnonymousPassword(e.target.value)}
-                  className="w-full bg-white border border-[#a7f3d0] rounded px-3 py-2 text-xs text-[#111827] focus:outline-none focus:border-[#10b981]"
-                />
-                <p className="text-[11px] font-bold text-[#dc2626] bg-[#fef2f2] p-2 rounded border border-[#fecaca]">
-                  ⚠️ 익명 비밀번호 분실 시 게시글 수정 및 삭제가 불가능합니다.
-                </p>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Buttons */}
-        <div className="flex justify-end gap-3 pt-3 border-t border-[#e5e7eb]">
+        <footer className="compose-actions">
           <Link
-            href={isAnonCategory ? "/posts/anonymous" : "/posts"}
-            className="px-4 py-2 rounded border border-[#e5e7eb] text-xs font-semibold text-[#45464c] hover:border-[#111827] transition"
+            href={`/posts${categoryCode ? `?category=${categoryCode}` : ""}`}
+            className="compose-cancel"
           >
-            취소
+            <span className="material-symbols-outlined">arrow_back</span> 취소 / 뒤로가기
           </Link>
           <button
             type="submit"
             disabled={submitting}
-            className="px-5 py-2 rounded bg-[#111827] text-white text-xs font-semibold hover:bg-[#1f2937] transition shadow-sm"
+            className="compose-submit"
           >
-            {submitting ? "등록 처리 중..." : "게시글 등록하기"}
+            <span className="material-symbols-outlined">edit_note</span>
+            {submitting ? "등록 처리 중..." : `${isAnonCategory ? "익명 " : ""}게시글 등록`}
           </button>
-        </div>
-      </form>
+        </footer>
+        </form>
+
+        <aside className="compose-sidebar" aria-label="참고 정보">
+          <section className="compose-side-card">
+            <header><span className="material-symbols-outlined">ac_unit</span><strong>오늘의 설질</strong><small>참고 정보</small></header>
+            <div className="compose-weather-grid">
+              <article><span>용평 발왕산</span><b>-6.4°C</b><small>설질: 최상 파우더</small></article>
+              <article><span>휘닉스 몽블랑</span><b>-4.8°C</b><small>설질: 압설 양호</small></article>
+            </div>
+          </section>
+          <p className="compose-side-note">설질 영역은 현재 화면 구성을 위한 예시입니다.</p>
+        </aside>
+      </div>
     </main>
   );
 }
 
 export default function PostCreatePage() {
   return (
-    <div className="min-h-screen bg-[#f9f9f9]">
-      <header className="border-b border-[#e5e7eb] bg-white px-6 py-4 sticky top-0 z-50 shadow-sm">
-        <div className="max-w-6xl mx-auto flex justify-between items-center">
-          <Link href="/posts" className="text-xl font-extrabold tracking-tight italic flex items-center gap-2 text-[#111827]">
-            <span className="material-symbols-outlined text-2xl">downhill_skiing</span>
-            <span>SNOWBOARDERS</span>
-          </Link>
-          <Link href="/posts" className="text-xs font-mono font-semibold text-[#6b7280] hover:text-[#111827]">
-            ◀ 목록으로 돌아가기
-          </Link>
-        </div>
-      </header>
-
+    <div className="community-page">
+      <TopNav active="posts" />
       <Suspense fallback={<div className="p-12 text-center text-xs text-[#6b7280]">로딩 중입니다...</div>}>
         <PostCreateForm />
       </Suspense>
+      <Footer />
     </div>
   );
 }
diff --git a/frontend/app/posts/page.tsx b/frontend/app/posts/page.tsx
index d150b30..a8f9836 100644
--- a/frontend/app/posts/page.tsx
+++ b/frontend/app/posts/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState, Suspense } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { FormEvent, Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
-import { Footer, SideCategories, TopNav } from "../components/SiteChrome";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Footer, TopNav, type ActiveNav } from "../components/SiteChrome";
 import { API_ENDPOINTS } from "../lib/api";
 
 interface PostItem {
@@ -23,275 +23,172 @@ interface PostItem {
   createdAt: string;
 }
 
-const CATEGORIES = [
-  { code: "", name: "전체 게시판", key: "all" },
-  { code: "FREE", name: "자유게시판", key: "free" },
-  { code: "ANONYMOUS", name: "익명 게시판", key: "anonymous" },
-  { code: "QNA", name: "장비 Q&A", key: "qna" },
-  { code: "FOOD", name: "리조트 맛집", key: "food" },
+interface BoardConfig {
+  name: string;
+  icon: string;
+  badge?: string;
+  writeLabel: string;
+  navKey: ActiveNav;
+  notices: { label: string; title: string; date: string; views: string }[];
+  topics: string[];
+}
+
+const categories = [
+  { code: "", name: "전체글" },
+  { code: "FREE", name: "자유게시판" },
+  { code: "ANONYMOUS", name: "익명게시판" },
+  { code: "QNA", name: "장비·테크닉" },
+  { code: "FOOD", name: "리조트 맛집" },
 ];
 
-const featured = [
-  {
-    label: "Announcement",
-    title: "시즌권 공동구매와 양도 거래 주의사항",
-    body: "거래 게시글은 연락처 노출을 최소화하고, 현장 확인 전 선입금을 피해주세요.",
-    dark: false,
-  },
-  {
-    label: "Event",
-    title: "이번 주말 베스트 라이딩 클립 공유",
-    body: "짧은 영상 링크와 촬영 리조트를 함께 남기면 메인 피드에 소개됩니다.",
-    dark: true,
-  },
+const defaultNotices = [
+  { label: "공지", title: "스노우띵 커뮤니티 이용 수칙 및 게시물 운영 정책 안내", date: "24.12.15", views: "1.2만" },
+  { label: "필독", title: "안전한 라이딩을 위한 슬로프 에티켓과 제보 작성 가이드", date: "24.12.20", views: "8,490" },
+];
+
+const boardConfigs: Record<string, BoardConfig> = {
+  "": { name: "전체 게시판", icon: "view_list", writeLabel: "글쓰기", navKey: "posts", notices: defaultNotices, topics: ["휘팍 챔피언 설질", "야간 고글 추천", "시즌권 양도", "초보 데크 선택", "강원권 교통"] },
+  FREE: { name: "자유게시판", icon: "forum", writeLabel: "자유글 쓰기", navKey: "free", notices: defaultNotices, topics: ["첫 보딩 후기", "시즌방 생활", "주말 원정", "라이딩 영상", "보드복 추천"] },
+  ANONYMOUS: { name: "익명게시판", icon: "theater_comedy", badge: "REAL ANONYMOUS", writeLabel: "익명 글쓰기", navKey: "anonymous", notices: [
+    { label: "공지", title: "익명게시판 내 특정인 저격, 허위 사실 유포 및 연락처 공유 시 제재 안내", date: "24.12.15", views: "1.2만" },
+    { label: "필독", title: "익명성은 타인을 공격할 권리가 아닙니다. 익명게시판 이용 가이드", date: "24.12.20", views: "8,490" },
+  ], topics: ["셔틀버스 매너", "휘팍 실시간 파우더", "시즌방 비용 정산", "데크 구매 고민", "복귀길 정체"] },
+  QNA: { name: "장비·테크닉", icon: "snowboarding", writeLabel: "질문 쓰기", navKey: "gear", notices: defaultNotices, topics: ["부츠 열성형", "바인딩 각도", "엣지 튜닝", "입문 데크", "카빙 자세"] },
+  FOOD: { name: "리조트 맛집", icon: "restaurant", writeLabel: "맛집 공유", navKey: "posts", notices: defaultNotices, topics: ["용평 아침식사", "휘팍 국밥", "하이원 야식", "비발디 카페", "웰리힐리 맛집"] },
+};
+
+const carpools = [
+  { from: "서울 사당", to: "하이원", date: "12/28(토) 05:00 출발", seat: "2석 남음", price: "기름/톨비 N빵" },
+  { from: "경기 분당(서현)", to: "휘닉스파크", date: "12/28(토) 18:00 야간", seat: "1석 남음", price: "편도 1.5만원" },
 ];
 
 function PostListContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const categoryFromUrl = searchParams.get("category") || "";
+  const categoryCode = searchParams.get("category")?.toUpperCase() ?? "";
+  const currentCategory = boardConfigs[categoryCode] ? categoryCode : "";
+  const page = Math.max(0, Number(searchParams.get("page") ?? "1") - 1 || 0);
+  const keywordFromUrl = searchParams.get("keyword") ?? "";
+  const config = boardConfigs[currentCategory];
 
   const [posts, setPosts] = useState<PostItem[]>([]);
-  const [selectedCategory, setSelectedCategory] = useState(categoryFromUrl);
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [page, setPage] = useState(0);
+  const [searchKeyword, setSearchKeyword] = useState(keywordFromUrl);
   const [totalPages, setTotalPages] = useState(1);
   const [loading, setLoading] = useState(true);
-
-  // URL Query Parameter ?category= 변경 감지 및 자동 동기화
-  useEffect(() => {
-    setSelectedCategory(categoryFromUrl);
-    setPage(0);
-  }, [categoryFromUrl]);
-
-  const activeCategoryKey = useMemo(
-    () => CATEGORIES.find((category) => category.code === selectedCategory)?.key ?? "all",
-    [selectedCategory],
-  );
+  const [error, setError] = useState(false);
 
   const fetchPosts = useCallback(async () => {
     setLoading(true);
+    setError(false);
     try {
-      let url = `${API_ENDPOINTS.posts.list}?page=${page + 1}&size=10`;
-      if (selectedCategory) {
-        url += `&categoryCode=${selectedCategory}`;
-      }
-      if (searchKeyword.trim()) {
-        url += `&keyword=${encodeURIComponent(searchKeyword.trim())}`;
-      }
-
-      const res = await fetch(url, { credentials: "include" });
-      if (res.ok) {
-        const data = await res.json();
-        setPosts(Array.isArray(data.content) ? data.content : []);
-        setTotalPages(data.pageInfo?.totalPages || 1);
-      }
-    } catch (error) {
-      console.error("게시글 목록 로드 실패:", error);
+      const params = new URLSearchParams({ page: String(page + 1), size: "10" });
+      if (currentCategory) params.set("categoryCode", currentCategory);
+      if (keywordFromUrl.trim()) params.set("keyword", keywordFromUrl.trim());
+      const response = await fetch(`${API_ENDPOINTS.posts.list}?${params}`, { credentials: "include" });
+      if (!response.ok) throw new Error(`게시글 목록 응답 오류: ${response.status}`);
+      const data = await response.json();
+      setPosts(Array.isArray(data.content) ? data.content : []);
+      setTotalPages(Math.max(1, data.pageInfo?.totalPages || 1));
+    } catch (fetchError) {
+      console.error("게시글 목록 로드 실패:", fetchError);
+      setPosts([]);
+      setError(true);
     } finally {
       setLoading(false);
     }
-  }, [page, searchKeyword, selectedCategory]);
+  }, [currentCategory, keywordFromUrl, page]);
 
   useEffect(() => {
-    const timer = window.setTimeout(() => {
-      void fetchPosts();
-    }, 0);
-
+    const timer = window.setTimeout(() => void fetchPosts(), 0);
     return () => window.clearTimeout(timer);
   }, [fetchPosts]);
 
+  const visiblePages = useMemo(() => {
+    const start = Math.max(0, Math.min(page - 2, totalPages - 5));
+    return Array.from({ length: Math.min(5, totalPages) }, (_, index) => start + index);
+  }, [page, totalPages]);
+
+  const moveTo = (next: { category?: string; page?: number; keyword?: string }) => {
+    const params = new URLSearchParams();
+    const category = next.category ?? currentCategory;
+    const nextPage = next.page ?? page;
+    const keyword = next.keyword ?? keywordFromUrl;
+    if (category) params.set("category", category);
+    if (nextPage > 0) params.set("page", String(nextPage + 1));
+    if (keyword.trim()) params.set("keyword", keyword.trim());
+    router.push(`/posts${params.size ? `?${params}` : ""}`);
+  };
+
+  const handleSearch = (event: FormEvent) => {
+    event.preventDefault();
+    moveTo({ page: 0, keyword: searchKeyword });
+  };
+
   const handlePostClick = (event: React.MouseEvent, post: PostItem) => {
     if (post.isDeleted || post.status === "DELETED") {
       event.preventDefault();
       alert("삭제된 게시글입니다.");
-      return;
-    }
-
-    if (post.status === "BLOCKED") {
+    } else if (post.status === "BLOCKED") {
       event.preventDefault();
       alert("관리자에 의해 차단된 게시글입니다.");
     }
   };
 
-  const handleSearch = () => {
-    setPage(0);
-    void fetchPosts();
-  };
-
   return (
-    <div className="min-h-screen bg-[var(--snow-background)]">
-      <TopNav active="posts" />
-      <div className="snow-container snow-grid-shell">
-        <SideCategories active={activeCategoryKey} />
-        <main className="px-5 py-8 lg:px-8 lg:py-10">
-          <header className="mb-8 border-b-2 border-black pb-5">
-            <div className="flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
-              <div>
-                <h1 className="snow-heading-lg uppercase">Free Board</h1>
-                <p className="mt-3 text-lg text-[var(--snow-muted)]">자유 게시판과 익명 게시판을 한곳에서 확인합니다.</p>
-              </div>
-              <Link href="/posts/create" className="snow-btn-primary">
-                <span className="material-symbols-outlined text-[17px]">edit</span>
-                Write
-              </Link>
-            </div>
-          </header>
-
-          <section className="mb-10 grid gap-6 md:grid-cols-2">
-            {featured.map((item) => (
-              <article
-                key={item.title}
-                className={`snow-card min-h-[190px] p-6 ${item.dark ? "bg-black text-white" : "bg-white text-black"}`}
-              >
-                <div className="flex h-full flex-col justify-between gap-8">
-                  <div className="flex items-start justify-between gap-4">
-                    <span className={`snow-chip ${item.dark ? "bg-white text-black" : "snow-chip-dark"}`}>{item.label}</span>
-                    <span className={`font-mono text-xs ${item.dark ? "text-white/70" : "text-[var(--snow-muted)]"}`}>Pinned</span>
-                  </div>
-                  <div>
-                    <h2 className="text-2xl font-extrabold leading-tight">{item.title}</h2>
-                    <p className={`mt-3 leading-7 ${item.dark ? "text-white/80" : "text-[var(--snow-ink-soft)]"}`}>{item.body}</p>
-                  </div>
-                </div>
-              </article>
-            ))}
-          </section>
-
-          <section className="snow-card bg-white">
-            <div className="flex flex-col gap-4 border-b border-[var(--snow-border)] p-5 lg:flex-row lg:items-center lg:justify-between">
-              <div className="flex flex-wrap gap-4">
-                {CATEGORIES.map((category) => (
-                  <button
-                    key={category.code}
-                    onClick={() => {
-                      setSelectedCategory(category.code);
-                      setPage(0);
-                    }}
-                    className={`font-mono text-xs font-bold uppercase tracking-[0.08em] ${
-                      selectedCategory === category.code
-                        ? "border-b-2 border-black pb-1 text-black"
-                        : "text-[var(--snow-muted)] hover:text-black"
-                    }`}
-                  >
-                    {category.name}
-                  </button>
-                ))}
-              </div>
-
-              <div className="flex w-full gap-2 sm:w-auto">
-                <input
-                  type="text"
-                  placeholder="제목 또는 본문 검색"
-                  value={searchKeyword}
-                  onChange={(event) => setSearchKeyword(event.target.value)}
-                  onKeyDown={(event) => event.key === "Enter" && handleSearch()}
-                  className="snow-input min-w-0 sm:w-64"
-                />
-                <button onClick={handleSearch} className="snow-btn-secondary shrink-0">
-                  Search
-                </button>
-              </div>
-            </div>
-
-            <div className="divide-y divide-[var(--snow-border)]">
-              {loading ? (
-                <div className="p-12 text-center text-sm text-[var(--snow-muted)]">게시글 목록을 불러오는 중입니다.</div>
-              ) : posts.length === 0 ? (
-                <div className="p-12 text-center text-sm text-[var(--snow-muted)]">등록된 게시글이 없습니다. 첫 글을 작성해보세요.</div>
-              ) : (
-                posts.map((post) => {
-                  const isUnavailable = post.isDeleted || post.status === "DELETED" || post.status === "BLOCKED";
-                  const title =
-                    post.status === "BLOCKED"
-                      ? "[차단된 게시글입니다]"
-                      : post.isDeleted || post.status === "DELETED"
-                        ? "[삭제된 게시글입니다]"
-                        : post.title;
-
-                  return (
-                    <Link
-                      key={post.publicId}
-                      href={`/posts/${post.publicId}`}
-                      onClick={(event) => handlePostClick(event, post)}
-                      className="grid gap-4 p-5 transition hover:bg-[var(--snow-surface-low)] md:grid-cols-[minmax(0,1fr)_130px]"
-                    >
-                      <div className="min-w-0">
-                        <div className="mb-2 flex flex-wrap items-center gap-2">
-                          <span className="snow-chip">{post.categoryName}</span>
-                          {post.hasImage && (
-                            <span className="snow-chip snow-chip-green">
-                              <span className="material-symbols-outlined text-[14px]">image</span>
-                              이미지
-                            </span>
-                          )}
-                          {post.commentCount > 0 && (
-                            <span className="snow-chip">
-                              <span className="material-symbols-outlined text-[14px]">chat_bubble</span>
-                              {post.commentCount}
-                            </span>
-                          )}
-                        </div>
-                        <h2 className={`truncate text-xl font-extrabold text-black ${isUnavailable ? "text-[var(--snow-faint)] line-through" : ""}`}>
-                          {title}
-                        </h2>
-                        <div className="mt-3 flex flex-wrap items-center gap-3 font-mono text-xs text-[var(--snow-muted)]">
-                          <span className="font-bold text-black">{post.writerNickname}</span>
-                          <span>{new Date(post.createdAt).toLocaleDateString()}</span>
-                          <span>조회 {post.viewCount}</span>
-                          <span>추천 {post.likeCount}</span>
-                        </div>
-                      </div>
-                      <div className="hidden items-center justify-end md:flex">
-                        {post.thumbnailImageUrl ? (
-                          <img
-                            src={post.thumbnailImageUrl}
-                            alt=""
-                            className="h-20 w-28 rounded border border-[var(--snow-border)] object-cover grayscale"
-                          />
-                        ) : (
-                          <div className="flex h-20 w-28 items-center justify-center rounded border border-[var(--snow-border)] bg-[var(--snow-background)]">
-                            <span className="material-symbols-outlined text-[24px] text-[var(--snow-faint)]">article</span>
-                          </div>
-                        )}
-                      </div>
-                    </Link>
-                  );
-                })
-              )}
+    <div className="community-page">
+      <TopNav active={config.navKey} />
+      <main className="community-container board-page">
+        <section className="board-identity">
+          <div className="board-identity-copy">
+            <span className="board-icon material-symbols-outlined">{config.icon}</span>
+            <div className="board-title-line"><h1>{config.name}</h1>{config.badge && <span className="anonymous-badge"><i />{config.badge}</span>}</div>
+          </div>
+          <Link href={`/posts/create${currentCategory ? `?category=${currentCategory}` : ""}`} className="board-write-button"><span className="material-symbols-outlined">edit</span>{config.writeLabel}</Link>
+        </section>
+
+        <div className="board-layout">
+          <section className="board-primary">
+            <nav className="board-filter-panel" aria-label="게시판 선택">
+              <div className="board-category-tabs">{categories.map((category) => <button key={category.code} type="button" className={currentCategory === category.code ? "active" : ""} onClick={() => moveTo({ category: category.code, page: 0, keyword: "" })}>{category.name}</button>)}</div>
+              <div className="board-sort"><button className="active">최신순</button><i /><button disabled title="정렬 API 연결 후 사용할 수 있습니다.">추천순</button><i /><button disabled title="정렬 API 연결 후 사용할 수 있습니다.">댓글순</button><i /><button disabled title="정렬 API 연결 후 사용할 수 있습니다.">조회순</button></div>
+            </nav>
+
+            <section className="board-notices" aria-label="게시판 공지">
+              {config.notices.map((notice) => <article key={notice.title}><div><span>{notice.label}</span><strong>{notice.title}</strong></div><p><b>관리자</b><time>{notice.date}</time><span>조회 {notice.views}</span></p></article>)}
+            </section>
+
+            <section className="board-post-list" aria-live="polite">
+              {loading ? <div className="board-state"><span className="material-symbols-outlined spin">progress_activity</span><strong>게시글을 불러오는 중입니다.</strong></div>
+                : error ? <div className="board-state error"><span className="material-symbols-outlined">cloud_off</span><strong>게시글을 불러오지 못했습니다.</strong><button type="button" onClick={() => void fetchPosts()}>다시 시도</button></div>
+                : posts.length === 0 ? <div className="board-state"><span className="material-symbols-outlined">edit_note</span><strong>등록된 게시글이 없습니다.</strong><Link href={`/posts/create${currentCategory ? `?category=${currentCategory}` : ""}`}>첫 글 작성하기</Link></div>
+                : posts.map((post) => {
+                  const unavailable = post.isDeleted || post.status === "DELETED" || post.status === "BLOCKED";
+                  const title = post.status === "BLOCKED" ? "[차단된 게시글입니다]" : post.isDeleted || post.status === "DELETED" ? "[삭제된 게시글입니다]" : post.title;
+                  return <Link key={post.publicId} href={`/posts/${post.publicId}`} onClick={(event) => handlePostClick(event, post)} className={`board-post-row ${unavailable ? "unavailable" : ""}`}>
+                    <span className={`board-vote ${post.likeCount >= 50 ? "hot" : ""}`}><span className="material-symbols-outlined">arrow_drop_up</span><b>{post.likeCount}</b></span>
+                    <div className="board-post-copy"><div className="board-post-title"><span>{post.categoryName}</span>{post.likeCount >= 50 && <em>HOT</em>}<strong>{title}</strong>{post.commentCount > 0 && <b>[{post.commentCount}]</b>}{post.hasImage && <span className="material-symbols-outlined image-mark">image</span>}</div><p><b>{post.writerNickname}</b><span>•</span><time>{new Date(post.createdAt).toLocaleDateString("ko-KR")}</time><span>•</span><span>조회 {post.viewCount.toLocaleString()}</span></p></div>
+                    {post.thumbnailImageUrl && <img src={post.thumbnailImageUrl} alt="" />}
+                  </Link>;
+                })}
+            </section>
+
+            <div className="board-navigation">
+              <nav className="board-pagination" aria-label="페이지 이동"><button disabled={page === 0} onClick={() => moveTo({ page: page - 1 })}><span className="material-symbols-outlined">chevron_left</span></button>{visiblePages.map((pageNumber) => <button key={pageNumber} className={page === pageNumber ? "current" : ""} onClick={() => moveTo({ page: pageNumber })}>{pageNumber + 1}</button>)}{totalPages > 6 && <><span>…</span><button onClick={() => moveTo({ page: totalPages - 1 })}>{totalPages}</button></>}<button disabled={page + 1 >= totalPages} onClick={() => moveTo({ page: page + 1 })}><span className="material-symbols-outlined">chevron_right</span></button></nav>
+              <form className="board-search" onSubmit={handleSearch}><select aria-label="검색 범위"><option>제목+내용</option></select><input value={searchKeyword} onChange={(event) => setSearchKeyword(event.target.value)} placeholder={`${config.name} 내 검색`} /><button>검색</button></form>
             </div>
           </section>
 
-          <div className="mt-8 flex items-center justify-center gap-3 font-mono text-sm">
-            <button
-              disabled={page === 0}
-              onClick={() => setPage((current) => Math.max(0, current - 1))}
-              className="snow-btn-secondary min-h-10 px-3"
-            >
-              <span className="material-symbols-outlined text-[18px]">chevron_left</span>
-            </button>
-            <span className="px-3 font-bold">
-              PAGE {page + 1} / {totalPages}
-            </span>
-            <button
-              disabled={page + 1 >= totalPages}
-              onClick={() => setPage((current) => current + 1)}
-              className="snow-btn-secondary min-h-10 px-3"
-            >
-              <span className="material-symbols-outlined text-[18px]">chevron_right</span>
-            </button>
-          </div>
-        </main>
-      </div>
+          <aside className="board-sidebar">
+            <section className="board-widget topic-widget"><header><h2><span className="material-symbols-outlined">trending_up</span>{config.name} 실시간 핫 토픽</h2><small>10분 주기 갱신</small></header><ol>{config.topics.map((topic, index) => <li key={topic}><b>{index + 1}</b><Link href={`/posts${currentCategory ? `?category=${currentCategory}` : ""}`}>{topic}</Link><span>{index === 3 ? "NEW" : index < 2 ? `▲ ${42 - index * 24}` : "-"}</span></li>)}</ol></section>
+            <section className="board-widget board-carpool" id="carpool"><header><h2><em>실시간</em> 급구! 카풀 &amp; 동행</h2><Link href="/#carpool">+ 등록</Link></header><div>{carpools.map((item) => <article key={item.from}><div><strong>{item.from} <span>→</span> <em>{item.to}</em></strong><b>{item.seat}</b></div><p><span>{item.date}</span><strong>{item.price}</strong></p></article>)}</div></section>
+          </aside>
+        </div>
+      </main>
       <Footer />
     </div>
   );
 }
 
 export default function PostListPage() {
-  return (
-    <Suspense fallback={<div className="p-12 text-center text-sm text-[var(--snow-muted)]">로딩 중입니다...</div>}>
-      <PostListContent />
-    </Suspense>
-  );
+  return <Suspense fallback={<div className="board-state"><strong>게시판을 준비하는 중입니다.</strong></div>}><PostListContent /></Suspense>;
 }
diff --git a/scripts/deploy-ecr-service.sh b/scripts/deploy-ecr-service.sh
new file mode 100644
index 0000000..e3f1946
--- /dev/null
+++ b/scripts/deploy-ecr-service.sh
@@ -0,0 +1,106 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SERVICE="${1:?service is required}"
+IMAGE_URI="${2:?image URI is required}"
+AWS_REGION="${3:?AWS region is required}"
+
+case "$SERVICE" in
+  backend)
+    IMAGE_VARIABLE="BACKEND_IMAGE_URI"
+    CONTAINER_NAME="snowthing-backend"
+    HEALTH_URL="http://127.0.0.1:8080/api/v1/master/resorts"
+    EXPECTED_STATUS='200'
+    ;;
+  frontend)
+    IMAGE_VARIABLE="FRONTEND_IMAGE_URI"
+    CONTAINER_NAME="snowthing-frontend"
+    HEALTH_URL="http://127.0.0.1:3000"
+    EXPECTED_STATUS='200|304'
+    ;;
+  *)
+    echo "지원하지 않는 서비스입니다: $SERVICE" >&2
+    exit 2
+    ;;
+esac
+
+if [[ ! "$IMAGE_URI" =~ @sha256:[0-9a-f]{64}$ ]]; then
+  echo "digest로 고정된 ECR 이미지 주소만 배포할 수 있습니다: $IMAGE_URI" >&2
+  exit 2
+fi
+
+REGISTRY="${IMAGE_URI%%/*}"
+PREVIOUS_IMAGE="$(docker inspect --format '{{.Config.Image}}' "$CONTAINER_NAME" 2>/dev/null || true)"
+
+check_health() {
+  local attempt status
+  for attempt in $(seq 1 12); do
+    status="$(curl -s -o /dev/null -w '%{http_code}' "$HEALTH_URL" || true)"
+    if [[ "$status" =~ ^($EXPECTED_STATUS)$ ]]; then
+      echo "$SERVICE 헬스체크 성공 (HTTP $status)"
+      return 0
+    fi
+    echo "$SERVICE 시작 대기 중 ($attempt/12, HTTP $status)"
+    sleep 5
+  done
+  return 1
+}
+
+collect_diagnostics() {
+  local timestamp diagnostic_file
+  timestamp="$(date -u +'%Y%m%dT%H%M%SZ')"
+  mkdir -p /var/log/snowthing-deploy
+  diagnostic_file="/var/log/snowthing-deploy/${SERVICE}-${timestamp}.log"
+
+  {
+    echo "timestamp_utc=$timestamp"
+    echo "service=$SERVICE"
+    echo "target_image=$IMAGE_URI"
+    echo "=== docker ps -a ==="
+    docker ps -a --filter "name=^/${CONTAINER_NAME}$" --no-trunc || true
+    echo "=== docker inspect (secrets excluded) ==="
+    docker inspect --format 'image={{.Config.Image}} status={{.State.Status}} running={{.State.Running}} exit_code={{.State.ExitCode}} error={{.State.Error}} started_at={{.State.StartedAt}} finished_at={{.State.FinishedAt}} restart_count={{.RestartCount}} network_mode={{.HostConfig.NetworkMode}}' "$CONTAINER_NAME" || true
+    echo "=== container logs (last 100 lines) ==="
+    docker logs --tail 100 --timestamps "$CONTAINER_NAME" 2>&1 || true
+    echo "=== nginx error log (last 100 lines) ==="
+    tail -n 100 /var/log/nginx/error.log 2>&1 || true
+  } | tee "$diagnostic_file"
+
+  echo "진단 로그 저장 위치: $diagnostic_file" >&2
+}
+
+echo "ECR 로그인 및 digest 이미지 pull"
+aws ecr get-login-password --region "$AWS_REGION" \
+  | docker login --username AWS --password-stdin "$REGISTRY"
+docker pull "$IMAGE_URI"
+
+echo "$SERVICE 컨테이너를 새 digest로 교체"
+if env "$IMAGE_VARIABLE=$IMAGE_URI" docker compose \
+  --env-file /etc/snowthing/prod.env \
+  -f compose.prod.yml \
+  up -d --no-build "$SERVICE" && check_health; then
+  echo "$SERVICE 배포 성공: $IMAGE_URI"
+  exit 0
+fi
+
+echo "$SERVICE 배포 실패" >&2
+collect_diagnostics
+
+if [[ -z "$PREVIOUS_IMAGE" ]]; then
+  echo "복구할 이전 이미지가 없습니다." >&2
+  exit 1
+fi
+
+echo "이전 이미지로 자동 복구: $PREVIOUS_IMAGE" >&2
+env "$IMAGE_VARIABLE=$PREVIOUS_IMAGE" docker compose \
+  --env-file /etc/snowthing/prod.env \
+  -f compose.prod.yml \
+  up -d --no-build "$SERVICE"
+
+if check_health; then
+  echo "이전 이미지 복구 성공" >&2
+else
+  echo "이전 이미지 복구 후에도 헬스체크 실패" >&2
+fi
+
+exit 1